首页 > 网站 > WEB开发 > 正文

ueditor常见用法

2024-04-27 15:08:43
字体:
来源:转载
供稿:网友

1.在ueditor光标处插入内容使用( inserthtml )

 

UE.getEditor('editor').execCommand('inserthtml', text);

2.在ueditor已有内容的末尾追加内容使用

 

UE.getEditor(Emotion.TchUeditor).setContent('testtext', true);

 

3.光标焦点在ueditor显示使用

UE.getEditor(Emotion.TchUeditor).focus();//此时光标出现在ueditor最前面

UE.getEditor(Emotion.TchUeditor).focus(true);//此时光标出现在ueditor最后面

 

4.在ueditor中添加一个或多个新的或者改变原有的按钮(小图标)

 

UE.registerUI('button', function(editor, uiName) {

    //注册按钮执行时的command命令,使用命令默认就会带有回退操作

    editor.registerCommand(uiName, {

        execCommand: function() {

            alert('execCommand:' + uiName)

        }

    });

    //创建一个button

    var btn = new UE.ui.Button({

        //按钮的名字

        name: uiName,

        //提示

        title: uiName,

        //添加额外样式,指定icon图标,这里默认使用一个重复的icon

        CSSRules: 'background-position: -500px 0;',

        //点击时执行的命令

        onclick: function() {

            //这里可以不用执行命令,做你自己的操作也可

            editor.execCommand(uiName);

        }

    });

    //当点到编辑内容上时,按钮要做的状态反射

    editor.addListener('selectionchange', function() {

        var state = editor.queryCommandState(uiName);

        if (state == -1) {

            btn.setDisabled(true);

            btn.setChecked(false);

        } else {

            btn.setDisabled(false);

            btn.setChecked(state);

        }

    });

    //因为你是添加button,所以需要返回这个button

    return btn;});

 

添加多个按钮

UE.registerUI('bold italic redo undo underline strikethrough', function(editor, uiName) {

    //注册按钮执行时的command命令,使用命令默认就会带有回退操作

    editor.registerCommand(uiName, {

        execCommand: function() {

            alert('execCommand:' + uiName)

        }

    });

    //创建一个button

    var btn = new UE.ui.Button({

        //按钮的名字

        name: uiName,

        //提示

        title: uiName,

        //添加额外样式,指定icon图标,这里默认使用一个重复的icon

        cssRules: 'background-position: -500px 0;',

        //点击时执行的命令

        onclick: function() {

            //这里可以不用执行命令,做你自己的操作也可

            editor.execCommand(uiName);

        }

    });

    //当点到编辑内容上时,按钮要做的状态反射

    editor.addListener('selectionchange', function() {

        var state = editor.queryCommandState(uiName);

        if (state == -1) {

            btn.setDisabled(true);

            btn.setChecked(false);

        } else {

            btn.setDisabled(false);

            btn.setChecked(state);

        }

    });

    //因为你是添加button,所以需要返回这个button

    return btn;});

 

 

5.Ueditor常见API列表总结(官网上有)

 

 

实例化编辑器到id为 container 的dom 容器上:详细

var ue = UE.getEditor('container');

设置编辑器内容:详细

ue.ready(function() {

    ue.setContent('<p>hello!</p>');});

追加编辑器内容:详细

ue.ready(function() {

    ue.setContent('<p>new text</p>', true);});

获取编辑器html内容:详细

ue.ready(function() {

    var html = ue.getContent();});

获取纯文本内容:详细

ue.getContentTxt();

获取保留格式的文本内容:详细

ue.getPlainTxt();

获取纯文本内容:详细

ue.getContentTxt();

判断编辑器是否有内容:详细

ue.hasContents();

让编辑器获得焦点:详细

ue.focus();

让编辑器获得焦点

ue.blur();

判断编辑器是否获得焦点:详细

ue.isFocus();

设置当前编辑区域不可编辑:详细

ue.setDisabled();

设置当前编辑区域可以编辑:详细

ue.setEnabled();

隐藏编辑器:详细

ue.setHide();

显示编辑器:详细

ue.setShow();

获得当前选中的文本:详细

ue.selection.getText();

常用命令:详细

在当前光标位置插入html内容

ue.execCommand('inserthtml', '<span>hello!</span>');

设置当前选区文本格式:详细

ue.execCommand('bold'); //加粗

ue.execCommand('italic'); //加斜线

ue.execCommand('subscript'); //设置上标

ue.execCommand('supscript'); //设置下标

ue.execCommand('forecolor', '#FF0000'); //设置字体颜色

ue.execCommand('backcolor', '#0000FF'); //设置字体背景颜色

