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;
  };
目录
相关文章
|
3月前
|
JavaScript 开发工具 C++
探索 Visual Studio Code:开发者的多功能编辑器
Visual Studio Code(VS Code)是由微软开发的一款免费、开源的轻量级代码编辑器,支持 Windows、Linux 和 macOS。它内置了对多种编程语言的支持,并提供了代码高亮、智能补全、调试和 Git 集成等功能。VS Code 的强大之处还在于其丰富的插件生态系统,通过安装插件可以进一步扩展功能。此外,用户还可以通过定制设置来自定义编辑器的行为和外观,从而提升开发效率。本文将详细介绍 VS Code 的核心特性、推荐插件及定制化设置方法。
|
2月前
|
前端开发 开发者
大模型代码能力体验报告之贪吃蛇小游戏《二》:OpenAI-Canvas-4o篇 - 功能简洁的文本编辑器加一点提示词语法糖功能
ChatGPT 的Canvas是一款简洁的代码辅助工具,提供快速复制、版本管理、选取提问、实时编辑、代码审查、代码转写、修复错误、添加日志和注释等功能。相较于 Claude,Canvas 更加简单易用,但缺少预览功能,适合一般开发者使用。
|
4月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
|
4月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
|
6月前
|
UED
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
|
7月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
7月前
|
Linux iOS开发 MacOS
Star 10.4k!推荐一款国产跨平台、轻量级的文本编辑器,内置代码对比功能
Star 10.4k!推荐一款国产跨平台、轻量级的文本编辑器,内置代码对比功能
111 0
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
257 0
|
5月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
6月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
73 5