ckeditor富文本编辑器使用行间距插件lineheight扩充，改变行距

野性酷女 2023-01-13 05:44 350阅读 0赞

1、首先需要下载一个lineheight包，网上很多资源都需要花钱或者花积分下载  
找到ckeditor官网，在以下链接中直接下载即可  
[https://ckeditor.com/cke4/addon/lineheight][https_ckeditor.com_cke4_addon_lineheight]

2、下载好后，添加在ckeditor下载plugin文件夹下，新建一个lineheight文件夹，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]

3、在config中添加

config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');
      config.allowedContent = true; //加这个是为了不让span标签被ckeditor过滤掉

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]  
4、找到lineheight文件夹下的plugin.js文件，  
修改的最终结果：

( function() { 
      function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition, order ) { 
        var config = editor.config,style = new CKEDITOR.style( styleDefinition );		
        var names = entries.split( ';' ),values = [];		
        var styles = { };
        for ( var i = 0; i < names.length; i++ ) { 
          var parts = names[ i ];
          if ( parts ) { 
            parts = parts.split( '/' );
            var vars = { },name = names[ i ] = parts[ 0 ];
            vars[ styleType ] = values[ i ] = parts[ 1 ] || name;
            styles[ name ] = new CKEDITOR.style( styleDefinition, vars );
            styles[ name ]._.definition.name = name;
          } else
            names.splice( i--, 1 );
        }
        editor.ui.addRichCombo( comboName, { 
          label: editor.lang.lineheight.title,
          title: editor.lang.lineheight.title,
          toolbar: 'styles,' + order,
          allowedContent: style,
          requiredContent: style,
          panel: { 
            css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
            multiSelect: false,
            attributes: {  'aria-label': editor.lang.lineheight.title }
          },
          init: function() { 
            this.startGroup(editor.lang.lineheight.title);
            for ( var i = 0; i < names.length; i++ ) { 
              var name = names[ i ];					
              this.add( name, styles[ name ].buildPreview(), name );
            }
          },
          onClick: function( value ) { 
            editor.focus();
            editor.fire( 'saveSnapshot' );
            var style = styles[ value ];
            editor[ this.getValue() == value ? 'removeStyle' : 'applyStyle' ]( style );
            editor.fire( 'saveSnapshot' );
          },
          onRender: function() { 
            editor.on( 'selectionChange', function( ev ) { 
              var currentValue = this.getValue();
              var elementPath = ev.data.path,elements = elementPath.elements;
              for ( var i = 0, element; i < elements.length; i++ ) { 
                element = elements[ i ];
                for ( var value in styles ) { 
                  if ( styles[ value ].checkElementMatch( element, true, editor ) ) { 
                    if ( value != currentValue )
                      this.setValue( value );
                    return;
                  }
                }
              }
              this.setValue( '', defaultLabel );
            }, this );
          },
          refresh: function() { 
            if ( !editor.activeFilter.check( style ) )
              this.setState( CKEDITOR.TRISTATE_DISABLED );
          }
        } );
      }
      CKEDITOR.plugins.add( 'lineheight', { 
        requires: 'richcombo',
        lang: 'ar,de,en,es,fr,ko,pt',
        init: function( editor ) { 
          var config = editor.config;
          addCombo( editor, 'lineheight', 'size', editor.lang.lineheight.title, config.line_height, editor.lang.lineheight.title, config.lineHeight_style, 40 );
        }
      } );
    } )();
    CKEDITOR.config.line_height = '1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;21;22;23;24;25;26;27;28;29;30;31;32;33;34;35;36;37;38;39;40;41;42;43;44;45;46;47;48;49;50;51;52;53;54;55;56;57;58;59;60;61;62;63;64;65;66;67;68;69;70;71;72';
    CKEDITOR.config.lineHeight_style = { 
      element: 'span',
      styles: {  'line-height': '#(size)' },
      overrides: [ { 
        element: 'line-height', attributes: {  'size': null }
      } ]
    };

具体修改的点参考：[https://blog.csdn.net/weixin\_45390475/article/details/104718476][https_blog.csdn.net_weixin_45390475_article_details_104718476]

至此，配置结束

效果：这里加了一个行距功能  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]

[https_ckeditor.com_cke4_addon_lineheight]: https://ckeditor.com/cke4/addon/lineheight
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]: /images/20221022/f649702d33fb4569967f3337fea526b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]: /images/20221022/beebfbd6e13e4a198c1ee1a0297f8466.png
[https_blog.csdn.net_weixin_45390475_article_details_104718476]: https://blog.csdn.net/weixin_45390475/article/details/104718476
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]: /images/20221022/5019bedb67f04dadb9944b36a2e43076.png