« Tool for adding new default templates | Main | New Tagging feature of FCKeditor »

Full Featured FCKeditor on Movable Type

Go to Korean entry

New version released for MT 3.3

Current Version: 3.2.05

  If you are a 3.2.04 user, see patching process.

New feature of 3.2.05 version is explained in this separate entry


This plugin enables you to use editor easily and customzably in . There are many available open WYSIWYG editors. I've used HTMLArea and . Both are very good, even though they give some loads to your PC. But as time goes by, this load could be trivial.

My alogblogMTinterface plugin uses many alternate templates. Therefore the users who use my alogblogMTinterface might have some troubles in personally adapting other WYSIWYG editors. Of course I also have the same trouble whenever new W~G editors or its MT plugins are released. So I decided to provide W~G in it independently. One of the powerful features of FCKeditor is the Media Browser which is is included by default. It is that feature for which I choose FCKeditor as its W~G editor.

This plugin is alogblogMTinterface's updated(FCKeditor added) version. So naturally I should have added the content of this page into the origianl page. But in order to explain W~G features more definitely, I created this new plugin page separately. If you have some doubt about alogblogMTinterface itselt, read the original page.

Requirement

  • Movable Type 3.2
  • PHP in order to use FCKeditor's link/image/flash browser and uploader

Features


Fig. FCKeditors on alogblogMTinterface. You can
  • change the height of normal textarea( not FCKeditor) dynamically.
  • customize the height of FCKeditor editing box.
  • customize the path of emoticon and UserFiles folder to be uploaded
  • make your own FCK templates by using MT templates.
  • make your own FCK CSS Styles by using MT templates.
  • have three FCK skins customized to alogblogMTinterface "classic, sky, peach" styles.
  • use FCKeditor's media browser and uploader easily.
  • use FCKeditor's two plugins, FullWindow and Tagging ( added in version 3.2.05 )

