开始使用
开始使用ueditor
定制工具栏图标
前端配置项说明
目录介绍
提交表单
编辑内容展示
如何使用补丁文件
后端配置
后端部署说明
PHP 使用说明
ASP 使用说明
ASP.NET 使用说明
JSP 使用说明
后端配置项说明
上传路径配置
上传视频
二次开发
如何进行二次开发
使用grunt打包源代码
后端请求规范
自定义请求参数
跨域支持说明
常用API列表
常用API
常见问题
实例创建后为什么直接执行接口报错
如何自定义请求地址
如何阻止div变成p标签
实例创建后为什么直接执行接口报错 - Ueditor 富文本编辑器参考文档 - 笔下光年
网站首页
实例创建后为什么直接执行接口报错
### 场景 开发者在创建编辑器时后,会执行一些接口或者调用编辑命令,例如 ```javascript 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接口,他会在编辑器所有的初始化操作都结束时调用。保证你要做的操作能在一个完整的初始化环境中执行。 ```javascript UE.getEditor('editor').ready(function() { //this是当前创建的编辑器实例 this.setContent('内容') }) ``` UEditor的老用户会说,不是还有个addListener可以注册ready事件吗? ```javascript UE.getEditor('editor').addListener('ready', function() { //this是当前创建的编辑器实例 this.setContent('内容') }) ``` 确实这样写也能达到效果,但这样创建有个小问题。如果的这段代码是用在第一次创建时就没有问题。但如果编辑器已经创建,你需要再次赋值,想使用同一段代码,这时,这里的事件ready是不会触发的。但你调用接口ready注入你的操作,这种方式,会判断如果你的编辑器已经初始化完成了,那ready将会自动加载注入的内容,如果还没有初始化结束,它会自己注册ready事件,当完成初始化后再掉起自己。所以建议开发者使用ready接口作为初始化时注入操作。
上一篇:
常见问题
下一篇:
如何自定义请求地址