在默认的UEditor中,是不能添加code
标签的,而作为一名程序员,文章中经常会有代码段和代码字符。代码段可以使用pre
标签,但代码字符使用pre
就太不方便了,而且现在很多的CSS框架中都对code
标签有了默认的样式定义,所以决定在UEditor中加入一个新的按钮,来给选中文字添加code
标签。
首先编辑器肯定是UEditor了,我选择的是编译好的版本而非源码,因为UEditor现在基本完善了,改动也不大了,所以这样改起来方便。
需要修改的文件分别是ueditor.all.js
和themes\default\css\ueditor.css
,另外需要一张code图标,你可以网上寻找,挑选自己喜欢的。
在ueditor.all.js
中,我们注册一个按钮:
1 | UE.registerUI('code', function(editor, uiName) { |
上面的代码可以参考官方文档,基本需要改的就是标签名字、标题和onclick
事件调用的命令。
之后我们添加code
命令,因为code
命令和加粗b
和斜体i
是类似的功能,所以我们在加粗和斜体的地方添加code
命令。
你可以通过搜索bold
、italic
或subscript
等来找到下面的代码:
1 | var basestyles = { |
这样我们就完成了添加一个按钮的功能,不过现在按钮显示的图标还是默认样式的,我们需要定义自己的图标,添加下面的代码到css
文件:
1 | .edui-for-code .edui-box.edui-icon.edui-default { |
并将url中的图片地址改为你的code
图片地址,建议保存在images
目录下。
完成以上步骤,我们就完成了添加code
按钮的功能,接下来只需要压缩js
和css
文件即可,你可以选择自己喜欢的工具进行压缩,并覆盖同目录下的min.js
和min.css
后缀的文件。