百度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);
    }
};

 

转载于:https://www.cnblogs.com/techliang666/p/10523388.html