FCKEditor is an in-browser Javascript WYSIWYG editor and supports a varity of server-side backends with PHP as the default. This section contains articles and blog posts about how to do stuff with FCKEditor.
In response to a question asked on my "Count the words in an FCKeditor instance with Javascript" post about how to get the content from an FCKEditor instance and load it into a popup window, I posted "Write content into a dynamic Javascript popup" to show how to do this for any content. In this post I now show how to do this specifically for an FCKEditor instance.
10 days ago I looked at how to remove the “Browse” button and “Upload” tab in FCKEditor Link dialog in the FCKEditor in-browser Javascript HTML editor. This post looks at how to do the same thing but for the Image Properties dialog.
Removing the Upload tab is really useful if you want to provide your own custom way of uploading images (I’ll show how to do this in FCKEditor another time) and prevent the built-in way of uploading images from displaying.
Removing the “Browse Server” button probably isn’t so useful because you can easily enough override the way to browse it with your own custom dialog, but I’ve included it because it’s part of the same dialog. I’ll look at how to provide your own custom dialog in a future post as well.
The first screenshot below shows the Image Properties dialog with the Upload tab and Browse Server buttons highlighted with red boxes. Those are what we are going to remove.
Add the following lines to your FCKEditor configuration file to get rid of them. ImageBrowser configures the Browse Server button and ImageUpload the Upload tab.
FCKConfig.ImageBrowser = false; FCKConfig.ImageUpload = false;
This can either be done by modifying the FCKEditor’s fckconfig.js file or in a custom configuration file. A custom config file is a better option and is covered in my FCKEditor: Using a custom configuration file post.
You may need to clear the browser’s cache for the new settings to take effect. Once you’ve reloaded etc the button and tab will be gone as shown in the resulting screenshot below:
I’ll post a new FCKEditor post about every ten days as part of my series of Javascript posts on Tuesdays and Fridays (and occasionally Sundays). To make sure you don’t miss out subscribe to my RSS feed if you haven’t already. See below for details.
FCKEditor is an in-browser Javascript WYSIWYG editor. It has a useful “paste as plain text” function which removes all formatting from the text in the clipboard before pasting it into the editor. This is useful for getting rid of all the additional HTML rubbish that Microsoft Word copies to the clipboard. This post looks at the function and then how to always enable the paste as plain text function in FCKEditor and a “gotcha” in Firefox.
The three paste icons in FCKEditor look like so, the first one being a regular paste, the second paste as plain text and the third paste from Word:
The paste from Word one doesn’t actually remove a lot of the formatting HTM rubbish so it’s almost always better to use the paste as plain text function and then re-format it to get rid of the bloated HTML.
You can make FCKEditor always paste as plain text globally by adding the following line to the fckconfig.js file (or your own custom configuration file):
FCKConfig.ForcePasteAsPlainText = true;
or to a specific editor by doing it in code, as in the following PHP example:
$oFCKeditor = new FCKeditor('editornamehere');
...
$oFCKeditor->Config["ForcePasteAsPlainText"] = true;
...
$oFCKeditor->Create();
This works beautifully in Internet Explorer which simply pastes the clipboard contents into the editor after removing all the formatting. The Firefox “gotcha” is that it opens up the regular “paste as plain text” window first, you then have to click into the editor, and Ctrl+V paste again.
The regular “paste as plain text” dialog is shown below:
This is a real nusiance and makes it a bit unusable for Firefox. If the people who will be using FCKEditor will be using Firefox at all it’s probably best to not enable this automatic paste as plain text functionality and just get people to use the paste as plain text button when they need to do this until the FCKEditor developers have fixed this issue. I haven’t tried this out in Safari or Opera so don’t know if it has the same problem in those browsers.
By default the file manager is disabled in the FCKEditor in-browser WYSIWYG HTML editor for security reasons, so people can’t browse files on your server. This post looks at how to enable the connector with PHP so you can browse files on your server.
A couple of days ago I looked at how to count the words in a textarea or input with jQuery and in this post look at how to do the same but for an FCKeditor instance. FCKeditor is an in-browser HTML editor. The code for counting the words uses regular Javascript and does not require jQuery.
FCKeditor has a style drop down box which can be used to apply styles to a block of text. The styles in the drop down box can be customised by specifying a custom fckstyles.xml file.
