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

简介: 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;
  };
目录
相关文章
|
1月前
|
开发框架 JavaScript 前端开发
百度富文本编辑器配置(vue3)
百度富文本编辑器配置(vue3)
|
1月前
|
Ubuntu Linux
百度搜索:蓝易云【Linux设置默认编辑器(qbit)】
现在,你已经成功将默认编辑器设置为qbit。在终端中输入 `editor`命令或打开文本文件时,系统将使用qbit作为默认编辑器来打开文件。请注意,`update-alternatives`命令还可以用于设置其他默认应用程序。
89 3
|
3天前
|
UED
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
|
2天前
|
数据采集 JavaScript 前端开发
详尽分享网站网页中加入各种分享按钮功能百度分享
详尽分享网站网页中加入各种分享按钮功能百度分享
|
1月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
1月前
|
人工智能 编解码 数据安全/隐私保护
才发现百度自带的AI图片助手这么好用,去水印、画质优化、AI扩图、涂抹消除等功能一应俱全!
才发现百度自带的AI图片助手这么好用,去水印、画质优化、AI扩图、涂抹消除等功能一应俱全!
371 0
|
1月前
|
Linux iOS开发 MacOS
Star 10.4k!推荐一款国产跨平台、轻量级的文本编辑器,内置代码对比功能
Star 10.4k!推荐一款国产跨平台、轻量级的文本编辑器,内置代码对比功能
|
1月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
88 0
|
1月前
|
开发工具
百度搜索:蓝易云【使用vim编辑器,进行保存时报错:E382: Cannot write, ‘buftype‘ option is set详解。】
请注意,'buftype'选项的设置通常是由于某些插件或配置文件导致的。如果您在Vim的配置文件(如.vimrc)或使用的插件中设置了'buftype'选项,请检查相关配置并确保设置正确。
55 0
|
1月前
|
关系型数据库 MySQL Shell
百度搜索:蓝易云【Shell脚本实现Mysql持续kill功能】
将以上代码保存为一个名为 `kill_mysql.sh`的文件,并确保该文件具有执行权限(可以使用 `chmod +x kill_mysql.sh`命令赋予执行权限)。然后在终端中运行该脚本即可实现MySQL的持续kill功能。
55 0