百度富文本自定义 命令

百度富文本虽然是一款功能强大的富文本编辑器,但是在工作中往往会遇到更多想象不到的问题,那么就需要我们扩展百度富文本的功能,分享一下如何扩展百度富文本。

以做过的替换表头为例:

首先,找到ueditor.all.js ,添加一下代码:此代码功能是 将table 表头 替换为'

'

/**
 * 一键替换表头
 * @command replacetable    
 * @method execCommand
 * @param { String } cmd 命令字符串
 * @example
 */
UE.commands['replacetable'] = {
  execCommand: function (cmdName) {
    var me = this;
    var content = me.getContent();
    var reg = /])*>/g;
    var tableTemp = '
'; var replace = content.replace(reg, tableTemp); me.setContent(replace); } };

第二步将 该命令添加到命令行工具中

找到 ueditor.config.js   ----》 toolbars  【//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义】  ----》 将第一步定义好的命令名称【replacetable】添加进去  

百度富文本自定义 命令_第1张图片

添加提示功能

/当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
        labelMap:{
            'replacetable':'一键替换表头'
        },
新功能图标:百度富文本有默认的主题,如果新增加的功能不设置图标则默认为第一个B加粗的图标

百度富文本自定义 命令_第2张图片

可在 themes  ----> default- ----> css---->ueditor.css 增加更改图标。【新增功能会有一个主类 edui-for-replacetable】以区别其他的功能按钮

你可能感兴趣的:(HTML,CSS)