快速做网站软件,简述jsp网站开发的环境配置,如何加强校园网站建设,做数据可视化的网站富文本编辑器CKEditor4简单使用-05#xff08;开发自定义插件入门#xff09; 1. CKEditor4插件入门1.1 关于CKEditor4插件的简单安装与使用1.2 参考 2. 开发自定义插件——当前时间插件2.1 创建插件文件目录结构2.2 编写插件原代码2.2.1 编写代码框架2.2.2 创建编辑器命令2.… 富文本编辑器CKEditor4简单使用-05开发自定义插件入门 1. CKEditor4插件入门1.1 关于CKEditor4插件的简单安装与使用1.2 参考 2. 开发自定义插件——当前时间插件2.1 创建插件文件目录结构2.2 编写插件原代码2.2.1 编写代码框架2.2.2 创建编辑器命令2.2.3 创建插件工具栏按钮2.2.3.1 简单说明2.2.3.2 关于命名 实现代码2.2.3.3 关于工具栏组中的位置 2.2.4 完整插件代码 2.3 启用自定义插件2.4 测试新插件看效果 1. CKEditor4插件入门
1.1 关于CKEditor4插件的简单安装与使用
可看下面的文章 富文本编辑器CKEditor4简单使用-02常用插件安装及使用.富文本编辑器CKEditor4简单使用-03图片上传、可拖拽可复制粘贴.
1.2 参考
参考官网例子如下 用 20 行代码创建 CKEditor 4 插件——Timestamp插件.
2. 开发自定义插件——当前时间插件
2.1 创建插件文件目录结构
在plugins目录下创建自定义插件文件夹 susutimestamp以及其目录结构如下 注意 对于 CKEditor 来说插件文件夹的名称很重要并且必须与插件的名称相同否则编辑器将无法识别它。注意文件目录结构按照上面的来
2.2 编写插件原代码
2.2.1 编写代码框架
简单说明 所有 CKEditor 4 插件都是使用 CKEDITOR.plugins.add() 方法创建的。此方法应包含插件名称 — susutimestamp 以及放置在初始化编辑器实例时调用的 init 函数中的插件逻辑。此外由于我们将定义一个工具栏按钮因此设置了 icons 该属性包括图标文件的名称重要提示匹配按钮名称小写。 框架代码如下CKEDITOR.plugins.add( susutimestamp, {icons: susutimestamp,init: function( editor ) {//Plugin logic goes here.}
});2.2.2 创建编辑器命令
简单说明 CKEditor 4 插件通常定义一个编辑器命令来执行与其关联的操作。该命令应在 init 函数内部定义以便在初始化 CKEditor 4 实例时创建。在本例中我们将使用 CKEDITOR.editor.addCommand() 方法来定义将当前日期和时间插入 CKEditor 4 insertMyTimestamp 的命令 实现代码如下
2.2.3 创建插件工具栏按钮
2.2.3.1 简单说明
简化的时间戳插件应该通过工具栏按钮工作。为此在函数 init 中 我们需要定义一个按钮该按钮将与我们定义的编辑器命令 insertMyTimestamp 关联。
2.2.3.2 关于命名 实现代码
如下图
2.2.3.3 关于工具栏组中的位置
请注意您可以通过提供可选索引来影响按钮在工具栏组中的位置例如// This could position the button at the beginning of the insert group.
toolbar: insert,0// This could position the button at the end of the insert group.
toolbar: insert,1002.2.4 完整插件代码 如下 CKEDITOR.plugins.add( susutimestamp, {icons: susutimestamp,init: function( editor ) {//Plugin logic goes here.// 1.创建编辑器命令editor.addCommand( insertMyTimestamp, {exec: function( editor ) {var now new Date();editor.insertHtml( 当前时间为: em now.toString() /em );}});// 2.创建插件工具栏按钮editor.ui.addButton( susutimestamp, {label: myTimestamp,command: insertMyTimestamp,toolbar: insert});}
});2.3 启用自定义插件
如下config.extraPlugins susutimestamp;2.4 测试新插件看效果
如下
