AngularJs定制樣式插入到ueditor中的問題小結(jié)
總結(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自動(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é)下不清楚的知識(shí)點(diǎn)。
總結(jié)知識(shí)點(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的原理,先來看看代碼
為什么輸出的是-1呢?我們先來看下原理setTimeout()
setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用,請使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。
setTimeout 運(yùn)用在延遲一段時(shí)間,再進(jìn)行某項(xiàng)操作。即在載入后延遲指定時(shí)間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次。
setTimeout(代碼,延遲時(shí)間);
該延遲時(shí)間并不是你期望的時(shí)間,不同的瀏覽器,延遲時(shí)間不一樣。拿上面例子來看,也就是說延遲時(shí)間并不是上面的0。對比來看
也就是說setTimeout只執(zhí)行一次,但時(shí)間并不是0,具體為多少秒延遲,不確定。那么就不奇怪,為什么出現(xiàn)的為-1了。我們來分析下該程序,
當(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打印出來的
setTimeout是異步代碼,也就是說這樣寫setTimeout(fn, 100)并不代表fn肯定在100毫秒之后馬上就執(zhí)行,延遲很可能會(huì)更長。因?yàn)樗械?br />
異步事件(包括計(jì)時(shí)器、或者一個(gè) XMLHttpRequest 完成)僅僅當(dāng)程序執(zhí)行期間有空閑的時(shí)候才會(huì)執(zhí)行,不是你規(guī)定了什么時(shí)候就什么時(shí)候執(zhí)行。
以上所述是小編給大家介紹的AngularJs定制樣式插入到ueditor中的問題小結(jié),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法示例
- 詳解AngularJS ng-class樣式切換
- AngularJS表格樣式簡單設(shè)置方法示例
- Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
- Angular5給組件本身的標(biāo)簽添加樣式class的方法
- Angular使用動(dòng)態(tài)加載組件方法實(shí)現(xiàn)Dialog的示例
- angularJS實(shí)現(xiàn)動(dòng)態(tài)添加,刪除div方法
- AngularJS動(dòng)態(tài)添加數(shù)據(jù)并刪除的實(shí)例
- AngularJS實(shí)現(xiàn)動(dòng)態(tài)切換樣式的方法分析
相關(guān)文章
在JavaScript的AngularJS庫中進(jìn)行單元測試的方法
這篇文章主要介紹了在JavaScript的AngularJS庫中進(jìn)行單元測試的方法,主要針對AngularJS中的控制器相關(guān),需要的朋友可以參考下2015-06-06Angular企業(yè)級(jí)開發(fā)——MVC之控制器詳解
本篇文章主要介紹了Angular企業(yè)級(jí)開發(fā)——MVC之控制器詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02使用AngularJS來實(shí)現(xiàn)HTML頁面嵌套的方法
這篇文章主要介紹了使用AngularJS來實(shí)現(xiàn)HTML頁面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下2015-06-06Angular的FormArray和模態(tài)框結(jié)合使用實(shí)例詳解
這篇文章主要為大家介紹了Angular的FormArray和模態(tài)框結(jié)合使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Angular2從搭建環(huán)境到開發(fā)步驟詳解
本文的內(nèi)容主要是想幫助那些想學(xué)習(xí)Angular2的朋友們,因?yàn)槲易约涸谕鍭ngular2時(shí)碰到了不少坑,而且Angular2語法一直處于變化中,讓人很頭疼。不過也怪不了Anguar2,因?yàn)樗F(xiàn)在是處于并長期處于alpha階段,下面就通過本文來學(xué)習(xí)Angular2的搭建環(huán)境和開發(fā)吧。2016-10-10