回退编辑器内容:详细

ue.execCommand('undo');

撤销回退编辑器内容:详细

ue.execCommand('redo');

切换源码和可视化编辑模式:详细

ue.execCommand('source');

选中所有内容:详细

ue.execCommand('selectall');

清空内容:详细

ue.execCommand('cleardoc');

读取草稿箱

ue.execCommand('drafts');

清空草稿箱

ue.execCommand('clearlocaldata');

 

 

6.Ueditor常见问题

 

实例创建后为什么直接执行接口报错

场景

开发者在创建编辑器时后,会执行一些接口或者调用编辑命令,例如

var ue = UE.getEditor('editor');

ue.setContent('初始化的内容');//或者调用命令//ue.execCommand('inserthtml','内容');

这些代码看起来没有问题,编辑器实例也能正确拿到,但就是没有效果。

UEditor创建编辑区域的原理

其实出现这种问题,其实是大家不了解UEditor的创建原理导致的。因为UEditor的编辑区域是使用iframe作为编辑容器的。所以当编辑器创建实例后,先会创建一个iframe元素,然后在iframe元素中写入一些脚本,这些脚本会在iframe元素初始化完成时被调用。脚本的作用主要是为编辑器实例赋值iframe中的body,window,document对象的引用。 看到这里,大家就应该明白UEditor的初始化过程其实是个异步过程。

因为是个异步过程。所以场景中的书写方式就会出现问题了。虽然工厂方法getEditor能正确返回编辑器实例,但同步的代码ue.setContent马上就被执行了,因为setContent是在编辑容器中写内容,这时需要用到body,document等元素,但这些元素的引用赋值却在异步中才做的赋值。所以才会出现直接执行setContent时会出现无效的问题。当然有时不同浏览器的效果会出现不同。一些高级的浏览器比如Chrome有时是可以的,但大部分ie浏览器都不行。这主要是因为浏览器的性能所致的。

那正确的方式是什么呢?

正确的初始化方式

UEditor为开发者提供了ready接口,他会在编辑器所有的初始化操作都结束时调用。保证你要做的操作能在一个完整的初始化环境中执行。

UE.getEditor('editor').ready(function() {

    //this是当前创建的编辑器实例

    this.setContent('内容')})

UEditor的老用户会说,不是还有个addListener可以注册ready事件吗?

UE.getEditor('editor').addListener('ready', function() {

    //this是当前创建的编辑器实例

    this.setContent('内容')})

确实这样写也能达到效果,但这样创建有个小问题。如果的这段代码是用在第一次创建时就没有问题。但如果编辑器已经创建,你需要再次赋值,想使用同一段代码,这时,这里的事件ready是不会触发的。但你调用接口ready注入你的操作,这种方式,会判断如果你的编辑器已经初始化完成了,那ready将会自动加载注入的内容,如果还没有初始化结束,它会自己注册ready事件,当完成初始化后再掉起自己。所以建议开发者使用ready接口作为初始化时注入操作。

 

如何自定义请求地址

本文档说明修改请求地址的方法。

应用场景

ueditor 1.4.2+推荐使用唯一的请求地址,通过GET参数action指定不同请求类型。 但很多用户都希望使用自己写好的上传地址,下面提供一种解决方法: 由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址,可以直接通过复写这个方法实现,例子如下:

UE.Editor.PRototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl = function(action) {

    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {

        return 'http://a.b.com/upload.php';

    } else if (action == 'uploadvideo') {

        return 'http://a.b.com/video.php';

    } else {

        return this._bkGetActionUrl.call(this, action);

    }}

action类型以及说明

uploadimage://执行上传图片或截图的action名称

uploadscrawl://执行上传涂鸦的action名称

uploadvideo://执行上传视频的action名称

uploadfile://controller里,执行上传视频的action名称

catchimage://执行抓取远程图片的action名称

listimage://执行列出图片的action名称

listfile://执行列出文件的action名称

 

如何阻止div标签自动转换为p标签

背景:

刚开始使用UEditor的开发者,会发现一个现象,粘贴到编辑器中的内容如果带有div标签,待粘贴到编辑器之后,会发现粘贴到编辑器中的div已经被转换为p标签了。首先这不是一个bug,这是UEditor对于进入编辑器中的数据进行的过滤处理。在UEditor中表示段落的标签是p标签,很多的编辑操作都是基于p标签进行的处理。当然我们对div标签也做了兼容性的处理,如果你想保留div标签不让UEditor进行转换也是可以的。

 

阻止转换:

UE.getEditor('editorID', {

allowDivTransToP: false

})


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表