AngularJs定制樣式插入到ueditor中的問題小結(jié)
總結(jié)一下自己給編輯器定制樣式的過程中所遇到的問題,主要是編輯器的二次開發(fā)接口,以及用angular定制樣式,問題不少,終于在**的幫助下,完成了,還剩下老版本和新版本的交互沒有弄好,不過不難。下面分別講解問題。
ueditor的開發(fā)
你可以在官網(wǎng)上下載任意版本,進行使用即可:http://ueditor.baidu.com/website/download.html 下載后按照官網(wǎng)上的配置就可以使用。文檔地址:http://fex.baidu.com/ueditor/ 關于ueditor二次開發(fā)問題還真不少,這里列出來。
1.ueditor自動將div標簽過濾變?yōu)閜標簽
在定制樣式過程中,發(fā)現(xiàn)div全部被過濾未p標簽,網(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) }
那么如何在我們自己的項目中使用該接口呢?首先要實列化編輯器,通常是直接使用UE.getEditor()來得到實例。
//使用工廠方法getEditor創(chuàng)建和引用編輯器實例,如果在某個閉包下引用該編輯器,直接調(diào)用UE.getEditor('editor')就能拿到相關的實例使用之前我們需要先把該編輯器引入進來,才能調(diào)用其方法。
<script src="libs/ueditor/ueditor.config.js"></script> <script src="libs/ueditor/ueditor.all.min.js"></script>
在我們的angular的項目中創(chuàng)建編輯器實例如下,編輯器提供ready的方法來實例化:
// 創(chuàng)建編輯器的實列 $scope.ready = function (ueditor) { window.editor = ueditor; };
OK,我們現(xiàn)在就可以使用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" 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>圖標</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控制的手風琴效果,簡單輕便,代碼量少。
效果如下:
樣式寫好以后就是插入到編輯器中,那么如何插入呢?這里有兩種,直接插,和根據(jù)搜索之后的文章進行插入。直接插入的話比較簡單。
$scope.insertHtml = function (type, item) { if (type === 'titles' || type === 'imgs') { editor.execCommand('insertHtml', item.html); }
插入之后的效果如下:
當然我們這樣做有什么用呢?主要是利用編輯器里面的內(nèi)容,利用ng數(shù)據(jù)綁定,反映到app上,從而制作app的文章編輯界面。
搜索的功能制作
數(shù)據(jù)自然是從api里面獲取,ng如何獲取api里的數(shù)據(jù)呢?我們來看看,主要是利用http,獲取數(shù)據(jù),然后利用then方法進行回調(diào),得到 http,獲取數(shù)據(jù),然后利用then方法進行回調(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)用其方法。還是看下代碼:通常服務調(diào)用
API返回的數(shù)據(jù)放在一個文件夾里面而控制數(shù)據(jù)的控制器單獨放在一個文件夾里面,那么我們來看下控制器里是如何回調(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ù) 第二個data表示獲取數(shù)組里的內(nèi)容,第一個是傳進來的參數(shù) self.result = data.data;//獲取數(shù)據(jù) }, function (err) { console.log(err); }); }, };
OK,我們成功的回調(diào)到了函數(shù)數(shù)據(jù)。關于搜索部分,下面總結(jié)下不清楚的知識點。
總結(jié)知識點
1.如何將數(shù)組變成字符串的寫法
2.關于replace替換為函數(shù)的用法
ECMAScript規(guī)定,replace()方法的參數(shù)replacement可以是函數(shù)也可以是字符串。在這種情況下,每個匹配都調(diào)用該函數(shù),它返回的字
符串將替換文本使用。function回調(diào)函數(shù)返回的第一個參數(shù)表示匹配到的字符,第二個以及往后都是匹配到的分組數(shù)據(jù)。來看下代碼。
3.關于[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.關于定時器setTimeout的原理,先來看看代碼
為什么輸出的是-1呢?我們先來看下原理setTimeout()
setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用,請使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。
setTimeout 運用在延遲一段時間,再進行某項操作。即在載入后延遲指定時間后,去執(zhí)行一次表達式,僅執(zhí)行一次。
setTimeout(代碼,延遲時間);
該延遲時間并不是你期望的時間,不同的瀏覽器,延遲時間不一樣。拿上面例子來看,也就是說延遲時間并不是上面的0。對比來看
也就是說setTimeout只執(zhí)行一次,但時間并不是0,具體為多少秒延遲,不確定。那么就不奇怪,為什么出現(xiàn)的為-1了。我們來分析下該程序,
當i=3時,while(3)后,i減為2,執(zhí)行一個setTimeout
當i=2時,while(2)后,i減為1,執(zhí)行一個setTimeout
當i=1時,while(0)后,i減為2,執(zhí)行一個setTimeout
當i=0時,while(0)后,i減為-1,此時程序結(jié)束,但設置setTimeout的時間間隔 為0 不會理解 執(zhí)行的,會插入到線程的執(zhí)行隊列中,等到i
變?yōu)椋?時候,才會執(zhí)行前面的三個setTimeout,而此時i已經(jīng)變?yōu)椋?了,所以,輸出為-1.此時打印的console是之前那個console打印出來的
setTimeout是異步代碼,也就是說這樣寫setTimeout(fn, 100)并不代表fn肯定在100毫秒之后馬上就執(zhí)行,延遲很可能會更長。因為所有的
異步事件(包括計時器、或者一個 XMLHttpRequest 完成)僅僅當程序執(zhí)行期間有空閑的時候才會執(zhí)行,不是你規(guī)定了什么時候就什么時候執(zhí)行。
以上所述是小編給大家介紹的AngularJs定制樣式插入到ueditor中的問題小結(jié),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
在JavaScript的AngularJS庫中進行單元測試的方法
這篇文章主要介紹了在JavaScript的AngularJS庫中進行單元測試的方法,主要針對AngularJS中的控制器相關,需要的朋友可以參考下2015-06-06Angular企業(yè)級開發(fā)——MVC之控制器詳解
本篇文章主要介紹了Angular企業(yè)級開發(fā)——MVC之控制器詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02使用AngularJS來實現(xiàn)HTML頁面嵌套的方法
這篇文章主要介紹了使用AngularJS來實現(xiàn)HTML頁面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下2015-06-06Angular的FormArray和模態(tài)框結(jié)合使用實例詳解
這篇文章主要為大家介紹了Angular的FormArray和模態(tài)框結(jié)合使用實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11Angular2從搭建環(huán)境到開發(fā)步驟詳解
本文的內(nèi)容主要是想幫助那些想學習Angular2的朋友們,因為我自己在玩Angular2時碰到了不少坑,而且Angular2語法一直處于變化中,讓人很頭疼。不過也怪不了Anguar2,因為它現(xiàn)在是處于并長期處于alpha階段,下面就通過本文來學習Angular2的搭建環(huán)境和開發(fā)吧。2016-10-10