AngularJs定制样式插入到ueditor中的问题小结

总结一下自己给编辑器定制样式的过程中所遇到的问题，主要是编辑器的二次开发接口，以及用angular定制样式，问题不少，终于在**的帮助下，完成了，还剩下老版本和新版本的交互没有弄好，不过不难。下面分别讲解问题。

ueditor的开发

你可以在官网上下载任意版本，进行使用即可：http://ueditor.baidu.com/website/download.html 下载后按照官网上的配置就可以使用。文档地址：http://fex.baidu.com/ueditor/ 关于ueditor二次开发问题还真不少，这里列出来。

1.ueditor自动将div标签过滤变为p标签

在定制样式过程中，发现div全部被过滤未p标签，网上找了好些资料，但都没用，后来看到有大神写到，不同版本的ueditor配置不一样，这里写下我的解决办法是：打开ueditor.config.js配置文件，添加下面的代码：

, allowDivTransToP: false 

注意是在window.UEDIROE_CONFIG里面手动添加！另外也有人遇到类似的情况解决办法，这里可以参考：http://www.cnblogs.com/Olive116/p/3464495.html

2.如何把定制的样式插入到编辑器里面呢？

在编辑器里面提供了接口，我们来看看。

function insertHtml() {var value = prompt('插入html代码', '');UE.getEditor('editor').execCommand('insertHtml', value)} 

那么如何在我们自己的项目中使用该接口呢？首先要实列化编辑器，通常是直接使用UE.getEditor（）来得到实例。

//使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例使用之前我们需要先把该编辑器引入进来，才能调用其方法。

<script src="libs/ueditor/ueditor.config.js"></script><script src="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 class="set-toolbar"><h4 class="text-center">工具栏</h4><!-- sidebar content --><div class="sidebar-menu"><a ng-click="toggle('titleStyle')" class="nav-header menu-first " ><span class="glyphicon glyphicon-pencil"></span>首页</a><ul ng-hide="titleStyle"  class="nav nav-list menu-second"><li ng-repeat="title in sources.titles" ng-click="insertHtml('titles', title)"><a>{{title.name}}</a></li></ul><a ng-click="toggle('titleIcon')" class="nav-header menu-first"><span class="glyphicon glyphicon-picture"></span>图标</a><ul ng-hide="titleIcon"  class="nav nav-list menu-second"><li class="set-image" 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')" class="nav-header menu-first "><span class="glyphicon glyphicon-user">生活</span></a><ul ng-hide="titleYouxia"  class="nav nav-list menu-second"><li ng-repeat="yx in sources.yxs" ng-click="insertHtml('yxs', yx)"><a>{{yx.name}}</a></li></ul><a ng-click="toggle('titleServe')" class="nav-header menu-first "><span class="glyphicon glyphicon-briefcase"></span>留言板</a><ul ng-hide="titleServe"  class="nav nav-list menu-second"><li ng-repeat="ser in sources.sers" ng-click="insertHtml('sers', ser)"><a>{{ser.name}}</a></li></ul><a ng-click="toggle('titleArticle')" class="nav-header menu-first "><span class="glyphicon glyphicon-thumbs-up"></span>推荐文章</a><ul ng-hide="titleArticle"  class="nav nav-list menu-second"><li ng-repeat="arc in sources.arcs" ng-click="insertHtml('arcs', arc)"><a>{{arc.article}}</a></li></ul></div><!-- 内容主题结束 --></div>