版权声明:本文为博主原创文章,未经博主允许不得转载。 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】以区别其他的功能按钮