fckeditor添加自定义按钮

最新推荐文章于 2021-03-13 04:30:36 发布

原创最新推荐文章于 2021-03-13 04:30:36 发布 · 734 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fckeditor #function #date #工具 #null

fckeditor 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何为FCKeditor开发一个简单的日期插入插件，包括创建插件文件夹、编写JS代码实现功能、添加图标及配置文件等步骤。

在这个例子中，我们将创建一个工具栏按钮。插入当前日期，我们将命名新的插件“date”插件。

1。在FCKeditor/editor/plugins插件目录下创建你的插件文件夹的名称。对于本例，命名为“date”。

2。添加一个文件fckplugin.js到这个目录中，可以从另一个插件的拷贝。

3。替换为以下代码在fckplugin.js：

var FCKNowDate = function(name){this.Name = name;}
FCKNowDate.prototype.Execute = function(){FCK.InsertHtml(getdate());}
FCKNowDate.prototype.GetState = function(){return FCK_TRISTATE_OFF;}
FCKCommands.RegisterCommand( 'NowDate', new FCKNowDate('NowDate')) ;
var oNowDateItem = new FCKToolbarButton( 'NowDate', 'NowDate‘, null, null, false, true ) ;
oNowDateItem.IconPath = FCKConfig.PluginsPath + 'datetime/date.gif' ;
FCKToolbarItems.RegisterItem( 'NowDate', oNowDateItem ) ;

function getdate(){var date = new Date(); var year = date.getFullYear().toString(10);var month = (date.getMonth() + 1).toString(10);month = month.length < 2 ? '0' + month : month;var day = date.getDate().toString(10);day = day.length < 2 ? '0' + day : day;var value = year + '-' + month + '-' + day;return value}

4。添加图标将在工具栏上的文件夹。现在，你可以复制的占位符插件的图标。将该文件命名为date.gif。如果要创建一个新的图标，似乎是一个很好的18x18大小。格式为gif的。

5. 添加下面代码到FCKeditor/fckconfig.js
FCKConfig.Plugins.Add( 'date');//date为文件夹名称

6。假设你使用的是默认配置，找到FCKeditor/fckconfig.js 开头：
FCKConfig.ToolbarSets["Default"] = [
在该节的末尾，但在右括号 ]添加以下内容：,['NowDate']

7。保存所有的文件，清除缓存（见注以上），并打开/刷新页面，其中包括fckeditor的。应该看到在列表的末尾新工具栏项目。