Non-dialog Based Plugin

The following quote is arkporter's "Step-by-step
Creating a Non-dialog Based Plugin."

In this example, we will create a toolbar button. It will enclose the selected text in tags and add an exclamation point. This may not be very useful, but it will demostrate the process. We will name the new plugin "Emphasis".

Notes:
-- When referencing the plugin, keep casing consistent.
-- This example works in IE 6.0. I can't guarantee anything else.
-- Your browser may cache your pages, so every time you edit your .js file, clear the cache by going to Tools | Internet Options and "delete files". Then refresh your browser.
-- This post assumes that the FCKeditor folder is in the root of your website, and that all directories and files are in their original locations.

1. Create a new directory in your the FCKeditor/editor/plugins folder with the name of your plugin. For this example, name it "Emphasis".

2. Add a file fckplugin.js to this directory which you can copy from another plugin such as "placeholder" (which should already be in the plugins directory).

3. Replace the code in fckplugin.js with the following:

//Begin Code
var FCKEmphasis = function(name)
{
this.Name = name;
}

FCKEmphasis.prototype.Execute = function()
{
if(document.all)
{
mySelection = FCK.EditorDocument.selection
}
else
{
mySelection = FCK.EditorWindow.getSelection()
}
myTextRange= mySelection.createRange()
myText = myTextRange.text
FCK.InsertHtml(""+myText+"!")
myTextRange.select()
}

// manage the plugins' button behavior
FCKEmphasis.prototype.GetState = function()
{
return FCK_TRISTATE_OFF;
}

FCKCommands.RegisterCommand( 'Emphasis', new FCKEmphasis('Emphasis')) ;

// Create the toolbar button.
var oEmphasisItem = new FCKToolbarButton( 'Emphasis', "Emphasis", null, null, false, true ) ;
oEmphasisItem.IconPath = FCKConfig.PluginsPath + 'Emphasis/Emphasis.gif' ;
FCKToolbarItems.RegisterItem( 'Emphasis', oEmphasisItem ) ;

//End Code

4. Add an icon to the folder that will be used in the toolbar. For now, you can just copy the icon from the placeholder plugin. Name the file Emphasis.gif. If you are creating a new icon, it appears that 20x21 is a good size. You can use a .jpg, but make sure to change fckplugin.js to look for Emphasis.jpg.

5. Add the following line to FCKeditor/fckconfig.js

FCKConfig.Plugins.Add( 'Emphasis');

6. Assuming you are using the default configuration, locate the section of FCKeditor/fckconfig.js that begins with:

FCKConfig.ToolbarSets["Default"] = [

At the end of that section, but before the closing bracket ]; add the following:

,['Emphasis']

7. Save all your files, clear the cache (see note above), and open/refresh your page that includes FCKEditor. You should see your new toolbar item at the end of the list.

8. Select some text, click the new button, and see the results.

I actually followed these steps to the letter after creating this How-To, and my plug-in was working within minutes.

Thanks to everyone who posts to this forum. Some of this How-To was based on previous posts. You are all a big help

I followed the above quote step by step and made it successfully.

You can see my work at http://220.89.242.20/FCKeditor/_samples ... mple01.cfm.

There is no problems but I hope something more.

I'll explain what I want more.

(1) If you select 'text' and click the 'B' button which means 'Bold,' the text will become text.

(2) And if you select 'text' again, you can click the 'B' button for cancel it, i.e. from 'text' to 'text.'

(3)If you select 'text and click the 'em' button which means 'Emphashis,' it will become text!.

So far so good.

(4) But you can't cancel it by selecting 'text.'

(Question) Can I make cancelling function to the new button 'em' with your help ?