字间距功能需要自定义功能及操作
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; };