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 <b> 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("<b>"+myText+"!</b>")
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.
Creating a Non-dialog Based Plugin
In this example, we will create a toolbar button. It will enclose the selected text in <b> 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("<b>"+myText+"!</b>")
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.
RE: How-To: Non-Dialog Plugin
Roger Wyatt
RE: How-To: Non-Dialog Plugin
IE has no probs.. but FF crashes or the text area locks up, thanks for any assist
RE: How-To: Non-Dialog Plugin
I did as arkporter stated.
It works fine except one thing.
The new image is not shown at http://www.searchresult.co.kr/fckeditor ... mple01.cfm
You can see my new image at http://220.89.242.20/FCKeditor/editor/s ... phasis.gif.
Did I put the new image to wrong place?
What did I wrong in your think, please?
RE: How-To: Non-Dialog Plugin
mySelection.createRange() is not a function.
the line in your sample is...
myTextRange= mySelection.createRange()
Any one have any ideas??
Thanks.
RE: How-To: Non-Dialog Plugin
mozilla.org says it is an object, but I am getting a string...
this works in that it inserts the code, but obviously cant get the corect selection..
FCKCaption.prototype.Execute = function() {
mySelection = FCK.EditorWindow.getSelection()
//myText = myTextRange.text
myText = mySelection
FCK.InsertHtml("<b>"+myText+"!</b>")
//myTextRange.select()
}
I am using Firefox 1.01 on Mac OSX 10.3.9 (4 more days to 10.4!!)
Thanks.
RE: How-To: Non-Dialog Plugin
I replaced it with this:
FCKCaption.prototype.Execute = function() {
if(document.all) {
mySelection = FCK.EditorDocument.selection
} else {
mySelection = FCK.EditorWindow.getSelection()
}
alert("you selected:"+mySelection)
}
and it shows that mySelection is actualy a string (containing the selected text) not an object...
God I wish I was just a little better with Javascript!!!
RE: How-To: Non-Dialog Plugin
for (property in mySelection)
{
alert("mySelection."+property+"."+mySelection[property];
}
instead of: alert("you selected:"+mySelection)
this is the for in loop flavor for iterating object's properties
RE: How-To: Non-Dialog Plugin
but if i click the button twice the button dont work like the for example the bold button.
how would the button work like a normal "button".
1 click -> code in
2. click (on same selected text) -> code out??
RE: How-To: Non-Dialog Plugin
Did not work in Firefox 1.0.4 but fine in IE.
I actually changed:
FCK.InsertHtml("<b>"+myText+"!</b>")
to:
FCK.InsertHtml("“"+myText+"”")
and changed all occurences of "Emphasis" to "Quote" and created an image with the two quotes...
Now we can have true quotes instead of those horrible things like this "
RE: How-To: Non-Dialog Plugin
I am trying to insert some HTML using this and for the most part it works great. But I have one problem...when I do this
FCK.InsertHtml(" [ <a href='#figure1'>Figure 1</a> ]")
OR this
FCK.InsertHtml(" [ <a href=#figure1>Figure 1</a> ]")
The source code tags on additonal html and I get this:
<a href="http://localhost:8500/bijonline/admin/i ... es#figure1">Figure 1</a> ]
Can someone help me out here?
Justin
RE: How-To: Non-Dialog Plugin
file: fckplugin.js
source:
FCKDetails.prototype.Execute = function()
{
var txt = '';
var foundIn = '';
if (window.getSelection)
{
txt = FCK.EditorWindow.getSelection();
foundIn = 'window.getSelection()';
}
else if (document.getSelection)
{
txt = FCK.EditorDocument.getSelection();
foundIn = 'document.getSelection()';
}
else if (document.selection)
{
txt = FCK.EditorDocument.selection.createRange().text;
foundIn = 'document.selection.createRange()';
}
else return;
FCK.InsertHtml("<test>"+txt+"</test>")
myTextRange.select()
}