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

桃扇骨 2021-09-12 05:32 385阅读 0赞

用了ckeditor之后发现行间距太大了，就萌发了怎样修改行间距的想法。

网上搜罗了下。

第一种：另辟蹊径偷换概念简单型。---原作地址http://www.cnblogs.com/thinksasa/archive/2013/01/10/2855234.html

用ckeditor做的编辑器，但是在编辑文章的时候，发现按照常规方法按enter键换行时，两行之间的距离太大。

点击“源码”查看时，发现按enter键换行竟然采用的是加标签的形式，而不是加 标签的形式。

查阅资料后，才知道ckeditor默认的换行是：enter->加，shift+enter->加 。 
 
　  　如果想改成直接按enter键就加 的形式，可以在配置文件里加：

config.js

config.enterMode = CKEDITOR.ENTER\_BR;config.shiftEnterMode = CKEDITOR.ENTER\_P;就反过来了。

第二种：墨守成规复杂全面型。

具体做法是添加插件：

在目录“\\ckeditor\\plugins”下添加插件目录“lineheight”，目录“\\ckeditor\\plugins\\lineheight”下的文件截图如下

![Image 1][]![Center][]

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

效果图

![Center 1][]

![Center 2][]

[Image 1]: 
[Center]: /images/20210720/bae7fef5530b43d5b9069bf60b85b0f5.png
[Center 1]: /images/20210720/813170ef131a4cf2abe7b301a237ab81.png
[Center 2]: /images/20210720/c4346e4b62d54ce8b6488cfada61968e.png