Code Snippet posted by:
Suresh.mekkattil | Posted on: 1/12/2011 | Category:
JavaScript Codes | Views: 2312 | Status:
[Member] |
Points: 40
|
Alert Moderator
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, items);
}
}
}
}
// 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