ueditor1.5 百度富文本 编辑器增加字间距功能及按钮

字间距功能需要自定义功能及操作

1.ueditor\lang\zh-cn\zh-cn.js搜索并在 ‘edittip’ :‘编辑提示’ 前加上

'letterspacing':'字间距',

2.ueditor\lang\en\en.js搜索并在 ‘edittip’:‘EditTip’ 前加上

'letterspacing':'letterspacing',

3. ueditor\ueditor.config.js内搜索并在"lineheight"后面增加

 "letterspacing",

4.ueditor\themes\default_css\buttonicon.css内添加（任意位置均可）

.edui-default  .edui-for-letterspacing .edui-button-body .edui-icon {
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234A4A51' fill-rule='evenodd'%3E%3Cg transform='rotate(90 7 10.5)'%3E%3Crect width='14' height='1.5' rx='.2'/%3E%3Crect transform='rotate(22 6.686 9.027)' x='1.946' y='8.277' width='9.479' height='1.5' rx='.2'/%3E%3Crect transform='rotate(-22 6.626 5.497)' x='1.951' y='4.747' width='9.35' height='1.5' rx='.2'/%3E%3Crect y='13' width='14' height='1.5' rx='.2'/%3E%3C/g%3E%3Cpath d='M8 10h5v1H8z'/%3E%3C/g%3E%3C/svg%3E");/*字间距图标*/
    width: 20px;
    height: 20px;
}

5.在ueditor_src\plugins文件夹下新建“letterspacing.js”文件，内容如下

/**
 * 设置字间距
 * @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, "");
            }
        }
    };
};

6.ueditor_examples\editor_api.js内搜索并在 ‘plugins/lineheight.js’, 后面增加

  'plugins/letterspacing.js',

7.ueditor_src\adapter\editorui.js内搜索并在"deleterow"新加

"letterspacing",

8.ueditor_src\adapter\editorui.js内搜索并在var rowspacings = [“top”, “bottom”];新加

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

有问题及不足的地方大家可以评论区讨论