ckeditor增加行距功能和中文字体

一、添加行距：

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

②在config.js 中添加   

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

1. lineheight插件源码修改：

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

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

 

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

 

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

                    

         将

                

[javascript] view plaincopy

1. CKEDITOR.plugins.add('lineheight',  
2.                    {  
3.                        lang: ['zh-cn'],  
4.   
5.   
6.                        requires : [ 'richcombo', 'styles'],  
7.   
8.   
9.   
10.                       init : function( editor )  
11.   
12.                               .......  



                



 

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

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

            Uncaught TypeError: Cannot read property 'editor' of undefined

 

 

 

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

                     

                          

[javascript] view plaincopy

1. editor.ui.addRichCombo( comboName,  
2. {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 }},  
3.   
4. init : function(){  
5.   
6.                            .......  
7.    





                           .......

 

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

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

                 

                

[javascript] view plaincopy

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

 

 

 

 

 

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

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

           

[javascript] view plaincopy

1. 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 }},  
2.   
3. init : function(){this.startGroup( lang.panelTitle );  

 

              改为：

              

[javascript] view plaincopy

1. 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 }},  
2.   
3. init : function(){this.startGroup( lang.lineheight.panelTitle );  

 

 

 

 

 

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

                    

                

 

[javascript] view plaincopy

1. 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

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

 

 

 

二、添加中文字体

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

CKEDITOR.editorConfig = function( config )
{

};
里添加如下代码：

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

以后使用的时候就可以用中文字体了。

             

                                             如想了解更多技术架构文章，扫码关注公众号以及转发分享