ckeditor4.0以上使用行间距插件lineheight报错修改

①从百度上下载一个 ckeditor 行距包，解压放到ckeditor/plugins目录下。

②在config.js 中添加

config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');//行距③（转载）

config.allowedContent = true; //加这个是为了不让span标签被ckeditor过滤掉,如果加了的话就不需要再加

1. lineheight插件源码修改：

1.原先的插件依赖于ckeditor/plugins/sytles插件，而ckeditor4.0是没有这个插件，所以如果直接使用该插件，会报错：

Uncaught [CKEDITOR.resourceManager.load] Resource name "styles" was not found

因此，要修改插件中对styles的引用:

a.在lineheight目录下的plugin.js中：

将

CKEDITOR.plugins.add('lineheight',  {  lang: ['zh-cn'],  requires : [ 'richcombo', 'styles'],  init : function( editor )  .......

中的requires: ['rechcombo', 'styles'] 改为： requires: ['rechcombo']

2.改完后使用，仍然会报错：

Uncaught TypeError: Cannot read property 'editor' of undefined

定位代码，在lineheight/plugin.js中：

editor.ui.addRichCombo( comboName,
{label : lang.label,title: lang.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : editor.skin.editor.css.concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},  init : function(){  .......

报错地方： css : editor.skin.editor.css.concat( config.contentsCss )

这是最新的ckeditor获得css配置的方式与原先不同引起的，那么对应的改为：

css:  [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),

3.上述改动完成后就可以使用行距这个功能了，但是发现下拉框没有标题，但是lineheight/lang/zh-cn.js中配置了标题呀。。。原因是新的ckeditor调用标签的方式变了：

将/lineheight/plugin.js中下部分代码：

editor.ui.addRichCombo( comboName,{label : lang.label,title: lang.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},  init : function(){this.startGroup( 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.lineheight.panelTitle }},  init : function(){this.startGroup( lang.lineheight.panelTitle );

4.这样就完成了所有的配置了，当然如果想额外添加一些行距设置项，可以在/lineheight/plugin.js中添加，具体位置：

CKEDITOR.config.lineheight_sizes =                  'normal;1.5em;1.75em;2em;3em;4em;5em;100%;120%;130%;150%;170%;180%;190%;200%;220%;250%;300%;400%;500%';

看到这个配置，你就会发现，这只是这个行距插件的默认配置值，那么如果要添加一些行距元素的话，可以在ckeditor的config.js中添加：

CKEDITOR.config.lineheight_sizes = CKEDITOR.config.lineheight_sizes +   ’你添加的行距元素‘;

二、添加中文字体

打开CKeditor目录里的config.js，在

CKEDITOR.editorConfig = function( config )
{

};
里添加如下代码：

config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;

以后使用的时候就可以用中文字体了。(注意,保存这个js文件的时候必须utf8,不然字体显示会是乱码)

文章转载自http://www.it610.com/article/4654053.htm

怕以后设置的时候忘记,故做个记录,希望能帮助到网友

转载于:https://www.cnblogs.com/zhb7769/p/10722376.html

ckeditor4.0以上使用行间距插件lineheight报错修改相关推荐

ckeditor4.5以上使用行间距插件lineheight扩充
①从百度上下载一个 ckeditor 行距包,解压放到ckeditor/plugins目录下. ②在config.js 中添加 config.extraPlugins += (config.extra ...
但是如果你按照官网的说明进行输入：比如 [{0: 1, 1: 1}, {0: 1, 1: 5}, {0: 1, 1: 1}, {0: 1, 1: 1}]就会报错，经过实践，多分类希望给各个label不
但是如果你按照官网的说明进行输入:比如 [{0: 1, 1: 1}, {0: 1, 1: 5}, {0: 1, 1: 1}, {0: 1, 1: 1}]就会报错,经过实践,多分类希望给各个label不 ...
html导航怎么跟着往下滚动,javascript,html_导航要跟着鼠标滚动向下滚动，用了jquery插件但是报错，请问大牛是什么原因？，javascript,html - phpStudy...
导航要跟着鼠标滚动向下滚动,用了jquery插件但是报错,请问大牛是什么原因? 导航要跟着鼠标向下滚动,用了jquery插件但是报错,请问大牛是什么原因? 代码如下: 宝龙安信科技 logo宝龙安信 ...
IDEA翻译插件出现报错：更新 TKK 失败，请检查网络连接解决
背景 Google 翻译退出中国.Google发言人证实了这一点,该公司以"低使用率"为由,终止了中国大陆的Google翻译服务,该变化将影响Chrome浏览器以及KOReader ...
【vue2】vue2.0重复点击路由会报错
vue2.0重复点击路由会报错 router种index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home ...
python3.8安装插件locust报错error: Microsoft Visual C++ 14.0 is required. Get it with Microsoft Visual C++
报错如下: error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Too ...
SpringBoot 项目tomcat插件启动报错 java.lang.NoClassDefFoundError: javax/el/ELManager
问题描述: SpringBoot项目 tomcat插件启动出现下面的问题: ERROR 2021-04-07 08:42:03,129 org.springframework.boot.SpringA ...
【错误记录】发布 Flutter 插件包报错 ( ‘gmail.com‘ has insufficient permissions to upload new versions of package)
文章目录一.报错信息二.解决方案一.报错信息推送 Flutter 包到中央仓库 , 第一次推送报错 , D:\002_Project\002_Android_Learn\flutter_pac ...
【错误记录】发布 Flutter 插件包报错 ( Failed to upload the package.pub finished with exit code 1 )
文章目录一.报错信息二.解决方案一.报错信息发布插件包 , 确认发布 , 校验了 Google 账号 , 之后报错如下 : Failed to upload the package. pub ...

ckeditor4.0以上使用行间距插件lineheight报错修改

ckeditor4.0以上使用行间距插件lineheight报错修改相关推荐

最新文章

热门文章