CKEditor自定义功能开发

2019年4月28日20:19:45 评论 693

CKEditor是一个非常受欢迎的富文本编辑器,问世至今走了十年,依然还是市场老大,经得起时间考验就是好程序。因为经常写一些技术博文,可能有些地方需要插入code标签,而默认Ckeditor不具备插入code标签功能,但它提供的拓展灵活程度让我感觉这就是那么容易。本文介绍给CKEditor添加一个插入code标签插件的实现方式。

一、下载程序,解压

下载地址:http://ckeditor.com/

如果你没有下载错的话,解压后的目录应该跟截图一致。

二、创建插件目录

截图画红线的目录plugins就是CKEditor插件目录,所有的插件都集合在里边,在里边创建一个code目录,作为插入code标签功能的插件目录。

三、编写插件程序

CKEditor插件的规则是在插件目录下创建一个plugin.js文件作为插件主程序处理文件,如果是复杂的插件可能会有N个js文件。

因为插入code标签这个功能非常简单,所以一个plugin.js就能搞定。

代码:

四、制作按钮图标

图标文件名与路径要对应你在plugin.js中设置好的,因为我在plugin.js中定义的图标位置是在images目录下的code.gif图标,所以把code.gif图片放到插件目录的images目录下。

五、修改config.js配置文件

打开config.js,打开config.js,添加一句

最终config.js代码如下:

六、测试,看可以了不

使用浏览器打开创建的HTML页面

OK拉,按钮出来了。

七、添加点击事件

打开之前创建plugin.js文件,添加click事件,最终代码如下:

"; editor.insertHtml(insertHtml); } else { // 取消code标签 editor.insertText(selectText); } } } }); } });[/crayon]
重新运行浏览器,随便输入一行字,选中几个,点击code按钮,亲,这下可以了吧!

八、code标签样式

虽然,按钮功能可以用了,但还有点郁闷,就是code标签的文本跟其它标签的文本看起来没差别,看不出来哪些已经添加code标签。

我们给code标签添加几个样式,让它与众不同。打开ckeditor目录下的contents.css

在结尾处添加code样式

保存,重新运行看下效果!

如果需要取消code标签的文字只需要选择已被添加code标签的文字,再点击code按钮就好!

本文已通过「原本」原创作品认证,未经作者授权请勿直接转载,负责将依法追究其法律责任。
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: