CKeditor插件之行间距顺带加中文字体显示
来源:互联网 发布:网络歌手排行榜 编辑:程序博客网 时间:2024/05/21 18:39
用了ckeditor之后发现行间距太大了,就萌发了怎样修改行间距的想法。
网上搜罗了下。
第一种:另辟蹊径偷换概念简单型。---原作地址http://www.cnblogs.com/thinksasa/archive/2013/01/10/2855234.html
用ckeditor做的编辑器,但是在编辑文章的时候,发现按照常规方法按enter键换行时,两行之间的距离太大。
点击“源码”查看时,发现按enter键换行竟然采用的是加<p></p>标签的形式,而不是加<br />标签的形式。
查阅资料后,才知道ckeditor默认的换行是:enter->加<p></p>,shift+enter->加<br />。
如果想改成直接按enter键就加<br />的形式,可以在配置文件里加:
config.js
config.enterMode = CKEDITOR.ENTER_BR;config.shiftEnterMode = CKEDITOR.ENTER_P;就反过来了。
第二种:墨守成规复杂全面型。
具体做法是添加插件:
在目录“\ckeditor\plugins”下添加插件目录“lineheight”,目录“\ckeditor\plugins\lineheight”下的文件截图如下
然后需要对\ckeditor\config.js文件进行修改,即添加行距插件:
config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');
不要忘记ckeditor的工具栏也要添加哦
config.toolbar = 'Customer';
config.toolbar_Customer =
[
['Font','FontSize'],
['TextColor','BGColor'],
['Image','Smiley'],
//新增行间距插件
['lineheight'],
['Maximize']
];
这样还不行。需要修改下插件才能用到最新的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中添加:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
CKEDITOR.config.lineheight_sizes = CKEDITOR.config.lineheight_sizes + ’你添加的行距元素‘;
二、添加中文字体
打开CKeditor目录里的config.js,在
CKEDITOR.editorConfig = function( config )
{
};
里添加如下代码:
config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
以后使用的时候就可以用中文字体了。
效果图
- CKeditor插件之行间距顺带加中文字体显示
- 安装CKEditor插件并添加中文字体选择
- VS2012 插件之CKEditor
- Rails插件之ckeditor
- CKeditor加入中文字体
- CKeditor加入中文字体 转
- CKeditor加入中文字体
- dedecms自带CKEditor编辑添加行间距按钮
- CKeditor加入中文字体 转
- 在ckeditor添加中文字体选择
- uilable换行显示,设置行间距
- 拜个早年---顺带加一些杂感
- 关于CKEditor中HorizontalRule插件不显示的问题
- ckeditor增加行距功能和中文字体
- ios之改变label的行间距
- XZ_iOS之设置label的行间距
- iOS之label行间距的缩进
- TextView属性之行间距设置
- hdu 2034 人见人爱A-B
- java泛型-类型擦除
- java及andriod studio安装小结
- 重邮第八届ACM大赛-预赛题解报告
- redis初体验---php5.6在win10中的wamp环境下安装redis拓展
- CKeditor插件之行间距顺带加中文字体显示
- xor与base64结合的加密解密函数
- 04:公共子序列
- ConstantTimeGaussianBlur 学习笔记<高斯模糊>
- Task_struct结构体
- cc编译命令选项
- Vue2.0+ElementUi封装table组件实现分页功能
- diff 命令
- 【无GPU】windows10+VS2013+caffe安装【python接口】