FCKeditor 添加自定义的功能按钮

  • 时间:
  • 浏览:1
  • 来源:3分时时彩官网_3分时时彩网站_去哪玩3分时时彩

  第一步:时需书写你的插件文件,这里时需注意你的目录行态,默认的插件路径是..../editor/plugins/ 。为了方便起见大家 不改变默认路径,先在这些目录下创建有一有一一三个白存放插件的文件夹,这里大家 起名为formatcommands。

  而且大家 在此目录下创建有一有一一三个白fckplugin.js,记住这里插件的名字时需为这些名字(大小写也要一致),而且大家 在创建有一有一一三个白语言包文件夹lang,最后把时需的图标文件也放上去与插件文件fckplugin.js同目录下,具体的文件目录请看图:

  补充说明一下:lang文件夹下面是语言包文件,这里我创建了有一有一一三个白en.js  注意 en是国别码不是小写的,机会要是中文能才能写成 zh-cn.js

en.js 的源码为:

/*

* FCKeditor - The text editor for internet

* Copyright (C) 5003-5006 Frederico Caldeira Knabben

*

* Licensed under the terms of the GNU Lesser General Public License:

* http://www.opensource.org/licenses/lgpl-license.php

*

* For further information visit:

* http://www.fckeditor.net/

*

* "Support Open Source software. What about a donation today?"

*

* File Name: en.js

* Marquee English language file.

*

* File Authors:

* Yogananthar Ananthapavan(rollbond@gmail.com)

*/

FCKLang.Format168Btn = 'format';

  这些是为了给出鼠标悬停到按钮上的提示。插件文件的源代码为:

/**//*

* FCKeditor - The text editor for internet

* Copyright (C) 5003-5006 Frederico Caldeira Knabben



* Licensed under the terms of the GNU Lesser General Public License:

* http://www.opensource.org/licenses/lgpl-license.php



* For further information visit:

* http://www.fckeditor.net/



* "Support Open Source software. What about a donation today?"



* File Name: fckplugin.js

* Plugin for Format168 background

*



* File Authors:

* Yogananthar Ananthapavan (rollbond@gmail.com)

*/

// Create the "Format168" toolbar button

var oFormat168Item = new FCKToolbarButton('Format168', FCKLang.Format168Btn);

//设置按钮的图标路径



oFormat168Item.IconPath = FCKPlugins.Items['formatcommands'].Path + 'format168.jpg';

//注册按钮项

FCKToolbarItems.RegisterItem('Format168', oFormat168Item);

// The object used for all Format168 operations.



var FCKFormat168 = new Object();

FCKFormat168 = function(name){



this.Name = name;

}

//FCK_TRISTATE_ON为默认是选中情形



下面的有一有一一三个白土方式 是实现接口的有一有一一三个白时需的土方式 ,而且会报脚本错误

FCKFormat168.prototype.GetState = function() {

return FCK_TRISTATE_OFF;



}

//此土方式 是点击按钮后会完成的操作



FCKFormat168.prototype.Execute = function(){

FormatText();

}

//以下不是实现功能的土方式



function FormatText() {

var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;

if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )

{

var temps = new Array();

var sec = oEditor.EditorDocument.selection.createRange();

var tmpText = sec.text;

var isPart = tmpText != null && tmpText.trim().length > 0;

isPart = false; //暂时无法实现局部格式化

if (!isPart) {

var imgs = oEditor.EditorDocument.images;

if (imgs != null && imgs.length > 0) {

for (j = 0; j < imgs.length; j++) {

var t = document.createElement("IMG");

t.alt = imgs[j].alt;

t.src = imgs[j].src;

t.width = imgs[j].width;

t.height = imgs[j].height;

t.align = imgs[j].align;

temps[temps.length] = t;

}

var formatImgCount = 0;

for (j = 0; j < imgs.length;) {

imgs[j].outerHTML = "#FormatImgID_" + formatImgCount + "#";

formatImgCount++;

}

}

var html = processFormatText(oEditor.EditorDocument.body.innerText);

if (temps != null && temps.length > 0) {

for (j = 0; j < temps.length; j++) {

var imghtml = "<img src=\"" + temps[j].src + "\" alt=\"" + temps[j].alt + "\" width=\"" + temps[j].width + "\" height=\"" + temps[j].height + "\" align=\"" + temps[j].align + "\">";

html = html.replace("#FormatImgID_" + j + "#", imghtml);

}

}

oEditor.SetHTML(html);

} else {

var html = processFormatText(tmpText);

sec.pasteHTML(html);

}

}

else

alert( '时需在设计模式下操作!' ) ;

}

function DBC2SBC(str) {



var result = '';

for (var i = 0; i < str.length; i++) {

code = str.charCodeAt(i);

// “65281”是“!”,“65373”是“}”,“65292”是“,”。不转换","

if (code >= 65281 && code < 65373 && code != 65292 && code != 655006){



// “65248”是转换码距

result += String.fromCharCode(str.charCodeAt(i) - 65248);

} else {

result += str.charAt(i);

}

}

return result;

}

function processFormatText(textContext) {



var text = DBC2SBC(textContext);

var prefix = " ";

var tmps = text.split("\n");

var html = "";

for (i = 0; i < tmps.length; i++) {

var tmp = tmps[i].trim();

if (tmp.length > 0) {

html += "<p> " + tmp + "</p>\n";

}

}

return html;

}

String.prototype.trim = function()



{

return this.replace(/(^[\s ]*)|([\s ]*$)/g, "");

};

String.prototype.leftTrim = function()



{

return this.replace(/(^\s*)/g, "");

};

String.prototype.rightTrim = function()



{

return this.replace(/(\s*$)/g, "");

};

// Register the related command



FCKCommands.RegisterCommand('Format168', new FCKFormat168('Format168'));

 第二步:修改fck默认的配置文件

  直接修改默认的配置文件 fckconfig.js。从FCKeditor文件夹下找到fckconfig.js。找到下面这句:

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;

而且增加:

FCKConfig.Plugins.Add('formatcommands') ;

  'formatcommands'有你在身边的插件文件夹的名字,大小写也要都一样。

第三步:增加自定义的ToolBarSet

FCKConfig.ToolbarSets["MyToolbar"] = [

['Source','Preview','Templates'],

['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],

['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

'/',

['Style','FontFormat','FontName','FontSize'],

['TextColor','BGColor'],

['FitWindow','ShowBlocks','-','About','Format168'] // No comma for the last row.

] ;

  这里的Format168 有你在身边插件文件中预先注册的名字。最后在页面上创建有一有一一三个白fckEditor。

<div>

<script type="text/javascript">

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor.BasePath = "FCKeditor/";

oFCKeditor.ToolbarSet='MyToolbar';

oFCKeditor.Height ="500";

oFCKeditor.Create();

</script>

</div>

  最后的效果如下图:

Tags: FCK   FCKeditor   自定义功能   自定义按钮  
责任编辑:190