百度富文本自定义 命令

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/A_one2010/article/details/81129224

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

以做过的替换表头为例：

首先，找到ueditor.all.js ,添加一下代码：此代码功能是 将table 表头 <table    ...... > 替换为'<table border="1" cellpadding="0" cellspacing="0" style="width:100%;border-collapse: collapse;">'

/**
 * 一键替换表头
 * @command replacetable    
 * @method execCommand
 * @param { String } cmd 命令字符串
 * @example
 */
UE.commands['replacetable'] = {
  execCommand: function (cmdName) {
    var me = this;
    var content = me.getContent();
    var reg = /<table("[^"]*"|'[^']*'|[^'">])*>/g;
    var tableTemp = '<table border="1" cellpadding="0" cellspacing="0" style="width:100%;border-collapse: collapse;">';
    var replace = content.replace(reg, tableTemp);
    me.setContent(replace);
  }
};

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

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

添加提示功能

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

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