Search code examples
javascriptpluginsfckeditor

FCKEditor - how to make a simple plugin?


I have a site that uses the FCKEditor. I'd like to make an incredibly simple plugin: when a user selects text and then hits MyPluginIcon, the editor surrounds the text in a span tag with a specific class.

So it's just like the Bold or Italic button, but for:

<span class="blah">EtcEtc</span>

I am far from a JS expert, so I have been looking for a plugin to copy. I have looked in the FCK wiki but all the plugins I have found are really complex (file browsers and whatnot). Do you know of a super simple FCK plugin I can base my plugin off of?

Thanks!


Solution

  • Answering my own question! Hopefully if someone finds this in the future it will help.

    I used the basic file from here: http://www.iondev.lu/fckeditor/netnoi.txt

    I found-and-replaced the "netnoi" with my own name, and uncommented the icon line to make an icon (16x16).

    And the instructions on how to install it from here: http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins

    Be sure to check that the plugins directory is correct -- in drupal the plugins folder is different than a default FCK install.

    EDIT: Apparently the netnoi.txt has gone missing. Here is what I used:

    /***
     * Create blank command
     */
    var FCKPixelCaps_command = function()
    {
    
    }
    
    /***
     * Add Execute prototype
     */
    FCKPixelCaps_command.prototype.Execute = function()
    {
            // get whatever is selected in the FCKeditor window
            var selection = FCK.EditorDocument.getSelection();
    
            // if there is a selection, add tags around it
            if(selection.length > 0)
            {
                    FCK.InsertHtml('<span class="caps">' + selection + '</span>');
            } else {
                    // for debugging reasons, I added this alert so I see if nothing is selected
                    alert('nothing selected');
            }
    }
    
    /***
     * Add GetState prototype
     * - This is one of the lines I can't explain
     */
    FCKPixelCaps_command.prototype.GetState = function()
    {
            return;
    }
    
    // register the command so it can be use by a button later
    FCKCommands.RegisterCommand( 'PixelCaps_command' , new FCKPixelCaps_command() ) ;
    
    /***
     * Create the  toolbar button.
     */
    
    // create a button with the label "Netnoi" that calls the netnoi_command
    var oPixelCaps = new FCKToolbarButton( 'PixelCaps_command', 'Pixels & Pulp Caps' ) ;
    oPixelCaps.IconPath = FCKConfig.PluginsPath + 'PixelCaps/caps.gif' ;
    
    // register the item so it can added to a toolbar
    FCKToolbarItems.RegisterItem( 'PixelCaps', oPixelCaps ) ;