欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJs定制樣式插入到ueditor中的問題小結(jié)

 更新時間:2016年08月01日 09:38:43   作者:婷風  
這篇文章主要介紹了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庫中進行單元測試的方法

    這篇文章主要介紹了在JavaScript的AngularJS庫中進行單元測試的方法,主要針對AngularJS中的控制器相關,需要的朋友可以參考下
    2015-06-06
  • Angular企業(yè)級開發(fā)——MVC之控制器詳解

    Angular企業(yè)級開發(fā)——MVC之控制器詳解

    本篇文章主要介紹了Angular企業(yè)級開發(fā)——MVC之控制器詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • AngularJS讀取JSON及XML文件的方法示例

    AngularJS讀取JSON及XML文件的方法示例

    這篇文章主要介紹了AngularJS讀取JSON及XML文件的方法,涉及AngularJS針對xml及json格式文件數(shù)據(jù)的讀取、遍歷、輸出等相關操作技巧,需要的朋友可以參考下
    2017-05-05
  • 使用AngularJS來實現(xiàn)HTML頁面嵌套的方法

    使用AngularJS來實現(xiàn)HTML頁面嵌套的方法

    這篇文章主要介紹了使用AngularJS來實現(xiàn)HTML頁面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下
    2015-06-06
  • Angular簡單驗證功能示例

    Angular簡單驗證功能示例

    這篇文章主要介紹了Angular簡單驗證功能,涉及AngularJS事件響應、正則判定、頁面元素屬性動態(tài)修改等相關操作技巧,需要的朋友可以參考下
    2017-12-12
  • AngularJS中的DOM操作用法分析

    AngularJS中的DOM操作用法分析

    這篇文章主要介紹了AngularJS中的DOM操作,較為詳細的分析了AngularJS針對DOM操作的原理、實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下
    2016-11-11
  • 詳解AngularJS中ng-src指令的使用

    詳解AngularJS中ng-src指令的使用

    這篇文章給大家詳細介紹了AngularJS中ng-src指令的使用,對大家學習AngularJS具有一定參考價值,有需要的朋友們可以參考借鑒。
    2016-09-09
  • Angular的FormArray和模態(tài)框結(jié)合使用實例詳解

    Angular的FormArray和模態(tài)框結(jié)合使用實例詳解

    這篇文章主要為大家介紹了Angular的FormArray和模態(tài)框結(jié)合使用實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • Angular2從搭建環(huán)境到開發(fā)步驟詳解

    Angular2從搭建環(huán)境到開發(fā)步驟詳解

    本文的內(nèi)容主要是想幫助那些想學習Angular2的朋友們,因為我自己在玩Angular2時碰到了不少坑,而且Angular2語法一直處于變化中,讓人很頭疼。不過也怪不了Anguar2,因為它現(xiàn)在是處于并長期處于alpha階段,下面就通過本文來學習Angular2的搭建環(huán)境和開發(fā)吧。
    2016-10-10
  • 對angularJs中自定義指令replace的屬性詳解

    對angularJs中自定義指令replace的屬性詳解

    今天小編就為大家分享一篇對angularJs中自定義指令replace的屬性詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10

最新評論