ueditor百度編輯器增加行間距與字間距工具按鈕

一、行間距

百度編輯器自帶行間距工具，在toolbars里面加上'lineheight'即可

二、字間距

字間距工具需要自定義，修改的文件有點多

1、UE\lang\zh-cn\zh-cn.js在labelMap里面加上

'letterspacing':'字間距'

UE\lang\en\en.js在labelMap里面加上'lineheight':'LineHeight'

 

 

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

 

 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;
    };