百度Ueditor编辑器
百度的Ueditor编辑器出于安全性考虑,用户在html模式下粘贴进去的html文档会自动被去除样式和转义。虽然安全的,但是非常不方便。
1. ueditor.config.js 做出如下修改即可:
xssFilterRules: false ,// xss 过滤是否开启,inserthtml等操作
inputXssFilter: false ,//input xss过滤
outputXssFilter: false,//output xss过滤
自定义按钮、图标、事件
ueditor.config.js
//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
toolbars :[['help','camnpr']]
//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
labelMap :{'anchor':'', 'undo':'','camnpr':'郑州网建']
ueditor.all.js
//自己写的ui也要在这里配置,放到baidu.editor.ui下边,当编辑器实例化的时候会根据ueditor.config中的toolbars找到相应的进行实例化
var iframeUrlMap = {'camnpr': '~/dialogs/camnpr/camnpr.html'};
// 表情
editorui["emotion"] = function (editor, iframeUrl) {};
editorui["camnpr"] = function (editor, iframeUrl) { var cmd = "camnpr"; var ui = new editorui.MultiMenuPop({ title:editor.options.labelMap[cmd] || editor.getLang("labelMap."+ cmd + "") || '', editor:editor, className:'edui-for-' + cmd, iframeUrl:editor.ui.mapUrl(iframeUrl || (editor.options.iframeUrlMap || {})[cmd] || iframeUrlMap[cmd]) }); editorui.buttons[cmd] = ui; editor.addListener('selectionchange', function () { ui.setDisabled(editor.queryCommandState(cmd) == -1) }); return ui; };
//让其显示成自己需要的图标样式
themes/default/ueditor.css
.edui-for-camnpr .edui-icon { background-position: -640px -40px; }
自定义按钮、图标、窗口页面
ueditor.config.js
//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
toolbars :[['help','camnpr']]
//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
labelMap :{'anchor':'', 'undo':'','camnpr':'郑州网建']
ueditor.all.js
//为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起
var btnCmds = ['camnpr'];
UE.commands['camnpr'] = { execCommand : function(){ console.log("你好,这是自定义按钮的事件",this.body.innerHTML); } };