fckeditor自定义工具栏控件

最新推荐文章于 2019-08-11 22:37:46 发布

eecool

最新推荐文章于 2019-08-11 22:37:46 发布

阅读量1k

点赞数

分类专栏： Asp.Net 文章标签： fckeditor asp.net

本文链接：https://blog.youkuaiyun.com/eecool/article/details/9748613

版权

Asp.Net 专栏收录该内容

13 篇文章

订阅专栏

这里说的自定义工具栏控件是在fckeditor编辑器中新加入一个按钮，按钮的功能是自定义的，不是fckeditor自己预先有的按钮功能

该按钮实现弹出自定义页面页面是自定义的，页面三个元素：文本框、确定按钮、取消按钮，点击确定可以把数据添加到fckeditor编辑器中，

类似优快云编辑器中的插入代码。

步骤：

1、在 fckeditor/fckconfig.js 文件中添加功能按钮

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;  
  
// FCKConfig.Plugins.Add( 'autogrow' ) ;  
// FCKConfig.Plugins.Add( 'dragresizetable' );  
//add  
FCKConfig.Plugins.Add('userButton');  
FCKConfig.AutoGrowMax = 400 ;

加入工具栏中

FCKConfig.ToolbarSets["Basic"] = [  
    ['Source', 'Preview', '-'],  
    ['StrikeThrough', 'Undo', 'Redo', 'Image', 'OrderedList', 'UnorderedList', 'CreateDiv', '-','Table', 'Flash',],  
    [ 'Bold', 'Underline','JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull', 'TextColor', 'BGColor', '-',  ],  
    [ 'Style', 'FontFormat'],[ 'FontName', 'FontSize', 'userButton']  
];

2、在 fckeditor\editor\lang 文件夹为自定义的按钮加入标识

中文对应的文件：zh-cn.js

英文对用的文件：en.js

userButtonBtn       :"自定义按钮"

3、 新建文件 plugins\ userButton\fckplugin.js

其中userButton是自定义按钮的名称。

在里面放仿照该文件夹下的例子实现该功能。

FCKCommands.RegisterCommand('userButton', new FCKDialogCommand('userButton', FCKLang["userButtonBtn"], FCKPlugins.Items['userButton'].Path + 'MyPage.htm', 400, 300));//MyPage.htm是新建的页面，后面的是大小
var ouserButton=new FCKToolbarButton('userButton',null,FCKLang["userButtonBtn"],null,false,true,74);
FCKToolbarItems.RegisterItem('userButton',ouserButton);

var FCKuserButton = new Object();

FCKuserButton.Add = function(txt) {
    var coText = FCK.CreateElement('DIV');
    coText.innerHTML += txt;
    return 1;
}

4、按钮图片问题

fckeditor的所有按钮图片是存放在一个图片文件里的，文件存放在相应皮肤目录下，如：/fckeditor/skins/silever/fck_strip.gif。你可以通过PS加入当前新按钮的图标，注意，每个按钮的尺寸是 16*16px。