首页 > 技术 > kindeditor 添加 inline code 标签

kindeditor 添加 inline code 标签

2022年1月12日 发表评论 阅读评论

kindeditor是很受欢迎的一款在线HTML编辑器,所见即所得,不过已经很久没更新过了,有些新的标签就用不到了,一些不常用的标签比如<code>也不能插入,使用起来不太方便了,即使有<pre>,但这个是块级元素,行内的高亮显示就需要<code>了。下面教大家如何修改kindeditor加入这个标签。

首先找到kindeditor核心文件kindeditor.js

1、在大约第263行,在k.optionsitems数组中你喜欢的地方添加一项 codetag,如下图

2、接着是事件的处理,发现和加粗这个功能差不多,于是找到加粗的处理,在大约3143行有一段:

复制一份,将其修改为:

然后放到后面

3、绑定事件。在大约5879行,有加粗的事件绑定,在其中加上codetag即可

4、这样基本就完成了,但是编辑器工具栏还不会显示这个按钮,因为还没有对应的图片,修改themes/default/default.png,在最后加入小图标,然后修改themes/default/default.css,加入一段样式:

可以修改为你喜欢的样式,别忘记了,这个只是编辑器内部的样式,前台也要写一样的样式。

5、然后是标签的样式,在kindeditor.js大约3602行,有定义编辑框中的样式,加入一行:

可以修改为你喜欢的样式,别忘记了,这个只是编辑器内部的样式,前台也要写一样的样式。

6、在大约312行的地方还需要添加一项code,以免切换回可视化模式时被编辑器过滤掉这个标签

7、 在lang/zh-CN.js中41行添加

分类: 技术 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.