UEditor 入门学习

发表于 | | 阅读次数
字数统计 1,411 | 阅读时长 6

通过 UE.getEditor('containerId') 来获取编辑器。

配置

1
2
3
4
5
6
7
8
9
var ue = UE.getEditor('container', {
    toolbars:[
       ['在这里配置工具栏内容'],
       ['这里配置第二行的工具栏内容']
    ]，
    autoHeightEnabled: true,
    ...
    这里配置其他配置项: true
});

可以通过 ue.getOpt('配置项名称') 方法来读取配置项。
详细配置项内容可以访问官方文档了解更多。

二次开发

通过 registerUI 这个方法来添加扩展的内容：

1
2
3
UE.registerUI('uiname',function(editor, uiname) {
    // do something
}, [index,[editorId]]);

参数：

  1. uiname ，是你为新添加 UI 起的名字，这里可以是 1 或者 多个参数（’uiname’ 或者是 ‘uiname1 uiname2 uiname3’）。
  2. function(editor, uiname){} 。editor 是编辑器实例，如果你有多个编辑器实例，那每个编辑器实例化后，都会调用这个 function ，并且把 editor 传进来， uiname 是你为 UI 起的名字，如果前面你添加的是多个，这里 function 会被调用多次，并且将每一个 UI 起的名字传递进来。
    如果函数返回了一个 UI 实例，那这个 UI 实例就会被默认添加到工具栏上。当然也可以不返回任何 UI ，比如希望监控 selectionChange 事件，在某些场景下弹出浮层，这时就不需要返回任何 UI 。
  3. index ，是你想放到 toolbar 的那个位置，默认是放到最后。
  4. editorId ，当你的页面上有多个编辑器实例时，你想将这个 UI 扩展到那个编辑器实例上，这里的 editorId 是给你编辑器初始化时，传入的 id ，默认是每个实例都会加入你的扩展。

示例：创建字体选择下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
UE.registerUI('combox', function(editor,uiName){
    //注册按钮执行时的command命令,用uiName作为command名字，使用命令默认就会带有回退操作
    editor.registerCommand(uiName,{
        execCommand:function(cmdName,value){
            //这里借用fontsize的命令
            this.execCommand('fontsize',value + 'px')
        },
        queryCommandValue:function(){
            //这里借用fontsize的查询命令
            return this.queryCommandValue('fontsize')
        }
    });
    //创建下拉菜单中的键值对，这里我用字体大小作为例子
    var items = [];
    for(var i= 0,ci;ci=[10, 11, 12, 14, 16, 18, 20, 24, 36][i++];){
        items.push({
            //显示的条目
            label:'字体:' + ci + 'px',
            //选中条目后的返回值
            value:ci,
            //针对每个条目进行特殊的渲染
            renderLabelHtml:function () {
                //这个是希望每个条目的字体是不同的
                return '<div class="edui-label %%-label" style="line-height:2;font-size:' +
                    this.value + 'px;">' + (this.label || '') + '</div>';
            }
        });
    }
    //创建下来框
    var combox = new UE.ui.Combox({
        //需要指定当前的编辑器实例
        editor:editor,
        //添加条目
        items:items,
        //当选中时要做的事情
        onselect:function (t, index) {
            //拿到选中条目的值
            editor.execCommand(uiName, this.items[index].value);
        },
        //提示
        title:uiName,
        //当编辑器没有焦点时，combox默认显示的内容
        initValue:uiName
    });
    editor.addListener('selectionchange', function (type, causeByUi, uiReady) {
        if (!uiReady) {
            var state = editor.queryCommandState(uiName);
            if (state == -1) {
                combox.setDisabled(true);
            } else {
                combox.setDisabled(false);
                var value = editor.queryCommandValue(uiName);
                if(!value){
                    combox.setValue(uiName);
                    return;
                }
                //ie下从源码模式切换回来时，字体会带单引号，而且会有逗号
                value && (value = value.replace(/['"]/g, '').split(',')[0]);
                combox.setValue(value);
            }
        }
    });
    return combox;
},2);/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/

常用 API

常用方法

  • 实例化编辑器到 id 为 container 的 DOM 容器上：
    var ue = UE.getEditor('container');

  • 设置编辑器内容：

    1
    2
    3
    ue.ready(function() {
       ue.setContent('<p>hello!</p>')
    });

  • 追加编辑器内容：

    1
    2
    3
    ue.ready(function() {
       ue.setContent('<p>add text</p>', true)
    });

  • 获取编辑器内容：

    1
    2
    3
    ue.ready(function() {
       var html = ue.getContent();
    });

  • 获取纯文本内容：
    ue.getContentTxt();

  • 获取保留格式的文本内容:
    ue.getPlainTxt();

  • 获取当前选中的文本：
    ue.selection.getText ();

  • 判断编辑器是否内容：
    ue.hasContents();

  • 让编辑器获得焦点：
    ue.focus();

  • 判断编辑器是否获得焦点：
    ue.isFocus();

  • 设置当前编辑区域不可编辑：
    ue.setDisabled();

  • 设置当前编辑区域可以编辑：
    ue.setEnabled();

  • 隐藏编辑器：
    ue.setHide();

  • 显示编辑器：
    ue.setShow();

常用命令

  • 在当前光标位置插入 html 内容：
    ue.execCommand('inserhtml', '<span>hello!</span>');

  • 设置当前选取文本格式：

    • 加粗： ue.execCommand('bold');
    • 加斜线： ue.execCommand('italic');
    • 设置上标： ue.execCommand('subscript');
    • 设置下标： ue.execCommand('supsciprt');
    • 设置字体颜色： ue.execCommand('forecolor', '#ff0000');
    • 设置背景颜色： ue.execCommand('backcolor', '#0000ff');

  • 回退编辑器内容：
    ue,execCommand('undo');

  • 撤销回退编辑器内容：
    ue.execCommand('undo');

  • 切换源码和可视化编辑模式：
    ue.execCommand('source');

  • 选中所有内容
    ue.execCommand('selectall');

  • 清空内容
    ue.execCommand('cleardoc');

  • 读取草稿箱
    ue.execCommand('drafts');

  • 清空草稿箱
    ue.execCommand('clearlocaldata');

更多详细内容参考：详细文档

常见问题

实例创建后执行接口报错

因为 Ueditor 的初始化过程是异步过程。虽然工厂方法 getEditor 能正确返回编辑器实例，但同步的代码（执行接口）马上就被执行了，这就造成同步代码需要的部分元素还没有创建。所以会报错。

正确的初始化方式：
Ueditor 提供了 ready 接口，会在编辑器所有的初始化操作都结束时调用。

1
2
3
4
UE.getEditor('editor').ready(function() {
    // this 是当前创建的编辑器实例
    this.setContent('在ready方法里执行操作');
});

粘贴到编辑器中如果带有 div 标签会自动转换成 p 标签

这是因为 UEditor 对于进入编辑器中的数据进行的过滤处理。
在 UEditor 中表示段落的是 p 标签，很多编辑操作都是基于 p 标签处理的。如果需要保留 div 标签不进行转换也是可以的：

1
2
3
UE.getEditor('editorId', {
    allowDivTransToP: false;
});