ckeditor添加行距功能

来自于lukbob的未知神秘力量

今天在自己中秋刚写的这个小破站上添加文章时,用到了喜闻乐见的ckeditor编辑器。在预览的时候发现文章行距出了一些问题,看着很不爽,但是到编辑器一找,没有这个功能,于是就开始了“找行距”之行,在ckeditor官网上找到了lineheight这个行距包,下载后将其解压放在项目的ckeditor/plugins目录下。接下来就得使用这个包啦。

添加前

添加后

在config.js中添加这样一条语句

原先的插件依赖于ckeditor/plugins/sytles插件,而ckeditor4.0是没有这个插件,所以如果直接使用该插件,导致ckeditor渲染不了,因此,要修改插件中对styles的引用,所以在lineheight目录下的plugin.js中:将这个styles引用删除

修改之后

改完之后还是显示不了,于是在网上找了各种资料,终于知道这是ckeditor取得css配置的方式和上一步修改前的不一样而引起的,所以在lineheight/plugin.js中将

editor.ui.addRichCombo( comboName,{label : lang.lineheight.label,title: lang.lineheight.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'), panel :

{css : editor.skin.editor.css.concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},

修改为:

editor.ui.addRichCombo( comboName,{label : lang.lineheight.label,title: lang.lineheight.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'), panel :

{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},

最后,要注意修改ckeditor调用标签的方式修改:

editor.ui.addRichCombo( comboName,{label : lang.lineheight.label,title: lang.lineheight.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'), panel :

{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},

当然,也可以在原有的基础上多添一些行距的设置项,具体修改为:

CKEDITOR.config.lineheight_sizes = 'normal;1.5em;1.75em;2em;3em;4em;5em;100%;120%;';

第一次写这么正式的文章,内心有点小激动哇,非常感谢在网上有这么多的大神的帮助,自己也会加倍努力,早日成为帮助别人的男人,今天就到这了,以后还会持续记录自己遇到的问题和开发中的感受。

PS:本渣的小站刚写完,有很多很多地方需要修改和完善,希望能够得到大家的指导和意见,也希望多多互换友链哇,一切事宜都请联系:lukboboo@gmail.com,跪谢,跪谢!!