ueditor百度编辑器增加行间距与字间距工具按钮

一、行间距

百度编辑器自带行间距工具，在toolbars里面加上'lineheight'即可

二、字间距

字间距工具需要自定义，修改的文件有点多

1、UElangzh-cnzh-cn.js在labelMap里面加上

'letterspacing':'字间距'

UElangenen.js在labelMap里面加上'lineheight':'LineHeight'

ueditor百度编辑器增加行间距与字间距工具按钮

2、ueditor.config.js里面toolbars时增加letterspacing

ueditor百度编辑器增加行间距与字间距工具按钮

3、ueditro.css里面加上图标，因为有下拉框而且是自定义图标，不能单纯的修改.edui-default .edui-for-letterspacing .edui-icon，中间要加上.edui-button-body

.edui-default  .edui-for-letterspacing .edui-button-body .edui-icon {
    background: url(../images/editor_localization.png) center no-repeat;
    background-size: 100%; 
}

4、ueditor.all.js里面修改三处

（1）UE.plugins里面加上['letterspacing']方法

/**
   * 设置字间距
   * @file
   * @since 1.2.6.1
   */
  UE.plugins['letterspacing'] = function () {
    var me = this;
    me.setOpt({ 'letterspacing': ['0', '0.25', '0.5', '1', '1.5', '2', '2.5', '3', '4', '5'] });

    /**
     * 字间距
     * @command letterspacing
     * @method execCommand
     * @param { String } cmdName 命令字符串
     * @param { String } value 传入的行高值， 该值是当前字体的倍数， 例如： 1.5, 2.5
     * @example
     * ```javascript
     * editor.execCommand( 'letterspacing', 1.5);
     * ```
     */
    /**
     * 查询当前选区内容的行高大小
     * @command letterspacing
     * @method queryCommandValue
     * @param { String } cmd 命令字符串
     * @return { String } 返回当前行高大小
     * @example
     * ```javascript
     * editor.queryCommandValue( 'letterspacing' );
     * ```
     */

    me.commands['letterspacing'] = {
      execCommand: function (cmdName, value) {
        this.execCommand('paragraph', 'p', { style: 'letter-spacing:' + (value == "1" ? "normal" : value + 'em') });
        return true;
      },
      queryCommandValue: function () {
        var pN = domUtils.filterNodeList(this.selection.getStartElementPath(), function (node) { return domUtils.isBlockElm(node) });
        if (pN) {
          var value = domUtils.getComputedStyle(pN, 'letter-spacing');
          return value == 'normal' ? 1 : value.replace(/[^d.]*/ig, "");
        }
      }
    };
  };

（2）btnCmds里面加上'letterspacing'

（3）ui/splitbutton.js部分添加方法，展示下拉框

editorui.letterspacing = function (editor) {
      var val = editor.options.letterspacing || [];
      if (!val.length) return;
      for (var i = 0, ci, items = []; ci = val[i++];) {
        items.push({
          //todo:写死了
          label: ci,
          value: ci,
          theme: editor.options.theme,
          onclick: function () {
            editor.execCommand("letterspacing", this.value);
          }
        })
      }
      var ui = new editorui.MenuButton({
        editor: editor,
        className: 'edui-for-letterspacing',
        title: editor.options.labelMap['letterspacing'] || editor.getLang("labelMap.letterspacing") || '',
        items: items,
        onbuttonclick: function () {
          var value = editor.queryCommandValue('LetterSpacing') || this.value;
          editor.execCommand("LetterSpacing", value);
        }
      });
      editorui.buttons['letterspacing'] = ui;
      editor.addListener('selectionchange', function () {
        var state = editor.queryCommandState('LetterSpacing');
        if (state == -1) {
          ui.setDisabled(true);
        } else {
          ui.setDisabled(false);
          var value = editor.queryCommandValue('LetterSpacing');
          value && ui.setValue((value + '').replace(/cm/, ''));
          ui.setChecked(state)
        }
      });
      return ui;
    };

ueditor百度编辑器增加行间距与字间距工具按钮

相关推荐