Search
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Codes Author
Sat, 01-Nov-2014 Authors
All Time Authors
Satyapriyanayak
12160
Vishal@Neeraj
8800
Jayakumars
8120

Latest members | More ...


(Statistics delayed by 5 minutes)
 Codes

Plugin for FCKEditor

Suresh.mekkattil
Posted by Suresh.mekkattil under JavaScript on 1/12/2011 11:11:59 PM | Points: 40 | Views : 3184 | Status : [Member]

Hi guys,

I am using the Fck Editor i nmy application and I have created a new plug in, so I want to share this with you

This plug in a dropdown with some predefined values. I use these values as a template fields like, email, phone etc.
And then I replace these template with actual value at runtime. Also I keep the template fields in the DB. That means the dropdown is getting filled from the DB.

In your app path go to your FCKEditor's folder. From there you can go to editor>plugins.

In Plugin folder, you can create a new folder for your plugin, here mergefields.

Inside that folder create a javascript file, "fckplugin.js"

the following is the code for that file

// Initialize the Month Combo

var mergeFieldCombo = function(name) {
this.Name = name;
}

// Execute the Command
mergeFieldCombo.prototype.Execute = function(itemText, itemLabel) {
if (itemText != "")
FCK.InsertHtml("[" + itemText + "]");
}

// Manage the plugin behavior
mergeFieldCombo.prototype.GetState = function() {
return FCK_TRISTATE_OFF; // FCK_TRISTATE_OFF or FCK_TRISTATE_ON
}

// Register the command.
FCKCommands.RegisterCommand('MergeFieldCombo', new mergeFieldCombo('MergeFieldCombo'));

// Create the toolbar button.
var mergeFieldComboToolbar = function(tooltip, style) {
this.Command = FCKCommands.GetCommand('MergeFieldCombo');
this.CommandName = 'MergeFieldCombo';
this.Label = this.GetLabel();
this.Tooltip = tooltip ? tooltip : this.Label;
this.Style = style; //FCK_TOOLBARITEM_ICONTEXT OR FCK_TOOLBARITEM_ONLYTEXT
}

// Set the toolbar prototype.
mergeFieldComboToolbar.prototype = new FCKToolbarSpecialCombo;

// Label to appear in the FCK toolbar
mergeFieldComboToolbar.prototype.GetLabel = function() {
return "Merge Field";
}

// Add the items to the combo list
mergeFieldComboToolbar.prototype.CreateItems = function(A) {
var items = null;

// Getting the values from the parent page.
items = parent.items;

// Checking if the value exists.
if (items != 'undefined') {
if (items.length != 0) {
//alert(items);
// Adding the items to dropdownlist
for (var i = 0; i < items.length; i++) {
this._Combo.AddItem(items[i], items[i]);
}
}
}
}

// Register the combo with the FCKeditor
FCKToolbarItems.RegisterItem('MergeFieldCombo', new mergeFieldComboToolbar('Merge Field', FCK_TOOLBARITEM_ICONTEXT)); //FCK_TOOLBARITEM_ONLYICON or FCK_TOOLBARITEM_ONLYTEXT or FCK_TOOLBARITEM_ICONTEXT


You have created a plugin!!!

Now you need to add this plugin to the FCKEditor
go to your FCKEditor configuration folder, locate the FCKConfig file and add the following code,

FCKConfig.Plugins.Add('MergeFieldCombo', null, '/FCKEditor/editor/plugins/');



I have used an Array items for filling the dropdown. So you just need to create a array variable with that namein the page you want and assign the values.


You are done!!!

Please feel free to contact for any doubts


-----
Suresh M
Found interesting? Add this to:



Comments or Responses

Posted by: Jayeshl on: 6/1/2011 | Level:Starter | Status: [Member] | Points: 10

hi friend,
can i have source code for fckeditter.

thanks

Posted by: Sundar123 on: 4/27/2012 | Level:Starter | Status: [Member] | Points: 10

Hi Suresh,

I have created plug in In MyFCK editor in PHP. But I cant view the dropdown box in FCKeditor. Please provide more details with example code.

Thanks
Sundaravel


Login to post response