總結(jié)一下自己給編輯器定制樣式的過程中所遇到的問題，主要是編輯器的二次開發(fā)接口，以及用angular定制樣式，問題不少，終于在**的幫助下，完成了，還剩下老版本和新版本的交互沒有弄好，不過不難。下面分別講解問題。

ueditor的開發(fā)

你可以在官網(wǎng)上下載任意版本，進(jìn)行使用即可：http://ueditor.baidu.com/website/download.html 下載后按照官網(wǎng)上的配置就可以使用。文檔地址：http://fex.baidu.com/ueditor/ 關(guān)于ueditor二次開發(fā)問題還真不少，這里列出來。

1.ueditor自動將div標(biāo)簽過濾變?yōu)閜標(biāo)簽

在定制樣式過程中，發(fā)現(xiàn)div全部被過濾未p標(biāo)簽，網(wǎng)上找了好些資料，但都沒用，后來看到有大神寫到，不同版本的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)} 

那么如何在我們自己的項(xiàng)目中使用該接口呢？首先要實(shí)列化編輯器，通常是直接使用UE.getEditor（）來得到實(shí)例。

//使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例使用之前我們需要先把該編輯器引入進(jìn)來，才能調(diào)用其方法。

<script src="libs/ueditor/ueditor.config.js"></script><script src="libs/ueditor/ueditor.all.min.js"></script>

在我們的angular的項(xiàng)目中創(chuàng)建編輯器實(shí)例如下，編輯器提供ready的方法來實(shí)例化：

// 創(chuàng)建編輯器的實(shí)列$scope.ready = function (ueditor) {window.editor = ueditor;}; 

OK，我們現(xiàn)在就可以使用editor這個(gè)編輯器實(shí)例了。接下來看看ng定制的樣式。

ng定制的樣式

先來看下，我們用手寫的手風(fē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>圖標(biāo)</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><!-- 內(nèi)容主題結(jié)束 --></div>