Viewing post

Woha – nearly a year! CKEditor and A4 paper size.

Nearly a year since I last blogged. Phew, caught it just in time ;-)

First time this year (2013) I got to drive home without my lights on. The clocks haven’t even gone back yet! Woo-hoo for springtime :)

So today’s topic, CKEditor and A4 paper. Mmm-hmm. Letter paper, A4, A5, in fact any size. You want to let someone WYSIWYG edit layout on a piece of paper, envelope, acetate, banner, badge or whatever. Sure, we can do that!

<script type="text/javascript">
// ON CKEDITOR READY:
CKEDITOR.on('instanceReady', function() {;
var iframe = $('#cke_editable_area iframe').contents ();
iframe.find ('html').css ({
'background-color': '#b0b0b0'
});
iframe.find ('body').css ({
'width': '297mm',
'height': '210mm',
'background-color': '#ffffff',
'margin': '0mm',
'padding': '5mm'
});
});</script>

Yee-haa cowboy. The above uses the CKEditor instanceReady event and some jQuery magic (not optimally written :) ) to force the width/height of the editable area. Unfortunately text can flow past the bottom (but not off the sides or top) – but that’s probably a good thing, else the user would not “see” that they’ve made a mistake.

Some grey colouring gives the illusion that you’re working with your favourite text editor.

Shove the result to a fresh page with the following CSS for printing, certainly with Chrome – works like a champ. (Note I’m using A4 measurements in the JavaScript, so the CSS below is to match that.)

body {
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
width: 297mm;
height: 210mm;
background-color: #ffffff;
margin: 0mm;
padding: 0mm;
}

@page {
size: landscape;
width: 297mm;
height: 210mm;
margin: 5mm;
}

UPDATE: further information on how I achieved this has been requested … what I ended up with (after much fiddling) was a 95% accurate “what you see is what will print” … using a kludge of ugly tricks.

The main JS:

<script type="text/javascript">
// ON CKEDITOR READY: Sets up page size and white colour background in edit area
CKEDITOR.on('instanceReady', function() {;
	var iframe = $('#cke_editable_area iframe').contents ();
	iframe.find ('html').css ({
		'background-color': '#b0b0b0'
	});
	iframe.find ('body').css ({
		'width': '297mm',
		'height': '420mm', //was 210 ****
		'background-color': '#ffffff',
		'margin': '0mm',
		'padding': '5mm'
	});
	iframe.find ('td').css ({
		'padding': '-1px'
	});
});</script>

That generates a landscape A4 page, editable in your browser.

To print, I pass the content (HTTP POST, basically) into a printable page:

<html lang="en" dir="ltr">
   <!-- the following stylesheet is provided by ckeditor - and provides some sane defaults for displaying -->
   <link rel="stylesheet" type="text/css" href="/css/ckeditor.css" />
   <body
     class="cke_contents_ltr cke_show_borders"
     spellcheck="false"
     style="width: 297mm;
       height: 420mm;
       background-color: rgb(255, 255, 255);
       margin: 0mm;
       padding: 5mm;
       cursor: auto;">
      <table
        class="cke_show_border"
        cellspacing="0"
        cellpadding="0"
        style="width:1120px; border:none;"
        _moz_resizing="true">
         <?php print $contents; ?>
      </table>
   </body>
</html>

The CSS referenced is vanilla from CKEditor.

9 Responses to “Woha – nearly a year! CKEditor and A4 paper size.”

  1. Joe Says:

    This is exactly what I am trying to do!

    Do you have a full example as I can’t get your above code to work properly.

    Thanks in advance

  2. wally Says:

    Hi Joe,

    Yeah – actually I do. But they’re unfortunately behind a secured intranet.

    Had a lot of issues getting what was generated to print out “as desired” (i.e. 100% what-you-see-is-what-you-print) … but >95% I’d say.

    I’ll update the post in the next half hour with as much detail as I can pull (it was a while ago I worked on it!) – feel free to let me know if you have any further issues getting it to work.

  3. Valere Says:

    Hi Joe, very useful post – I’m using this on a project I’m working on. I have a problem though. If I click on the ‘source’ button, the border disappear. How do you cope with that?

  4. Penelope Says:

    It’s hard to find your articles in google. I found it on 17 spot, you should build quality
    backlinks , it will help you to get more visitors.
    I know how to help you, just search in google – k2 seo tips
    and tricks

  5. Matthew Says:

    I read a lot of interesting articles here. Probably you spend a lot of time writing,
    i know how to save you a lot of time, there
    is an online tool that creates unique, google friendly articles
    in seconds, just search in google – laranitas free content source

  6. http://www.161993up.com Says:

    I’m gone to convey my little brother, that he should also pay a quick visit this blog
    on regular basis to obtain updated from hottest news.

    Feel free to surf to my website :: http://www.161993up.com

  7. {buy pinterest followers Says:

    This post is priceless. Where can I find out more?

    Chheck out mmy web site … {buy pinterest followers

  8. Arpit Says:

    Hello Wally,

    I am sure, you are having very good knowledge about the online wordprocessor and Editor.
    I would like to achieve below requirements. Do you have any idea, is there any avaibility in any online editor / wordprocessor to achieve it?

    1. Page Preview. (aka pagination) We must be able to visually see a representation of a page (ie. like you would see in MS Word or Google Docs).
    – The preview must accurately reflect page breaks – It should separe the 2 different pages.
    – Text must flow across pages (ie adding text at bottom of page moves to the next…. deleting moves to previous)

    2. Insert Dynamic Data. Similar to a “mail merge” in MS Word we must be able to insert variable data from datastore into the document.
    – Seamless to user (ie they do not see $variable…. they see “Red House”)
    – Data Must be updatable. (ie we are not doing a one time merge. If datastore changes, we push changed to editor)
    – Does not need to be “live.” Ie we manually refresh to fetch $variable data.

    3. Insert Images – specifically charts
    – handle image inserts and pagination

    At the end, we should able to produce the same pdf as we entered the text.

    I hope, you understand my needs. Would you please let me know, if you any suggestions!

    Sincerely,
    Arpit

  9. wally Says:

    Hi Arpit,

    I’m afraid I have quite the opposite – I have very little knowledge of online WYSIWYG editors!

    Ckeditor (and its descendants) have no native support for the page preview – to my knowledge. They can “preview” the output – but it doesn’t handle page breaks etc.

    I think the only way you’d realistically be able to “simulate” this is to combine something like Ckeditor and some server-side processing, perhaps generating a PDF or similar on the remote end – passing the result back as a “preview”.

    If you want really solid markup for text documents – I’d recommend looking at Tex. Certain libraries already exist which get you half way there (i.e. http://jaxedit.com/note/ ) – but for the page breaks etc, I can’t see a way around doing something “long winded” like generating a PDF or performing some seriously hard-core HTML/CSS wizardry (which is vastly beyond my abilities).

    Sorry :(

Leave a Reply