편집자의 스타일을 사용자 정의하는 과정에서 발생한 문제, 주로 편집기의 보조 개발 인터페이스 및 Angular로 스타일을 사용자 정의하는 과정에서 발생하는 문제를 요약합니다. 많은 문제가 있습니다. 마지막으로 **의 도움으로 완료되었습니다. 이전 버전과 새 버전 사이에는 여전히 상호 작용이 없지만 어렵지 않습니다. 다음은 문제를 개별적으로 설명합니다.
ueditor의 개발
공식 웹 사이트에서 모든 버전을 다운로드하여 http://euditor.baidu.com/website/download.html 다운로드 후 공식 웹 사이트의 구성에 따라 사용할 수 있습니다. 문서 주소 : http://fex.baidu.com/euditor/ ueditor 2 차 개발에는 많은 문제가 있으며 여기에 나열되어 있습니다.
1. ueditor는 div 태그를 P 태그로 자동 필터링합니다.
맞춤형 스타일 프로세스 동안, 나는 모든 div가 필터링되고 UNP 태그가 발견 된 것을 발견했습니다. 온라인에서 많은 정보를 찾았지만 그 중 어느 것도 유용하지 않았습니다. 나중에, 나는 다른 버전의 ueditor의 구성이 다르다는 것을 보았습니다. 여기에 내 솔루션을 작성했습니다. ueditor.config.js 구성 파일을 열고 다음 코드를 추가합니다.
, aleastDivTranStop : false
창에 수동으로 추가됩니다. 또한 일부 사람들은 비슷한 상황을 겪었으며 http://www.cnblogs.com/olive116/p/3464495.html을 참조 할 수 있습니다.
2. 사용자 정의 스타일을 편집기에 삽입하는 방법은 무엇입니까?
인터페이스는 편집기에 제공됩니다. 살펴 보겠습니다.
함수 inserthtml () {var value = prompt ( 'html code', ''); ue.getEditor ( 'editor'). execcommand ( 'inserthtml', value)}}그렇다면 우리 자신의 프로젝트 에서이 인터페이스를 어떻게 사용합니까? 먼저 편집기를 실현해야합니다. 일반적으로 ue.geteditor ()를 사용하여 직접 인스턴스를 얻습니다.
// 팩토리 메소드 getEditor를 사용하여 편집기 인스턴스를 작성하고 참조하십시오. 특정 폐쇄에서 편집기를 참조하는 경우 UE.getEditor ( 'Editor')를 직접 호출하여 사용하기 전에 관련 인스턴스를 얻을 수 있습니다. 방법을 호출하려면 편집자를 소개해야합니다.
<script src = "libs/ueditor/ueditor.config.js"> </script> <script src = "libs/ueditor/ueditor.all.min.js"> </script>
Angular 프로젝트에서 편집기 예제를 만듭니다. 편집자는 즉시 준비된 준비 방법을 제공합니다.
// 편집기의 실제 열을 작성하여 $ scope.ready = function (ueditor) {window.editor = ueditor;};이제 편집기 인스턴스를 사용할 수 있습니다. 다음으로 맞춤형 스타일을 살펴 보겠습니다.
맞춤형 스타일
우리가 쓴 아코디언 메뉴의 스타일을 살펴 보겠습니다. 다운로드 주소 : https://github.com/foreverjiangting/set-menu/tree/mas 글을 쓰는 방법을 봅시다 :
<!-도구 모음 추가-> <div> <h4> 도구 모음 </h4> <!-사이드 바 컨텐츠-> <div> <a ng-click = "토글 ( 'titlestyle')"> <span> </span> home </a> <ul ng-hide = "titlestyle"id = "usermeun"> <li ng-repeat = "제목. ng-click = "inserthtml ( 'titles', title)"> <a> {{title.name}} </a> </li> </li> </ul> </ul> <toggle ( 'titleicon') "> <span> </span> icon </a> <ul ng-hide ="titlicicon "id ="articlemenu "> sources.imgs "ng-click ="inserthtml ( 'imgs', img) "> <a> <img ng-src ="{{img.url}} "> </a> </li> </ul> <a ng-click ="Togggle ( 'titleyouxia') "> lifes </</a> ng-hide = "titleyouxia"id = "glyphicnmenu"> <li ng-repeat = "yx in sources.yxs"ng-click = "inserthtml ( 'yxs', yx)"> <a> {{yx.name} </a> </li> </ul> <a ng-click = "토글 ( 'titleserve')"> <span> </span> 메시지 보드 </a> <ul ng-hide = "titleserve"id = "servemenu"> <li ng-repeat = "ser in sources.sers"ng-click = "inserthtml ( 'sers', ser) "> <a> {{ser.name}} </a> </li> </ul> <a ng-click ="tovlegle ( 'titlearticle') ")") "> <span> </span> 권장 기사 </a> <ul ng-hide ="titlearticle "id ="articlemenu "> arc in arc in arcs." ng-click = "inserthtml ( 'arcs', arc)"> <a> {{arc.article}} </a> </li> </ul> </div> <!-내용의 테마-> </div>JS의 코드는 다음과 같습니다.
// 도구 모음 상호 작용 스타일 $ scope.titlestyle = $ scope.titleicon = $ scope.titleyouxia = $ scope.titleserve = $ titLequice = false; $ scope.toggle = function (style) {$ scope [style] =! $ SCOPE [스타일];}NG에 의해 제어되는 아코디언 효과는 단순하고 가볍고 소량의 코드입니다.
효과는 다음과 같습니다.
스타일이 작성되면 편집기에 삽입됩니다. 그래서 삽입하는 방법? 여기에는 두 가지 유형이 있습니다. 직접 삽입하고 검색 후 기사에 따라 삽입하십시오. 직접 삽입하는 것이 더 쉽습니다.
$ scope.inserthtml = function (type, item) {if (type === 'titles'|| type === 'imgs') {editor.execcommand ( 'inserthtml', item.html);}삽입 후 효과는 다음과 같습니다.
물론, 이것을 사용하는 것은 무엇입니까? 주로 편집기의 컨텐츠를 사용하고 NG 데이터 바인딩을 사용하여 앱에이를 반영하여 앱의 기사 편집 인터페이스를 만듭니다.
검색 기능 제작
데이터는 자연스럽게 API에서 얻습니다. API에서 데이터를 얻는 방법? 살펴 보겠습니다. 우리는 주로 HTTP를 사용하여 데이터를 얻은 다음 당시 메소드를 사용하여 콜백을 사용하고 HTTP를 가져오고 데이터를 얻은 다음 그 당 메소드를 사용하여 콜백을 사용하여 scope.data 데이터를 얻습니다.
Angular.Module ( 'service'). service ( 'articleService', function ($ http) {return {searchArticle : function (title) {return $ http.get ( 'api/article/search', {title : title});}};});여기서 articleService를 선언하고 API 데이터를 반환하므로 종속성을 페이지에 주입하여 메소드를 호출합니다. 코드를 살펴 보겠습니다 : 일반적으로 서비스 호출
API가 반환 한 데이터는 폴더에 배치되며 데이터를 제어하는 컨트롤러는 폴더에 배치됩니다. API 데이터가 컨트롤러에서 어떻게 호출되는지 살펴 보겠습니다.
Angular.Module ( 'article.controllers'). 컨트롤러 ( 'servicectrl', function ($ scope, $ rootscope, $ filter, $ timeout, $ state, $ stateparams, contentservice, articleService, type) {데이터를 다시 호출하기 전에 ArticleService를 컨트롤러에 주입해야합니다. 데이터를 다시 호출하는 방법? 다음 코드를보십시오.
var arcfullsearch = {text : '', result : [], selected : [], // 선택한 데이터를 먼저 배열 시작에 저장했습니다 : function () {var self = this; var text = self.text.trim (); if (! text) return; articleservice.searcharticle (text). self.result = data.data; // data get}, function (err) {console.log (err);}); },};좋아, 우리는 기능 데이터를 성공적으로 콜백합니다. 검색 섹션과 관련하여 다음은 알려지지 않은 지식 포인트의 요약입니다.
지식 요점의 요약
1. 배열을 문자열에 쓰는 방법
2. 교체 대체 사용과 관련하여 대체 기능으로
ecmascript는 대체 () 메소드의 매개 변수 대체가 함수 또는 문자열 일 수 있다고 규정합니다. 이 경우 각 경기는 함수를 호출하고 단어가 반환됩니다.
문자열은 텍스트 대신 사용됩니다. 함수 콜백 함수에 의해 반환 된 첫 번째 매개 변수는 일치하는 문자를 나타내며, 두 번째 및 이후 일치하는 패킷 데이터를 나타냅니다. 코드를 살펴 보겠습니다.
3. 도대체 [p.slice (0, index)] [p.slice (index+1)]는 무엇입니까? 디버깅 후 알게 될 것입니다.
합성 코드의 의미를 봅시다.
var arr = serv.map (function (xx) {return item.html.replace (/{([/w /..um ?)) }/ gi, function (match, p) {var index = p.indexof ( '.'); if (index> 0) {return formatfield (xx (0, index)] [p.slice (+1)); Formatfield (xx [p]);});4. 타이머 settimeout의 원리와 관련하여 먼저 코드를 살펴 보겠습니다.
출력 -1 인 이유는 무엇입니까? 먼저 원칙 settimeout ()를 살펴 보겠습니다.
settimeout ()는 코드를 한 번만 실행합니다. 여러 번 호출하려면 setinterval ()을 사용하거나 코드 자체가 settimeout ()을 다시 호출하도록하십시오.
Settimeout은 특정 작업을 수행하기 전에 일정 기간 동안 지연하는 데 사용됩니다. 즉, 로딩 후 지정된 시간이 지연된 후에는 표현이 한 번 실행되며 한 번만 실행됩니다.
settimeout (코드, 지연 시간);
지연 시간은 당신이 기대하는 시간이 아닙니다. 브라우저마다 지연 시간이 다릅니다. 위의 예를 들어보십시오. 즉, 지연 시간은 위의 0이 아닙니다. 비교
다시 말해, Settimeout은 한 번만 실행되지만 시간은 0이 아닙니다. 몇 초 지연이 확실하지 않습니다. 그렇다면 왜 그것이 -1로 보이는지는 놀라운 일이 아닙니다. 프로그램을 분석합시다.
i = 3 인 경우 (3) 후 2로 줄어들고 설정 타임 아웃을 실행합니다.
i = 2 일 때 (2) 후 1로 줄어들고 설정 타임 아웃을 실행합니다.
i = 1 일 때 (0) 이후에 2로 줄이고 설정 타임 아웃이 실행됩니다.
i = 0이면 (0) 후에는 -1로 감소합니다. 현재 프로그램은 종료되지만 Settimeout을 설정하기위한 시간 간격은 실행을 이해하지 못하며 스레드의 실행 큐에 삽입되어 I Waiting For I
-1이되면 이전 3 개의 설정 타임 아웃이 실행되고 현재는 -1로 변경되었으므로 출력은 -1입니다. 현재 인쇄 된 콘솔은 이전 콘솔에서 인쇄됩니다.
Settimeout은 비동기 코드이며, 이는 Settimeout (FN, 100)을 작성한다고해서 FN이 100 밀리 초 직후에 실행되며 지연이 더 길어질 수 있음을 의미하지는 않습니다. 모두
비동기 이벤트 (타이머 또는 xmlhttprequest 포함)는 프로그램 실행 중에 무료가있는 경우에만 실행됩니다.
위의 것은 AngularJS 사용자 정의 스타일을 편집자가 소개 한 ueditor에 삽입하는 문제의 요약입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!