发表于: 2019-10-18 23:34:51

1 890


今天完成的事:

进行任务6-10

明天计划的事:

继续任务6-10

遇到的问题:

暂无

收获:

开始使用UEditor

(1)UEditor目录:

下载编辑器并解压,部署包解压后的文件目录结构如下所示


项目结构

dialogs: 弹出对话框对应的资源和JS文件

lang: 编辑器国际化显示的文件

themes: 样式图片和样式文件

third-party: 第三方插件(包括代码高亮,源码编辑等组件)

ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件

ueditor.config.js: 编辑器的配置文件,建议和编辑器实例化页面置于同一目录

(2)UEditor部署:


在HTML中引入配置文件ueditor.config.js和源码文件ueditor.all.js以及jquery库

引入js文件

(3)实例化UEditor:

至此,UE富文本编辑器已经按照默认配置成功部署

2:定制自己的工具栏

UEditor 工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求

修改配置项的方法:

1. 方法一:修改 ueditor.config.js 里面的 toolbars


2. 方法二:实例化编辑器的时候传入 toolbars 参数


3:UEditor简单的初始化设置

常用初始设置:

//focus时自动清空初始化时的内容

autoClearinitialContent:true,

//关闭字数统计

wordCount:true,

//关闭elementPath

elementPathEnabled:true,

//默认的编辑区域高度

initialFrameHeight:200,

// 更多其他参数,请参考ueditor.config.js中的配置项

initialFrameWidth:300

//默认的编辑区域宽度

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

varue = UE.getEditor('editor');

ue.setContent('初始化的内容');

//或者调用命令

//ue.execCommand('inserthtml','内容');

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

其实出现这种问题,其实是大家不了解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('内容')

})



返回列表 返回列表
评论

    分享到