总结一下自己给编辑器定制样式的过程中所遇到的问题，主要是编辑器的二次开发接口，以及用angular定制样式，问题不少，终于在**的帮助下，完成了，还剩下老版本和新版本的交互没有弄好，不过不难。下面分别讲解问题。
ueditor的开发
你可以在官网上下载任意版本，进行使用即可： 下载后按照官网上的配置就可以使用。文档地址： 关于ueditor二次开发问题还真不少，这里列出来。
1.ueditor自动将div标签过滤变为p标签
在定制样式过程中，发现div全部被过滤未p标签，网上找了好些资料，但都没用，后来看到有大神写到，不同版本的ueditor配置不一样，这里写下我的解决办法是：打开ueditor.config.js配置文件，添加下面的代码：
, allowDivTransToP: false
注意是在window.UEDIROE_CONFIG里面手动添加！另外也有人遇到类似的情况解决办法，这里可以参考：
2.如何把定制的样式插入到编辑器里面呢？
在编辑器里面提供了接口，我们来看看。
function insertHtml() { var value = prompt('插入html代码', ''); UE.getEditor('editor').execCommand('insertHtml', value) }
那么如何在我们自己的项目中使用该接口呢？首先要实列化编辑器，通常是直接使用UE.getEditor（）来得到实例。
//使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例使用之前我们需要先把该编辑器引入进来，才能调用其方法。
<script src="https://www.jb51.net/libs/ueditor/ueditor.config.js"></script> <script src="https://www.jb51.net/libs/ueditor/ueditor.all.min.js"></script>
在我们的angular的项目中创建编辑器实例如下，编辑器提供ready的方法来实例化：
// 创建编辑器的实列 $scope.ready = function (ueditor) { window.editor = ueditor; };
OK，我们现在就可以使用editor这个编辑器实例了。接下来看看ng定制的样式。
ng定制的样式
先来看下，我们用手写的手风琴菜单样式。下载地址：https://github.com/foreverjiangting/set-menu/tree/master/menu 这里使用的交互使用了data-toggle="collapse"，但和ng有冲突，所以需要用ng来控制交互。我们来看看怎么写：
<!-- 添加工具栏 --> <div> <h4>工具栏</h4> <!-- sidebar content --> <div> <a ng-click="toggle('titleStyle')" ><span></span>首页</a> <ul ng-hide="titleStyle"> <li ng-repeat="title in sources.titles" ng-click="insertHtml('titles', title)"><a>{{title.name}}</a></li> </ul> <a ng-click="toggle('titleIcon')"><span></span>图标</a> <ul ng-hide="titleIcon"> <li ng-repeat="img in sources.imgs" ng-click="insertHtml('imgs', img)"><a><img ng-src="{{img.url}}"></a></li> </ul> <a ng-click="toggle('titleYouxia')"><span>生活</span></a> <ul ng-hide="titleYouxia"> <li ng-repeat="yx in sources.yxs" ng-click="insertHtml('yxs', yx)"><a>{{yx.name}}</a></li> </ul> <a ng-click="toggle('titleServe')"><span></span>留言板</a> <ul ng-hide="titleServe"> <li ng-repeat="ser in sources.sers" ng-click="insertHtml('sers', ser)"><a>{{ser.name}}</a></li> </ul> <a ng-click="toggle('titleArticle')"><span></span>推荐文章</a> <ul ng-hide="titleArticle"> <li ng-repeat="arc in sources.arcs" ng-click="insertHtml('arcs', arc)"><a>{{arc.article}}</a></li> </ul> </div> <!-- 内容主题结束 --> </div>
js里面的代码如下：
// 工具栏交互样式 $scope.titleStyle = $scope.titleIcon = $scope.titleYouxia = $scope.titleServe = $titleArticle=false; $scope.toggle = function(style){ $scope[style] =! $scope[style]; }
ng控制的手风琴效果，简单轻便，代码量少。
效果如下：
样式写好以后就是插入到编辑器中，那么如何插入呢？这里有两种，直接插，和根据搜索之后的文章进行插入。直接插入的话比较简单。
$scope.insertHtml = function (type, item) { if (type === 'titles' || type === 'imgs') { editor.execCommand('insertHtml', item.html); }
插入之后的效果如下：
当然我们这样做有什么用呢？主要是利用编辑器里面的内容，利用ng数据绑定，反映到app上，从而制作app的文章编辑界面。
搜索的功能制作