今天完成的事情：

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

登陆官网下载并解压文件；

参考官方文档，讲解怎样对EUditor进行初始化，并分析了常见的问题，以及在js任务中的应用，最后选取个别问题，进行开放性的讨论。

1.背景介绍

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

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

2.知识剖析

包含三个知识点：开始使用UEditor、定制自己的工具栏和UEditor简单的初始化设置。

知识点一：开始使用EUditor

（1）UEditor目录：

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

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

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

themes: 样式图片和样式文件

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

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

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

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

注：下载地址：http://ueditor.baidu.com/website/download.html#ueditor

其中，开发版中，完整源码是没有ueditor.all.js这个文件的，一般用editor_api.js代替，这个文件是可以找到的。而各utf-8版，如php、asp等版本是有ueditor.all.js文件的。

（2）UEditor部署：

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

位置，如:

<script id='editor'>

初始化内容

</script> 

<script>

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

</script>

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

知识点二：定制自己的工具栏

有两种方法，一是修改ueditor.config.js文件，二是实例化编辑器传入toolbars的参数。个人推荐第二种方法

知识点三：简单的初始化设置：

简单讲了几个方面，诸如语言设置、宽高的自定义、统计字数是否开启等。

3.常见问题

1.实例创建后，为何执行接口报错？

2.div标签自动换为p?

4.解决方案

1、问题1的原因：UEditor的初始化是一个异步过程

解决方法： 

把实例创建的部分放在ready接口中，他会在编辑器所有的初始化操作都结束时调用。保证你要做的操作能在一个完整的初始化环境中执行。

2、问题2的原因：UEditor对于进入编辑器的数据进行了过滤处理，UEditor的段落用p标签标示，而很多的编辑处理都是基于p标签进行处理

解决方法：

初始化的时候，设置allowDivTransTop的值为false。

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任务碰到的小问题

明天计划的事情：

修改js任务最后一个问题，即图片上传问题就可以了。

遇到的问题：

修改翻页和搜索页面遗留的问题。

之前选中类型，点击搜索后，虽然可以搜索正确的结果，但是里面的内容为空。

师姐建议我使用ng-selected属性，但是弄不好，失败了。于是尝试其他思路。试了很多方法，网上也找了些资料，可能是提问的姿势有问题，所以没有搜到满意的答案。最后，用了一种很奇怪的方法。

这是我之前存放数据的形式，如果直接直接把type0、type1等后面的属性值，赋值给一个select绑定的变量，点击搜索就会为空，如果把$scope.type.type0等这种形式的变量赋值给绑定的变量，点击搜索，里面的内容就不会清空。但是，初始化只能设置一个变量啊。于是采用了变量名拼接偏门方法。把“type0”拆成“type”和“0这两部分。顺着这种思路，实现了想要的效果。

收获：

1、学习了富文本编辑器的基本使用，能够理解和处理富文本编辑器的常见问题，参照官网教程进行简单的二次开发；

2、学会了拼接变量名来实现变量的批量赋值；

3、解决了搜索页面的遗留问题