Je vais résumer les problèmes que j'ai rencontrés dans le processus de personnalisation du style de l'éditeur, principalement l'interface de développement secondaire de l'éditeur et la personnalisation du style avec Angular. Il y a beaucoup de problèmes. Enfin, avec l'aide de **, il a été achevé. Il n'y a toujours pas d'interaction entre l'ancienne version et la nouvelle version, mais ce n'est pas difficile. Ce qui suit explique les problèmes séparément.
Développement de UEditor
Vous pouvez télécharger n'importe quelle version sur le site officiel et l'utiliser: http://ueditor.baidu.com/website/download.html Après le téléchargement, vous pouvez l'utiliser en fonction de la configuration sur le site officiel. Adresse du document: http://fex.baidu.com/ueditor/ Il y a pas mal de problèmes avec le développement secondaire d'Ueditor, et ils sont répertoriés ici.
1. Ueditor filtre automatiquement l'étiquette Div dans une balise P
Pendant le processus de style personnalisé, j'ai constaté que tous les div étaient filtrés et que des étiquettes UNP ont été trouvées. J'ai trouvé beaucoup d'informations en ligne, mais aucun d'eux n'était utile. Plus tard, j'ai vu une écriture maître que la configuration de différentes versions d'Ueditor est différente. Ici, j'ai écrit ma solution: ouvrez le fichier de configuration ueditor.config.js et ajoutez le code suivant:
, pertedivtranstop: faux
Notez qu'il est ajouté manuellement dans Window.ueiroe_config! De plus, certaines personnes ont rencontré des situations similaires et peuvent se référer à: http://www.cnblogs.com/olive116/p/3464495.html
2. Comment insérer des styles personnalisés dans l'éditeur?
L'interface est fournie dans l'éditeur, jetons un coup d'œil.
fonction inserthtml () {var value = inside ('insérer le code html', ''); ue.getEditor ('editor'). execcommand ('inserthtml', value)}Alors, comment utilisez-vous cette interface dans notre propre projet? Tout d'abord, vous devez réaliser l'éditeur, utilisez généralement UE.getEditor () directement pour obtenir l'instance.
// Utilisez la méthode d'usine GetEditor pour créer et faire référence à une instance d'éditeur. Si vous vous référez à l'éditeur sous une certaine fermeture, vous pouvez appeler directement UE.getEditor ('Editor') pour obtenir l'instance pertinente avant de l'utiliser. Nous devons présenter l'éditeur afin d'appeler sa méthode.
<script src = "libs / ueditor / ueditor.config.js"> </ script> <script src = "libs / ueditor / ueditor.all.min.js"> </ script>
Créez un exemple d'éditeur dans notre projet angulaire. L'éditeur fournit des méthodes prêtes à instancier:
// Créez la colonne réelle de l'éditeur $ scope.ready = fonction (ueditor) {window.editor = ueditor;};OK, nous pouvons maintenant utiliser l'instance de l'éditeur. Ensuite, jetons un coup d'œil aux styles personnalisés.
Style personnalisé
Jetons un coup d'œil au style du menu de l'accordéon que nous avons écrit en main. Télécharger l'adresse: https://github.com/foreverjiangting/set-menu/tree/master/menu L'interaction utilisée ici utilise data-toggle = "effondrement", mais il est en conflit avec NG, donc NG doit être utilisé pour contrôler l'interaction. Voyons comment écrire:
<! - Ajouter la barre d'outils -> <div> <h4> Barbaire d'outils </h4> <! - Contenu de la barre latérale -> <div> <a ng-click = "toggle ('titlestyle')"> <span> </span> home </a> <ul ng-hide = "titleyle" id = "usermeun"> <li ng-repeat = "title in Sources.Titles"> <li ng-repeat = ng-click = "inserthtml ('titres', title)"> <a> {{title.name}} </a> </li> </ul> <a ng-click = "toggle ('titleic ng-repeat = "img dans 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 Sources.yxs" ng-Click = "inserthtml ('yxs', yx) "> <a> {{yx.name}} </a> </li> </ul> <a ng-Click =" toggle ('titreserve') "> <span> </span> babillard </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 = "toggle ('titLeartiche')"> <span> </ span> recommandés les articles </a> <ul ng-hide = " ng-repeat = "arc in Sources.arcs" ng-Click = "inserthtml ('arcs', arc)"> <a> {{arc.article}} </a> </li> </ul> </div> <! - Le thème du contenu se termine -> </v>Le code en js est le suivant:
// Style d'interaction de la barre d'outils $ scope.Titlestyle = $ scope.titleicon = $ scope.titleyouxia = $ scope.titleServe = $ titLeartiche = false; $ scope.toggle = function (style) {$ scope [style] =! $ scope [style];}L'effet accordéon contrôlé par NG est simple et léger, avec une petite quantité de code.
Les effets sont les suivants:
Une fois le style écrit, il sera inséré dans l'éditeur. Alors, comment l'insérer? Il y a deux types de choses ici: insérer directement et insérer selon les articles après la recherche. Il est plus facile d'insérer directement.
$ scope.inserthtml = fonction (type, item) {if (type === 'titres' || type === 'imgs') {editor.execcommand ('inserthtml', item.html);}L'effet après l'insertion est le suivant:
Bien sûr, à quoi cela utilise-t-il? Il utilise principalement le contenu de l'éditeur et utilise la liaison des données NG pour le refléter sur l'application, créant ainsi l'interface d'édition d'article de l'application.
Production de fonctions de recherche
Les données sont naturellement obtenues à partir de l'API. Comment obtenir les données dans l'API? Jetons un coup d'œil. Nous utilisons principalement HTTP pour obtenir des données, puis utilisons la méthode puis pour rappeler, obtenir HTTP, obtenir des données, puis utiliser la méthode puis pour rappeler, obtenir des données Scope.data.
angular.module ('service'). Service ('ArticleService', fonction ($ http) {return {searcharticle: function (title) {return $ http.get ('api / article / search', {data: {title: title}});}};});Ici, nous déclarons ArticleService et renvoyons les données de l'API, nous injectons donc la dépendance dans la page pour l'appeler pour appeler sa méthode. Regardons le code: généralement des appels de service
Les données renvoyées par l'API sont placées dans un dossier et le contrôleur qui contrôle les données est placé dans un dossier. Voyons comment les données de l'API sont rappelées dans le contrôleur.
Angular.Module ('Article.Controllers'). Controller ('ServiceCtrl', Fonction ($ Scope, $ Rootscope, $ Filter, $ Timeout, $ State, $ StateParams, ContentService ,, ArticleService, Type) {Notez que vous devez injecter un service d'articles dans le contrôleur avant de pouvoir rappeler les données. Comment rappeler les données? Regardez le code suivant:
var arcfullSearch = {text: '', résultat: [], sélectionné: [], // stocké les données sélectionnées d'abord dans le tableau BeginSearch: function () {var self = this; var text = self.text.trim (); if (! text) return; articlesservice.searcharticle (text). self.result = data.data; // obtenir les données}, fonction (err) {console.log (err);}); },};Ok, nous nous rappelons avec succès aux données de fonction. En ce qui concerne la section de recherche, ce qui suit est un résumé des points de connaissance inconnus.
Résumé des points de connaissance
1. Comment écrire un tableau dans une chaîne
2. Concernant l'utilisation du remplacement du remplacement par la fonction
ECMAScript stipule que le remplacement du paramètre de la méthode Remplace () peut être une fonction ou une chaîne. Dans ce cas, chaque match appelle la fonction, et le mot qu'il renvoie
La chaîne sera utilisée à la place du texte. Le premier paramètre renvoyé par la fonction de rappel de fonction indique le caractère correspondant, puis les données de paquets correspondantes et par la suite. Jetons un coup d'œil au code.
3. Qu'est-ce que c'est [p.slice (0, index)] [P.Slice (index + 1)]? Vous le saurez après le débogage.
Voyons ce que signifie le code de synthèse.
var arr = serve.map (fonction (xx) {return item.html.replace (/ {{([/ w /. formatField (xx [p]);}});});4. Concernant le principe de la minuterie settimeout, jetons un coup d'œil au code d'abord
Pourquoi la sortie -1 est-elle? Regardons d'abord le principe setTimeout ()
setTimeout () Exécute le code une seule fois. Si vous souhaitez appeler plusieurs fois, utilisez SetInterval () ou demandez à nouveau le code d'appel lui-même SetTimeout ().
Settimeout est utilisé pour retarder une période de temps avant d'effectuer une certaine opération. Autrement dit, après le retard de l'heure spécifiée après le chargement, l'expression est exécutée une fois, et une seule fois est exécutée.
setTimeout (code, temps de retard);
Le temps de retard n'est pas le moment où vous vous attendez. Différents navigateurs ont des temps de retard différents. Prenez l'exemple ci-dessus, c'est-à-dire que le temps de retard n'est pas le 0 ci-dessus. Comparaison
En d'autres termes, Settimeout n'est exécuté qu'une seule fois, mais le temps n'est pas 0. Il n'est pas certain du nombre de secondes. Ensuite, il n'est pas surprenant pourquoi il apparaît comme -1. Analysons le programme.
Quand i = 3, après while (3), i est réduit à 2 et exécutez un settimeout
Quand i = 2, après while (2), i est réduit à 1 et exécutez un settimeout
Quand i = 1, après while (0), i est réduit à 2, et un settimeout est exécuté
Lorsque i = 0, après while (0), je diminue à -1. À l'heure
Lorsqu'il devient -1, les trois précédents settimeouts seront exécutés, et à ce moment j'ai changé à -1, donc la sortie est -1. La console imprimée à ce moment est imprimée par la console précédente.
Settimeout est un code asynchrone, ce qui signifie que l'écriture setTimeout (FN, 100) ne signifie pas que FN sera exécuté immédiatement après 100 millisecondes, et le retard est susceptible d'être plus long. Parce que tout
Les événements asynchrones (y compris les minuteries, ou un XMLHTTPRequest terminé) ne seront exécutés que lorsqu'il est gratuit lors de l'exécution du programme, pas lorsque vous stipulez lorsque vous exécutez.
Ce qui précède est le résumé du problème de l'insertion du style personnalisé angularjs dans UEditor introduit par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!