百度编辑器UEditor增加字间距工具按钮

百度编辑器工具栏中没有字间距工具，在编辑富文本的时候可能会用到字间距设置，这里我们来扩展一个字间距工具。

使用的百度编辑器UEditor版本为ueditor-1.4.3.3

修改语言包

中文

文件ueditor/lang/zh-cn/zh-cn.js在labelMap里面添加'letterspacing':'字间距',

1	'lineheight':'行间距','letterspacing':'字间距','edittip' :'编辑提示','customstyle':'自定义标题', 'autotypeset':'自动排版',

英文

文件ueditor/lang/en/en.js在labelMap里面添加'letterspacing':'LineHeight',

1	'lineheight':'LineHeight','letterspacing':'LetterSpacing','edittip':'EditTip','customstyle':'CustomStyle', 'scrawl':'Scrawl', 'autotypeset':'AutoTypeset',

工具栏添加字间距按钮

文件ueditor/ueditor.config.js里面toolbars时增加letterspacing

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
, toolbars: [[
    'fullscreen', 'source', '|', 'undo', 'redo', '|',
    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
    'rowspacingtop', 'rowspacingbottom', 'lineheight', 'letterspacing','|',
    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
    'directionalityltr', 'directionalityrtl', 'indent', '|',
    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
    'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
    'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
    'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
    'print', 'preview', 'searchreplace', 'drafts', 'help'
]]

添加样式

不含有ueditor.all.js

文件ueditor/themes/default/_css/buttonicon.css里面加上图标，因为有下拉框而且是自定义图标，不能单纯的修改.edui-default .edui-for-letterspacing .edui-icon，中间要加上.edui-button-body

.edui-default  .edui-for-lineheight .edui-icon {
    background-position: -725px -40px;
}
/**
 * 字间距样式
 */
.edui-default .edui-for-letterspacing .edui-button-body .edui-icon {
    background: url(../images/letterspacing.png) center no-repeat;
    background-size: 100%;
}

含有ueditor.all.js

文件ueditor/themes/default/css/ueditor.css里面添加如上代码

tip: letterspacing.png图片自行找一个吧

添加plugins

不含有ueditor.all.js

在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, "");
            }
        }
    };
};

然后在文件ueditor/_examples/editor_api.js里面加入letterspacingplugins路径

1
2
3

'plugins/lineheight.js',
'plugins/letterspacing.js',
'plugins/insertcode.js',

含有ueditor.all.js

在ueditor/ueditor.all.js里面添加如上代码

ui跟编辑器的适配层

不含有ueditor.all.js

在ueditor/_src/adapter/editorui.js文件里面editorui.lineheight方法后添加editorui.letterspacing方法

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.all.js

在ueditor/ueditor.all.js里面添加如上代码

tip:如果按钮有处理展示下拉框，无需在当前文件中btnCmds上添加按钮标识letterspacing