CKeditor插件之行间距顺带加中文字体显示

用了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;
以后使用的时候就可以用中文字体了。

效果图