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

1.ueditor自動(dòng)將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里面手動(dòng)添加！另外也有人遇到類似的情況解決辦法，這里可以參考：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" id="userMeun" 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" id="articleMenu" 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" id="glyphicnMenu" 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" id="serveMenu" 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" id="ArticleMenu" 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>

js里面的代碼如下：

// 工具欄交互樣式
$scope.titleStyle = $scope.titleIcon = $scope.titleYouxia = $scope.titleServe = $titleArticle=false;
$scope.toggle = function(style){
$scope[style] =! $scope[style];
}

ng控制的手風(fēng)琴效果，簡單輕便，代碼量少。

效果如下：

樣式寫好以后就是插入到編輯器中，那么如何插入呢？這里有兩種，直接插，和根據(jù)搜索之后的文章進(jìn)行插入。直接插入的話比較簡單。

$scope.insertHtml = function (type, item) {
if (type === 'titles' || type === 'imgs') {
editor.execCommand('insertHtml', item.html);
}

插入之后的效果如下：

當(dāng)然我們這樣做有什么用呢？主要是利用編輯器里面的內(nèi)容，利用ng數(shù)據(jù)綁定，反映到app上，從而制作app的文章編輯界面。

搜索的功能制作

數(shù)據(jù)自然是從api里面獲取，ng如何獲取api里的數(shù)據(jù)呢？我們來看看，主要是利用http,獲取數(shù)據(jù)，然后利用then方法進(jìn)行回調(diào)，得到 http,獲取數(shù)據(jù)，然后利用then方法進(jìn)行回調(diào)，得到scope.data的數(shù)據(jù)。

angular.module('service')
.service('ArticleService', function ($http) {
return {searchArticle: function(title){ return $http.get('api/article/search',{ data: { title:title } }); } }; });

這里我們聲明了ArticleService，并給它返回了api數(shù)據(jù)，那么我們將該依賴注入要調(diào)用的頁面即可調(diào)用其方法。還是看下代碼：通常服務(wù)調(diào)用

API返回的數(shù)據(jù)放在一個(gè)文件夾里面而控制數(shù)據(jù)的控制器單獨(dú)放在一個(gè)文件夾里面，那么我們來看下控制器里是如何回調(diào)api的數(shù)據(jù)。

angular.module('article.controllers')
.controller('serviceCtrl', function ($scope, $rootScope, $filter, $timeout, $state, $stateParams, ContentService,, ArticleService, type) {

注意，你需要把ArticleService注入到控制器里面，然后才能回調(diào)數(shù)據(jù)。怎么回調(diào)數(shù)據(jù)呢？看下面的代碼：

var arcfullSearch={
text: '',
result: [],
selected: [], //選擇后的數(shù)據(jù)先存入數(shù)組
beginSearch: function () {
var self = this;
var text = self.text.trim();
if(!text) return;
ArticleService.searchArticle(text).then(
function (data){ 
//獲取得到數(shù)據(jù) 第二個(gè)data表示獲取數(shù)組里的內(nèi)容，第一個(gè)是傳進(jìn)來的參數(shù) 
self.result = data.data;//獲取數(shù)據(jù)
}, function (err) {
console.log(err);
}); 
},
};

OK，我們成功的回調(diào)到了函數(shù)數(shù)據(jù)。關(guān)于搜索部分，下面總結(jié)下不清楚的知識點(diǎn)。

總結(jié)知識點(diǎn)

1.如何將數(shù)組變成字符串的寫法

2.關(guān)于replace替換為函數(shù)的用法

ECMAScript規(guī)定，replace（）方法的參數(shù)replacement可以是函數(shù)也可以是字符串。在這種情況下，每個(gè)匹配都調(diào)用該函數(shù)，它返回的字

符串將替換文本使用。function回調(diào)函數(shù)返回的第一個(gè)參數(shù)表示匹配到的字符，第二個(gè)以及往后都是匹配到的分組數(shù)據(jù)。來看下代碼。

3.關(guān)于[p.slice(0,index)][p.slice(index+1)]是什么鬼？調(diào)試一下就知道了。

再來看待合成代碼就明白了什么意思。

var arr = serve.map(function (xx) {
return item.html.replace(/{{([\w\.]+?)}}/gi, function (match, p) {
var index = p.indexOf('.'); 
if (index > 0) {
return formatField(xx[p.slice(0, index)][p.slice(index+1)]);
} else {
return formatField(xx[p]);
}
}); 
});

4.關(guān)于定時(shí)器setTimeout的原理,先來看看代碼