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

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

2、下载好后,添加在ckeditor下载plugin文件夹下,新建一个lineheight文件夹,如下图:
在这里插入图片描述

3、在config中添加

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

在这里插入图片描述
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

至此,配置结束

效果:这里加了一个行距功能
在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值