ckeditor4.5以上使用行间距插件lineheight扩充
①从百度上下载一个 ckeditor 行距包,解压放到ckeditor/plugins目录下。
②在config.js 中添加
config.extraPlugins += (config.extraPlugins ? ‘,lineheight’ : ‘lineheight’);//行距③(转载)
config.allowedContent = true; //加这个是为了不让span标签被ckeditor过滤掉,如果加了的话就不需要再加
- 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 + ’你添加的行距元素‘;
文章转载自https://www.cnblogs.com/zhb7769/p/10722376.html
怕以后设置的时候忘记,故做个记录,希望能帮助到网友
ckeditor4.5以上使用行间距插件lineheight扩充相关推荐
- ckeditor4.0以上使用行间距插件lineheight报错修改
①从百度上下载一个 ckeditor 行距包,解压放到ckeditor/plugins目录下. ②在config.js 中添加 config.extraPlugins += (config.extra ...
- ckeditor富文本编辑器使用行间距插件lineheight扩充,改变行距
1.首先需要下载一个lineheight包,网上很多资源都需要花钱或者花积分下载 找到ckeditor官网,在以下链接中直接下载即可 https://ckeditor.com/cke4/addon/l ...
- 精心挑选12款优秀的 JavaScript 日历和时间选择插件
今天这篇文章向大家分享12款精心挑选的优秀 JavaScript 日历和时间选择插件,都带有详细的使用教程和效果演示.这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果.同时推 ...
- eclipse 插件开发过程中遇到的一堆问题(急待解决)
最近一段时间都在做eclipse插件开发,结果发现自己n多东西不懂,郁闷的紧.感觉脑子有点乱,所以就来写一下,整理一下问题. 1,插件开发体系结构,理解OSGI框架的工作原理以及如何去运用它 2,ec ...
- CKEditor代码高亮显示插件Code Snippet安装及使用方法
CKEditor网页编辑器 CKEditor 即 FCKEDITOR .FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器.支持 ...
- css: line-height 与box-sizing
css 1.line-hight: 行高line-height,是文本行基线这件的距离,不是字体大小,它确定了各个元素框的高度增加或减少多少. 对于块级元素:定义了元素中文本基线之间的最小距离. li ...
- CKEditor4.4.5 插入高度代码及上传图片
1.首先准备所需要的插件 (1). CKEditor4.4.5 下载地址:http://ckeditor.com/download.如果不想下载直接引用CKEditor的CDN也是可以的.cdn地址 ...
- [置顶] 编写自己的JQUERY插件
如何编写自己的jquery插件 Jquery的插件主要分为三类: 1.封装对象方法的插件:大部分插件都是封装对象的插件 2.封装全局函数的插件:将独立的函数添加到jquery的命名空间之下.Jquer ...
- 推荐几个Sublime插件
01. Package Control 通俗易懂地说,这个是你在完成安装SublimeText后必须安装的东西.你问为什么?因为有了这个特殊的"插件包",你可以很容 ...
最新文章
- pandas删除dataframe中行内容全是0的数据行(remove rows with all zeros in dataframe)
- pip安装mysql-python失败,并显示EnvironmentError:找不到mysql_config
- 赠书:亿级流量峰值没在怕,“缓存”技术来减压!
- Extjs学习笔记--(五,事件)
- python读取txt文件乱码-python文件乱码
- 求正负数交互序列的和的MFC版
- pandas 笔记:合并操作
- 蓝桥杯练习系统习题-算法训练2
- UNITY编辑器模式下static变量的坑
- 【微信小程序】wx:for
- 在C++中使用Protocol Buffers
- python异常值处理实例_利用Python进行异常值分析实例代码
- mips linux gcc mingw,gcc
- Java为何大行其道
- x265源码流程分析
- STM32L051低功耗STOP模式下RTC唤醒
- 微信小程序订阅消息报错,by user TAP gesture (适用于tabBar页面)
- 四、SolrCloud的安装
- 5-3中央处理器-数据通路的功能和基本结构
- 睡眠的一场革命!-读《睡眠革命》笔记(中)