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

ueditor的開(kāi)發(fā)

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

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

在定制樣式過(guò)程中，發(fā)現(xiàn)div全部被過(guò)濾未p標(biāo)簽，網(wǎng)上找了好些資料，但都沒(méi)用，后來(lái)看到有大神寫(xiě)到，不同版本的ueditor配置不一樣，這里寫(xiě)下我的解決辦法是：打開(kāi)ueditor.config.js配置文件，添加下面的代碼：

, allowDivTransToP: false 

注意是在window.UEDIROE_CONFIG里面手動(dòng)添加！另外也有人遇到類(lèi)似的情況解決辦法，這里可以參考：http://www.cnblogs.com/Olive116/p/3464495.html

2.如何把定制的樣式插入到編輯器里面呢？

在編輯器里面提供了接口，我們來(lái)看看。

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

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

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

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

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

ng定制的樣式

先來(lái)看下，我們用手寫(xiě)的手風(fēng)琴菜單樣式。下載地址：https://github.com/foreverjiangting/set-menu/tree/master/menu 這里使用的交互使用了data-toggle="collapse"，但和ng有沖突，所以需要用ng來(lái)控制交互。我們來(lái)看看怎么寫(xiě)：

<!-- 添加工具欄 -->
<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>首頁(yè)</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)琴效果，簡(jiǎn)單輕便，代碼量少。

效果如下：

樣式寫(xiě)好以后就是插入到編輯器中，那么如何插入呢？這里有兩種，直接插，和根據(jù)搜索之后的文章進(jìn)行插入。直接插入的話(huà)比較簡(jiǎ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ù)呢？我們來(lái)看看，主要是利用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ù)，那么我們將該依賴(lài)注入要調(diào)用的頁(yè)面即可調(diào)用其方法。還是看下代碼：通常服務(wù)調(diào)用

API返回的數(shù)據(jù)放在一個(gè)文件夾里面而控制數(shù)據(jù)的控制器單獨(dú)放在一個(gè)文件夾里面，那么我們來(lái)看下控制器里是如何回調(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)來(lái)的參數(shù) 
self.result = data.data;//獲取數(shù)據(jù)
}, function (err) {
console.log(err);
}); 
},
};

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

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

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

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

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

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

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

再來(lái)看待合成代碼就明白了什么意思。

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的原理,先來(lái)看看代碼

為什么輸出的是－1呢？我們先來(lái)看下原理setTimeout()

setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請(qǐng)使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。

setTimeout 運(yùn)用在延遲一段時(shí)間，再進(jìn)行某項(xiàng)操作。即在載入后延遲指定時(shí)間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次。

setTimeout(代碼,延遲時(shí)間);

該延遲時(shí)間并不是你期望的時(shí)間，不同的瀏覽器，延遲時(shí)間不一樣。拿上面例子來(lái)看，也就是說(shuō)延遲時(shí)間并不是上面的0。對(duì)比來(lái)看

也就是說(shuō)setTimeout只執(zhí)行一次，但時(shí)間并不是0，具體為多少秒延遲，不確定。那么就不奇怪，為什么出現(xiàn)的為－1了。我們來(lái)分析下該程序，

當(dāng)i=3時(shí)，while（3）后，i減為2，執(zhí)行一個(gè)setTimeout

當(dāng)i=2時(shí)，while（2）后，i減為1，執(zhí)行一個(gè)setTimeout

當(dāng)i=1時(shí)，while（0）后，i減為2，執(zhí)行一個(gè)setTimeout

當(dāng)i=0時(shí)，while（0）后，i減為－1，此時(shí)程序結(jié)束，但設(shè)置setTimeout的時(shí)間間隔 為0 不會(huì)理解 執(zhí)行的，會(huì)插入到線程的執(zhí)行隊(duì)列中，等到i

變?yōu)椋?時(shí)候，才會(huì)執(zhí)行前面的三個(gè)setTimeout，而此時(shí)i已經(jīng)變?yōu)椋?了，所以，輸出為－1.此時(shí)打印的console是之前那個(gè)console打印出來(lái)的

setTimeout是異步代碼，也就是說(shuō)這樣寫(xiě)setTimeout(fn, 100)并不代表fn肯定在100毫秒之后馬上就執(zhí)行，延遲很可能會(huì)更長(zhǎng)。因?yàn)樗械?br />

異步事件（包括計(jì)時(shí)器、或者一個(gè) XMLHttpRequest 完成）僅僅當(dāng)程序執(zhí)行期間有空閑的時(shí)候才會(huì)執(zhí)行，不是你規(guī)定了什么時(shí)候就什么時(shí)候執(zhí)行。

以上所述是小編給大家介紹的AngularJs定制樣式插入到ueditor中的問(wèn)題小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！