今天完成的事情：

准备小课堂分享，如何使用富文本编辑器：

下载解压，引入源码+配置JS，实例化编辑器；

编辑器内容获取以及其他设置；

1.背景介绍

在做Web应用时，经常会进行富文本编辑，常用的富文本编辑器有很多，比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。好的富文本编辑器可以让我们用户有更好的体验效果，带来更多的用户好评。

在这里为大家推荐百度推出的UEditor，UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

2.知识剖析

UEditor目录：

下载编辑器并解压，部署包解压后的文件目录结构为：

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

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

themes: 样式图片和样式文件

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

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

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

UEditor部署：

在HTML中引入配置文件ueditor.config.js和源码文件ueditor.all.js以及jquery库，并设置编辑器实例化的

位置，如:

<script id='editor'>

初始化内容

</script> 

<script>

var ue = UE.getEditor('editor'); //实例化

</script>

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

3.常见问题

1.如何定制自己的工具栏？

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

4.解决方案

1、

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

修改配置项的方法： 

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

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

2、

   开发者在创建编辑器时后，会执行一些接口或者调用编辑命令，这些代码看起来没有问题，编辑器实例也能正确拿到，但就是没有效果 。

   其实出现这种问题，其实是大家不了解UEditor的创建原理导致的。因为UEditor的编辑区域使用iframe作为编辑容器。所以当编辑器创建实例后，先会创建一个iframe元素，然后在iframe元素中写入一些脚本，这些脚本会在iframe元素初始化完成时被调用。

   脚本的作用主要是为编辑器实例赋值iframe中的body,window,document对象的引用。 看到这里，大家就应该明白UEditor的初始化过程其实是个异步过程。

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

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

5.编码实战

  $(document).ready(function () {

var editor = UE.getEditor('editor', { //UEditor编辑器 实例化

initialFrameHeight: 90,//编辑器高度

toolbars: [['undo', //撤销

'redo', //重做

 'bold', //加粗,...]]

......

editor.setContent(data.wish)//设置编辑器内容；

wish = editor.getContent();//获取编辑器内容；

                        ...

 }

 ）

....

6.扩展思考

怎么给编辑器添加事件？

UEditor内置了很多方法；如

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

  ue.hasContents();//判断是否有内容；

自定义添加事件：

  var ue = UE.getEditor('tseditor', options);

                      //失去焦点事件，生成简介

                      ue.addListener("blur",function(){//监听失去焦点

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

                       var arr =(UE.getEditor('tseditor').getContentTxt());

                        var desc = document.getElementByIdx_x_x_x("desc");

                        desc.value=arr.substring(0,180);

帮忙解决一些做JS任务碰到的小问题

明天计划的事情：

后台页面

遇到的问题：

没做什么东西，暂无

收获：

重温富文本编辑器的使用；

帮忙解决任务问题时很多都是以前任务碰到的坑，所以问题不是很大；