[Tip of the Week] Editing Content with CKEditor

When working on large pages or blog entries it can be difficult to see much of the document at once. Dealing with scroll bars inside of scroll bars can also be challenge. Don’t forget that CKEditor has a fullscreen mode. On the top toolbar, the second button from the left looks like 4 diagonal arrows pointing away from each other. Clicking this is maximize the editor windows to take the full window while you are editing. To return to the normal view, simply click the button again.

Sometimes you may also need to have specific markup tags in your content to satisfy a library such as Twitter Bootstrap for tabs and such. We have the EditArea and TextArea editors to help with this, but CKEditor also comes with a source view that is activated by clicking the “Source” button to the left of the fullscreen button. And if you want to verify your content is inside the correct divs and spans from the WYSIWYG view, click the “Show Blocks” button to the right of the fullscreen button to add overlays to the editor that show you the nesting of your markup.

More info here: http://docs.cksource.com/CKEditor_3.x/Users_Guide/Quick_Reference

P.S. If you ever try to include a JavaScript block in your page and it doesn’t work, view source as the script tags may have been replaced with . This isn’t the fault of CKEditor or ContentBox. What you’ll need to do is turn off Script-protect in your CFML engine administrator.



ColdBox Platform Evangelist
Ortus Solutions, Corp

E-mail: brad@coldbox.org
ColdBox Platform: http://www.coldbox.org
Blog: http://www.codersrevolution.com