实例化编辑器

var ue = UE.getEditor('editor2', {
    toolbars: [[
        'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', '|',
        'selectall', 'cleardoc', '|',
        'fontfamily', 'fontsize', '|',
        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
        'simpleupload', '|',
        'removeformat', '|'
    ]],
    iframeCssUrl: '../ueditor/themes/editor2.css',
    initialFrameHeight:500,
    enableAutoSave: false,
    enableContextMenu: false,
    elementPathEnabled : false,
    focus:false,
    autoHeightEnabled:false
});

选中编辑器的内容

ue.execCommand('selectall');

获取编辑器的内容

var cont = ue.getContent();

获取编辑器中选中的内容

//获取选中的内容
var range = ue.selection.getRange();
range.select();
//选中内容的纯文本
var txt1 = ue.selection.getText();

去除选中内容节点内的最近的 span 标签

var range = ue.selection.getRange();
range.select();
range.removeInlineStyle(["span"]);

为选中的内容增加 span 标签，并赋予 span 标签 style 样式

var range = ue.selection.getRange();
range.select();
range.applyInlineStyle("span",{"style":"font-size: 32px;"});

赋予编辑器内容

ue.setContent(cont, false);

清空编辑器的内容

ue.execCommand('cleardoc');

自定义按钮

UE.registerUI('button1',function(editor,uiName){
    editor.registerCommand(uiName,{
        execCommand:function(){
            alert("执行操作");
        }
    });
    var btn = new UE.ui.Button({
        name:uiName,
        title:'按钮名称',
        cssRules :'background-image:url(../ueditor/themes/default/images/test.png) !important;background-size:22px 22px;zoom:2;',
        onclick:function () {
            editor.execCommand(uiName);
        }
    });
    return btn;
},'28','editor2');

自定义弹出框

UE.registerUI('dialog1',function(editor,uiName){
    // 创建dialog
    var dialog = new UE.ui.Dialog({
        editor:editor,
        name:uiName,
        title:"弹出框标题",
        cssRules:"width:260px;height:125px;",
        buttons:[
            {
                className:'edui-okbutton',
                label:'确定',
                onclick:function (){
                    alert("执行操作");
                    dialog.close(true);
                }
            },
            {
                className:'edui-cancelbutton',
                label:'取消',
                onclick:function () {
                    dialog.close(false);
                }
            }
        ],
        content:'<div style="padding: 10px;">' +
        '<textarea id="myDialog1" name="myDialog1" style="width:98%;height:30px;"></textarea>' +
        '<span style="font-size: 5px;">test</span></div>'
    });
    //创建一个按钮，点击后出现对话框
    var btn = new UE.ui.Button({
        title:'按钮名称',
        //自定义按钮样式
        name:'myFirst'+uiName,
        cssRules :'background-image:url(../ueditor/themes/default/images/test.png) !important;background-size:22px 22px;zoom:2;',
        onclick:function () {
            //渲染对话框并弹出
            dialog.render();
            dialog.open();
        }
    });
    return btn;
},'26','editor2');

事件的监听

ue.addListener('selectionchange', function(){
    //要监听的变化
});

自定义引用样式示例

UE.registerUI('myblockquote',function(editor,uiName){
    editor.registerCommand(uiName,{
        execCommand:function(){
            this.execCommand('blockquote',{
                "style":"border-left: 3px solid #E5E6E1; margin-left: 0px; padding-left: 5px; line-height:36px;"
            });
        }
    });
    var btn = new UE.ui.Button({
        name:uiName,
        title:'自定义引用',
        cssRules :"background-position: -220px 0;",
        onclick:function () {
            editor.execCommand(uiName);
        }
    });
    //每当编辑器内部选区发生改变时，将触发该事件
    editor.addListener('selectionchange', function () {
        var state = editor.queryCommandState('blockquote');
        console.log(state);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    return btn;
});

此例为点击该按钮时，为其添加相应的样式。

Doc  API  相关教程  examples

To be continued ...