Dropping the 'F' (bomb?) might explain why they renamed it to CKEditor.One of my pet peeves when using our old FCKEditor is that the Paste from Word is useless since it doesn't strip out all the extra crap that Microsoft Word puts into the Clipboard. Well, I tried out the new CKEditor on Movable Type and finally this feature works! I'm a straight HTML-kinda guy, so I never paste from Word into the (F)CKEditor, but my boss Rich Tehrani swears by it. I've seen him paste into FCKEditor then have to click View Source button and clean up all the gobbledygook by hand. It ain't pretty. Not very efficient either. All that work just to retain some hyperlinks and formatting? I tried telling Rich "Notepad and handcoding HTML tags FTW! (For the Win!)", but he wasn't buying it. Part of my job as CTO is making sure TMC team members are productive. It pains me to see Rich being so inefficient and he ain't learning straight HTML code anytime soon.
So anywho, it's been awhile since I've upgraded Movable Type's GUI editor (FCKEditor), so I thought I'd check the new version out. I got it working for MT4.x simply by using the old FCKEditor plugin that David Davis wrote along with some minor code tweaks.
First, I simply downloaded the latest CKEditor from ckeditor.com. Next, I extracted it into the exact same folder as my old FCKEditor plugin folder since I could see the filenames were different by 1 letter (old filenames had 'f' and the new files had no 'f' as the first letter). Thus, I could easily revert to the old version if I wanted with no concern over overwriting the current FCKEditor.
Then I had to rename fck_editor.js to ckeditor.js in mt-static/plugins/FCKeditor/fckeditor/fckeditor.tmpl.
Next, I added a snippet of code below just above this line:
<img src="<$mt:var name="static_uri"$>images/spacer.gif" width="100%" height="10"/>
Code to add:
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor-content-textarea' );
//]]>
</script>
All this code does is look for the textarea with id=editor-content-textarea and overlay the CKEditor on top. Pretty simple...
Here's the editor in action:
While this works, the only issue I have is that I can't override the Insert Image button that the CKEditor uses. Thus, I lose the awesome MT Asset Manager, which takes care of uploading and managing images.
It should be an easy fix. In the old FCKEditor MT plugin the code to override FCKEditor's InsertImage button was this code inside the fck_editor.js file:
insertImage: function() {
var div = DOM.getElement( "editor-content-enclosure" );
app.openDialog( "__mode=list_assets&_type=asset&edit_field=" + div.getAttribute( "edit-field" )
+ "&blog_id=" + div.getAttribute( "mt:blog-id" ) + "&dialog_view=1&filter=class&filter_val=image" );
Basically, this code launches the MT Asset insert image dialog window. But I'm not sure how to make these changes to the new ckeditor.js, which seems fairly different from fck_editor.js. Alas, Javascript isn't my expertise. If any of you Movable Type fans out there figure it out let me know. I should mention that if you're running Movable Type 5, there is a new CKEditor MT plugin that seamlessly integrates with the new CKEditor (download). Alas, we're still running Movable Type 4 since there are plugin incompatibilities with MT5. So I'd really like to get the new CKEditor running on our MT4.25 install.
