Woha – nearly a year! CKEditor and A4 paper size. - March 4th, 2013
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;
}

