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

怕以后設置的時候忘記,故做個記錄,希望能幫助到網友