Ich werde die Probleme zusammenfassen, die ich beim Anpassen des Stils für den Editor, hauptsächlich der Sekundärentwicklungsschnittstelle des Editors und dem Anpassen des Stils mit Angular, zusammenfassen werde. Es gibt viele Probleme. Schließlich wurde es mit Hilfe von ** fertiggestellt. Es gibt immer noch keine Interaktion zwischen der alten Version und der neuen Version, aber es ist nicht schwierig. Das Folgende erklärt die Probleme getrennt.
Entwicklung des Ueditors
Sie können jede Version auf der offiziellen Website herunterladen und sie verwenden: http://ueditor.baidu.com/website/download.html nach dem Herunterladen. Sie können sie gemäß der Konfiguration auf der offiziellen Website verwenden. Dokumentenadresse: http://fex.baidu.com/ueditor/ Es gibt eine Menge Probleme mit der Sekundärentwicklung von Ueditor, und sie sind hier aufgeführt.
1. Ueditor filtert das Div -Tag automatisch in ein P -Tag
Während des kundenspezifischen Stilprozesses stellte ich fest, dass alle Divs gefiltert wurden und UNP -Tags gefunden wurden. Ich fand viele Informationen online, aber keiner von ihnen war nützlich. Später sah ich einen Master, der schrieb, dass die Konfiguration verschiedener Versionen von Ueditor unterschiedlich ist. Hier schrieb ich meine Lösung: Öffnen Sie die Konfigurationsdatei ueditor.config.js und fügen Sie den folgenden Code hinzu:
, erlauben DIVTRORNSTOP: Falsch
Beachten Sie, dass es manuell im Fenster hinzugefügt wird. Uediroe_config! Darüber hinaus haben einige Menschen ähnliche Situationen begegnet und können sich unter http://www.cnblogs.com/olive116/p/3464495.html beziehen
2. Wie kann man angepasste Stile in den Editor einfügt?
Die Schnittstelle ist im Editor bereitgestellt. Lassen Sie uns einen Blick darauf werfen.
Funktion INSERTHTML () {var value = fordert ('HTML -Code einfügen', '');Wie verwenden Sie diese Schnittstelle in unserem eigenen Projekt? Zunächst müssen Sie den Editor erkennen, normalerweise verwenden Sie ue.geteditor () direkt, um die Instanz zu erhalten.
// Verwenden Sie den Factory -Methode Geteditor, um eine Editorinstanz zu erstellen und zu verweisen. Wenn Sie unter einer bestimmten Schließung auf den Editor verweisen, können Sie UE.GetEtitor ("Editor" direkt anrufen, um die relevante Instanz vor der Verwendung zu erhalten. Wir müssen den Editor vorstellen, um seine Methode aufzurufen.
<script src = "libs/ueditor/ueditor.config.js"> </script> <script src = "libs/ueditor/ueditor.all.min.js"> </script>
Erstellen Sie ein Editor -Beispiel in unserem Winkelprojekt. Der Editor bietet Bereitschaftsmethoden zur Instanziierung:
// Erstellen Sie die tatsächliche Spalte des Editors $ scope.ready = function (ueditor) {window.editor = ueditor;};Ok, wir können jetzt die Editor -Instanz verwenden. Schauen wir uns als nächstes die benutzerdefinierten Stile an.
Benutzerdefinierter Stil
Schauen wir uns den Stil des Akkordeonmenüs an, den wir in der Hand geschrieben haben. Download-Adresse: https://github.com/foreverjianging/set-menu/tree/master/menu Die hier verwendete Interaktion verwendet data-toggle = "collapse", aber es steht in Konflikt mit NG, sodass NG verwendet werden muss, um die Interaktion zu steuern. Mal sehen, wie man schreibt:
<!-Symbolleiste hinzufügen-> <div> <h4> Symbolleiste </h4> <!-Sidebar-Inhalt-> <div> <a ng-klick = "Toggle ('TitLestyle')"> <span> Home </a> <ul ng-hide = "TitLestyle" id = "Userermeun"> <li ng-repepe = "title" usermein "> <li ng-repepe =" title "usermein"> <li ng-repepe = "title in Sources". ng-klick = "INSERTHTML ('Titel', Titel)"> <a> {{title.name}} </a> </li> </ul> <a ng-klick = "Toggle ('titlesicon')"> <span> </span> icon </ul ng-hide = "titlesicon" id = "id =" id = "id =" id = "id" id = "id =" id = "id =" id "id" id " sources.imgs" ng-click="insertHtml('imgs', img)"><a><img ng-src="{{img.url}}"></a></li></ul><a ng-click="toggle('titleYouxia')"><span>Life</span></a><ul ng-hide="titleYouxia" id = "glyphicnmenu"> <li ng-repeat = "yx in Quellen ng-hide = "titleServe" id = "serveMenu"> <li ng-repeat = "ser in Quellen.Sers" ng-klick = "INSERTHTML ('sers', ser)"> <a> {{{ser.name}} </a> </li> </ul> <a ng-klick = "togle ('togle (' togle ('togle (' togle ('togle)") ")") ")") ")") ")") ")") ")") ")") "). Artikel </a> <ul ng-hide = "titlearticle" id = "articlemenu"> <li ng-repeat = "arc in Quellen.Arcs" ng-klick = "Inserthtml ('Arcs', Arc)" endet-> </div>Der Code in JS lautet wie folgt:
// Symbolleiste Interaktionsstil $ scope.titLestyle = $ scope.titleieicon = $ scope.titleyouxia = $ scope.titleServe = $ titresedicle = false; $ scope.toggle = function (style) {$ scope [style] =! $ Scope [Stil];}Der von NG kontrollierte Akkordeon -Effekt ist einfach und leicht, mit einer geringen Menge an Code.
Die Effekte sind wie folgt:
Nachdem der Stil geschrieben wurde, wird er in den Herausgeber eingefügt. Wie füge ich es ein? Hier gibt es zwei Arten von Dingen: direkt einfügen und nach den Artikeln nach der Suche einfügen. Es ist einfacher, direkt einzulegen.
$ scope.inSerthtml = Funktion (Typ, Element) {if (type === 'titles' || type === 'imgs') {editor.execcommand ('Inserthtml', item.html);};};};Der Effekt nach dem Einfügen ist wie folgt:
Was nutzt dies natürlich? Es wird hauptsächlich den Inhalt im Editor verwendet und NG -Datenbindung verwendet, um sie in der App zu reflektieren, wodurch die Artikelbearbeitungsschnittstelle der App erstellt wird.
Suchfunktionsproduktion
Daten werden natürlich aus der API erhalten. Wie erhalten Sie die Daten in der API? Schauen wir uns an. Wir verwenden HTTP hauptsächlich, um Daten zu erhalten, und dann die dann die Methode zum Rückruf, HTTP abrufen, Daten abrufen und dann die damalige Methode zum Rückruf verwenden, Scope.Data -Daten erhalten.
Angular.module ('service'). service ('tectionService', function ($ http) {return {searchArticle: function (title) {return $ http.get ('api/article/such', {data: {title: title});}};};};});Hier deklarieren wir Artikelservice und geben IT -API -Daten zurück, sodass wir die Abhängigkeit in die Seite injizieren, um sie aufzurufen, um seine Methode aufzurufen. Schauen wir uns den Code an: Normalerweise Serviceanrufe
Die von der API zurückgegebenen Daten werden in einen Ordner platziert, und der Controller, der die Daten steuert, wird in einem Ordner platziert. Schauen wir uns an, wie die API -Daten im Controller zurückgerufen werden.
Angular.module ('article.Controllers'). Controller ('Servicectrl', Funktion ($ scope, $ rootscope, $ filter, $ timeout, $ state, $ stateParams, ContentService, ArticleService, Typ) {Beachten Sie, dass Sie Artikelservice in den Controller injizieren müssen, bevor Sie die Daten zurückrufen können. Wie rufe ich Daten zurück? Schauen Sie sich den folgenden Code an:
var arkfulSearch = {text: '', Ergebnis: [], ausgewählt: [], // Die ausgewählten Daten zuerst in das Array beginnern: function () {var self = this; var text = self.text. Parameter in self.result = data.data; // die Daten abrufen}, Funktion (err) {console.log (err);}); },};OK, wir können erfolgreich die Funktionsdaten zurückrufen. In Bezug auf den Suchabschnitt finden Sie eine Zusammenfassung unbekannter Wissenspunkte.
Zusammenfassung der Wissenspunkte
1. wie man ein Array in eine Zeichenfolge schreibt
2. In Bezug auf die Verwendung des Ersetzens durch die Funktion ersetzen
ECMascript legt fest, dass der Parameterersatz der Ersatz () -Methode eine Funktion oder eine Zeichenfolge sein kann. In diesem Fall ruft jede Übereinstimmung die Funktion auf und das Wort, das sie zurückgibt
Die Zeichenfolge wird anstelle von Text verwendet. Der erste Parameter, der von der Funktions -Rückruffunktion zurückgegeben wird, gibt das Matching -Zeichen und das zweite und anschließend die passenden Paketdaten an. Schauen wir uns den Code an.
3. Was zum Teufel ist [P.Slice (0, Index)] [P.Slice (Index+1)]? Sie werden nach dem Debuggen wissen.
Mal sehen, was der Synthesecode bedeutet.
var arr = serve.map (function (xx) {return item.html.replace (/{{([/w /. weibliche+) }/ gi, function (Match, p) {var index = p.indexof ('.'); Formatfield (xx [p]);}});4. In Bezug auf das Prinzip des Timer -SetTimeouts schauen wir uns zuerst den Code an
Warum ist die Ausgabe -1? Schauen wir uns zunächst den Prinzip SetTimeout () an
setTimeout () führt Code nur einmal aus. Wenn Sie mehrmals anrufen möchten, verwenden Sie setInterval () oder führen Sie den Code selbst Call setTimeout () erneut.
SetTimeOut wird verwendet, um eine Zeitspanne zu verzögern, bevor eine bestimmte Operation durchgeführt wird. Das heißt, nach der Verzögerung der angegebenen Zeit nach dem Laden wird der Ausdruck einmal ausgeführt und nur einmal ausgeführt.
setTimeout (Code, Verzögerungszeit);
Die Verzögerungszeit ist nicht die Zeit, die Sie erwarten. Verschiedene Browser haben unterschiedliche Verzögerungszeiten. Nehmen wir das obige Beispiel, dh die Verzögerungszeit ist nicht die oben genannte 0. Vergleich
Mit anderen Worten, SetTimeout wird nur einmal ausgeführt, aber die Zeit ist nicht 0. Es ist nicht sicher, wie viele Sekunden Verzögerung sind. Dann ist es nicht verwunderlich, warum es als -1 erscheint. Lassen Sie uns das Programm analysieren.
Wenn i = 3, nach der Zeit (3), bin ich auf 2 reduziert und führe eine SetTimeout aus
Wenn i = 2, nach der Zeit (2), wird ich auf 1 reduziert und führen ein SetTimeout aus
Wenn i = 1, nach der Zeit (0), wird ich auf 2 reduziert, und ein SetTimeout wird ausgeführt
Wenn i = 0, nach Zeit (0), nimmt ich auf -1 ab. Zu diesem Zeitpunkt endet das Programm, aber das Zeitintervall für das Einstellen von SetTimeout ist die Ausführung nicht und wird in die Ausführungswarteschlange des Threads eingefügt, wobei es auf i wartet
Wenn es -1 wird, werden die vorherigen drei SetTimeOuts ausgeführt, und zu diesem Zeitpunkt habe ich mich zu -1 geändert, sodass die Ausgabe -1 ist. Die zu diesem Zeitpunkt gedruckte Konsole wird von der vorherigen Konsole gedruckt.
SetTimeOut ist asynchroner Code, was bedeutet, dass das Schreiben von SetTimeout (FN, 100) nicht bedeutet, dass FN unmittelbar nach 100 Millisekunden ausgeführt wird und die Verzögerung wahrscheinlich länger dauert. Weil alles
Asynchrone Ereignisse (einschließlich Timer oder ein XMLHTTPREquest ausgeführt) werden nur ausgeführt, wenn während der Ausführung des Programms kostenlos ist, nicht wenn Sie bei der Ausführung festgelegt sind.
Das obige ist die Zusammenfassung des Problems, den vom Editor eingeführten AngularJS -kundenspezifischen Stil in den Ueditor einzuführen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!