Installation

  1. Download this plugin and untar it under (mt home), like $ tar xvfz alogblogMTinterface_fck-3.2.05.tar.gz (*** If you want FCKeditor on MT native interface, not on my alogblogMTinterface, download this. I made this version because my alogblogMTinterface doesn't fit well on some language environments like Farsi, which shows characters from right to left.)
  2. Run the following command under (mt home), $ perl   tools/add-default-templates (*** If you can't run command in terminal (only can use FTP uploading), you have to do following steps. Those are the things that "add-default-templates" Perl tool actually does. Could you know why I provided additional Perl tool?)
  3. Go to (mt home)/mt-static/FCKeditor, and give a full permission, $ chmod -R 777 UserFiles

Patching for 3.2.04 version users

  1. Download patch fille (patch fille for no alogblogMTinterface) and untar it under (mt home)
    This patch overrides 4 pre-installed files; plugins/alogblog/alogblogMTinterface.pl, alt-tmpl/cms/header.tmpl, tools/default_templates/fck_editorarea.css.tmpl.add, and mt-static/FCKeditor/fckconfig.js files. If you customized one of these, you will have to backup that file before untaring patch.
  2. Run $ perl tools/add-default-templates under (mt home).
  3. Go to current blog's Template List page and select "FCKeditor CSS" template, and do "Refresh Template(s)" action, lastly save-and-rebuild it.

Have you done it well? Let's go and test.

Trial for verification

Making FCKeditor default
Click "Create New Entry". Do you see FCKeditor? Maybe not. You've set "Text Formatting" to "Convert Line Breaks" or something else. Set it to "FCKeditor", then it will show up. If you want FCKeditor to be default, set it in "New Entry Default" tab menu of "Edit Weblog Configuration".
Link/Image/Flash browser and uploader
It is a link browser that when you insert <a> link in your entry and point href="..." to some resources at your server. Image and Flash browser do the same role but limits lts file type. First click "Image Insert" menu button, then popup will be shown. If you want to upload an image file to the UserFiles/Image folder directly and use that uploaded image URL in newly inserted <IMG src="...">, then click "Upload" tab menu in popup. But this uploading features can't do change its destination folder other than "UserFiles/Image" folder. Try to click "Browse Server" button in "Image Info" tab menu.(As you see, FCKeditor uses client's browsers language information and shows all possible menu label in related language.) I provided one image file, "cat.jpg". Try to "Create New Folder". If you failed, you should check out (sub)folder permission of (mt home)/mt-static/FCKeditor/UserFiles. By using Image Browser, you can upload image to any folder. In my plugin, I used PHP version of it. Flash Browser/Uploader is same with Image one. I provided one funny flash movie. You can preview and insert it for a test.
Preliminaries for FCKeditors' Templates/Styles features
* Is your head very hot and dizzy? If so, you never have to read below page right now. Leave and enjoy FCKeditor. Instead, when you are accustomed to its features, you should go back here and read it. If NOT, let's continue! You could use WYSIWYG features and FCKeditor's poweful Media Browsers/Uploaders. Are you satisfied with it? Too early to be. FCKeditor supports Templates and Styles features. I strongly recommend you to use these freely in MT. I think my plugin's best feature is that very one. Follow below steps.
  1. First, go to "List Weblogs" in System Overview. Select all your existing blogs and do "Add Default Template(s)" action.
  2. Go to "List Template" menu page of current blog. There'll be 3 new FCKeditor related templates. Open and rebuild those just once, in order to create their output files.
  3. Open your blog's stylesheet(styles-site.css) template and add @import url(fck_editorarea.css); at the top of it.
* You may wonder, wow when those MT index tempates was created? Step 1 did it. (addDefaultTemplates plugin was developed in order for users to customize FCKeditor easily on MT templates. If you have some questions about it, see its page.) Those three templates are not only index templates but also "default" templates. What means "default" in MT? If you create a new blog, above three FCK related templates automatically will be created because those are default. If you ruine some, you can refresh by "TemplateRefresh" action. If you delete some by mistake, you can add again by "AddDefaultTemplate" action.
FCKeditor Templates:
Click "template" button in FCKeditor menu bar. If you see a FCKtemplate listing popup window, select last one "Plugin Document". If you do, pre-entered entry data will be lost, so if you want to use it, do it first. What happened? If you see my plugin document template, your setting is O.K. You can use FCKtemplate feature fully and easily. If you want to have your own FCK template, add it in "FCKeditor Templates" index template. You must not change its output file name(fcktemplates.xml). Its syntax is very intuitive. Don't forget to rebuild it after modifying.
FCKeditor Styles
You may want to apply your own styles(CSS rules) into both of FCKeditor and resulting entry page. In all WYSIWYG editor like FCKeditor, the worst(?) disadvantage is an abuse of HARD CODED font tags with color or size attributes. If you are not novice user, don't use Font Family/Size selection menu. As possible as you can, use Style. In native FCKeditor system, it may be a little annoying, but using my plugins you can manage it under MT's template menu. In case of FCKtemplates, we only used one related MT template. However Styles are related with two MT templates, "FCKeditor CSS" and "FCKeditor CSS Mapping" templates. I can't explain its syntax in here. But once you see its content, you will understand and utilize it easily. Open and add your simple style to those for a test. Don't forget to rebuild it. By using this feature, you can perfectly synchronize the appearance of entry in both FCKeditor and published page.
Publishing a test entry
If you set entry's Text Formatting to other than FCKeditor, "Entry Body" and "Extended Entry" textarea will have "Up/Down" arrow buttons. Clicking it, you can extend the height of textarea. This feature is not supported in current FCKeditor API. I also added HTMLArea's cute emoticons to default FCK smiley. O.K. With a test entry, put all possible items and publish it. Especailly watch out your custom styles. Well published? I wish you succeed.

Optional Customization

Height of FCKeditor editing box
Although I searched FCKeditors API to dynamicaly change its size, I failed, so you can't change its height dynamically. Instead of this, you can configure its height in plugin setting menu for each blogs.
Emoticon
Emoticon is a common and frequently used resourse of all your existing blogs. If you follow above installatin process, emoticon will be located in (path/to/mt)/mt-static/FCKeditor/emoticons/. If you think your default emoticon location is too deep in path or you want just to use previously used image folder, you can move (mt home)/mt-static/FCKeditor/emoticons/* files to your other destination folder, and then teach its new location to MT. Because emoticon is common resource, you need to configure it in plugin list page under "System Overview".
UserFiles
The name "UserFiles" was from FCKeditor. By default, FCKeditor stores all uploaded files in "UserFiles" folder. If you follow above installation process, its location will be "path/to/mt/mt-static/FCKeditor/UserFiles/". As you guessed, this folder is common to all your blogs by default. However, in some case, you may want to set different UserFiles path for each blogs. Or just as like "emoticon" case, the path to it will be a little deep. Whatever casese, you can set each UserFiles folder to blogs. This setting is done in each blog's plugin listing page.
Default FCKeditor toolbar menu and others
I customized its toolbar menu, but you may want other formats. If you know FCKeditors related setting method, you can modify it in (mt home)/alt-tmpl/cms/header.tmpl file. You may want to configure FCKeditors Font Family/Size selection box. Maybe you can do this in source level. But as explained above, it's not advisable to use hard-coded font style. Instead, use Styles. Similarly, the use of text color/background color swatch tool is also avoided. By nearly all FCKeditor's configuration method, you can configure FCKeditor as your taste. Find those files under (mt home)/mt-static/FCKeditor and customize it. For example, FCKeditors plugins, skin, and so on. I bet if you dip your feet in FCK source/config level customization, it means you drown whole yourself in it. Don't send SOS to me. It's completely your charge.
Initial size of FullWindow
In IE, you can't resize popup FullWindow. If you want to change initial  size of  FullWindow,  open  (mt home)/  mt-static/ FCKeditor/  editor/  plugins/  FullWindow/  fckplugin.js  file.  In it, you will be able to see "800, 780" part. It's size of FullWindow. Customize it.

Trobuleshooting

  • From my short experiences, many FCKeditor errors was due to my browser environments. Especially, popup filtering hindered FCKeditor creation and Media Browsers.
  • If you can't upload files by FCKeditor's Media Browser, its cause may be mainly due to folder "permission".
  • In some unlucky case, after you save an entry in "Firefox", you see only blank page and rebuilding entry is never happened. I don't know what exact troblemaking source is. Anyway it's when MT's redirection method uses HTML's META tag. If your some installed plugin changed redirect method to HTML meta from HTTP Location header method for some reasons, then error occurs in Firefox. It is my plugin "Cool IRI" that ,I know, causes this collision. If you'are using Cool IRI plugin, please upgrade it.
  •  When you open Image Browser, you should see "cat.jpg" file which I provided for a test. If you couldn't, you might be using some "SYMBOLIC" link somewhere in paths. However FCKeditors PHP routine couldn't process symbolic link well. If you couldn't see cat.jpg, try to insert a line as below.

    Open mt-static/FCKeditor/editor/filemanager/browser/default/connectors/php/io.php file.

    function GetRootPath()
    {
    // inserting starts
            return $_SERVER['DOCUMENT_ROOT'];
    // inserting ends
            $sRealPath = realpath( './' ) ;
            $sSelfPath = $_SERVER['PHP_SELF'] ;
            $sSelfPath = substr( $sSelfPath, 0, strrpos( $sSelfPath, '/' ) ) ;
            return substr( $sRealPath, 0, strlen( $sRealPath ) - strlen( $sSelfPath ) ) ;
    }

License

FCKeditor follows its own copyright. Relased under the Creative Commons License.

Version History

  • 3.2.05: FCKeditor's FullWindow and Tagging plugin added.
  • 3.2.04: FCKeditor 2.1.1 newly added. / Error "Can't call method "preferred_language"..." fixed, thanks dusl for reporting it.
  • 3.2.03: Chinese CSS version added.
  • 3.2.02: Korean/Japanese CSS version added.
  • 3.2.01: for MT 3.2
  • 1.0 : Initial but not released, for MT3.17

webSSearchy

TrackBack

TrackBack URL: http://alogblog.com/movabletype/plugins/TCode.name/47.

※ If you send a trackback by using an automatic blogging tool like QuickPost or so, then your ping will not be shown until the site owner approve it. This is for blocking spam-trackbacks. So please don't try to send pings repeatedly.

 

Listed below are links to weblogs that reference Full Featured FCKeditor on Movable Type:

» FCKeditor in MT from Trommetter Tech
Just found a new WYSIWYG editor for MovableType. [Read More]

» FCKeditor on native MT interface from Coevolving with ...
エントリフォームをより高機能にしたいと思い, WYSIWYGを謳っているFCKe... [Read More]

» Full Featured FCKeditor on Movable Typeを利用する from 武馬のブログ
"Full Featured FCKeditor on Movable... [Read More]

» Full Featured FCKeditor on Movable Typeにひっかかる from 武馬のブログ
"Full Featured FCKeditor on Movable... [Read More]

Post a comment

☞ Your blog URL:

(A comment by authenticated (using TypeKey or OpenID) user will be shown immediately. Other comments need to be approved by the site owner. Until then, it won't appear on the entry. Thanks for waiting.)