Resumiré los problemas que encontré en el proceso de personalización del estilo para el editor, principalmente la interfaz de desarrollo secundario del editor y la personalización del estilo con Angular. Hay muchos problemas. Finalmente, con la ayuda de **, se completó. Todavía no hay interacción entre la versión anterior y la nueva versión, pero no es difícil. Lo siguiente explica los problemas por separado.
Desarrollo de Ueditor
Puede descargar cualquier versión en el sitio web oficial y usarla: http://ueditor.baidu.com/website/download.html Después de descargar, puede usarla de acuerdo con la configuración en el sitio web oficial. Dirección del documento: http://fex.baidu.com/ueditor/ Hay muchos problemas con el desarrollo secundario de Ueditor, y se enumeran aquí.
1. UEDITOR filtra automáticamente la etiqueta DIV en una etiqueta P
Durante el proceso de estilo personalizado, descubrí que todos los DIV se filtraron y se encontraron etiquetas UNP. Encontré mucha información en línea, pero ninguna de ellas fue útil. Más tarde, vi a un maestro escribir que la configuración de diferentes versiones de UEDITOR es diferente. Aquí escribí mi solución: Abra el archivo de configuración UEDITOR.CONFIG.JS y agregue el siguiente código:
, PeaTDIVTRANSTOP: FALSO
Tenga en cuenta que se agrega manualmente en Window.ueDiroe_config! Además, algunas personas han encontrado situaciones similares y pueden consultar: http://www.cnblogs.com/olive116/p/3464495.html
2. ¿Cómo insertar estilos personalizados en el editor?
La interfaz se proporciona en el editor, echemos un vistazo.
función inserthtml () {var value = solic ('insertar código html', ''); ue.geteditor ('editor'). ExecCommand ('Inserthtml', valor)}Entonces, ¿cómo usa esta interfaz en nuestro propio proyecto? Primero, debe realizar el editor, generalmente usar Ue.getEditor () directamente para obtener la instancia.
// Use el método de fábrica GetEditor para crear y hacer referencia a una instancia de editor. Si se refiere al editor bajo un determinado cierre, puede llamar directamente a UE.GetEditor ('Editor') para obtener la instancia relevante antes de usarla. Necesitamos presentar el editor para llamar a su método.
<script src = "libs/ueditor/ueditor.config.js"> </script> <script src = "libs/ueditor/ueditor.all.min.js"> </script>
Cree un ejemplo de editor en nuestro proyecto angular. El editor proporciona métodos listos para instanciar:
// Cree la columna real del editor $ scope.ready = function (ueditor) {window.editor = ueditor;};Ok, ahora podemos usar la instancia del editor. A continuación, echemos un vistazo a los estilos personalizados.
Estilo personalizado
Echemos un vistazo al estilo del menú de acordeón que escribimos en la mano. Dirección de descarga: https://github.com/foreverjiangting/set-menu/tree/master/menu La interacción utilizada aquí usa datos de datos = "colapso", pero entra en conflicto con ng, por lo que Ng debe usarse para controlar la interacción. Veamos cómo escribir:
< ng-Click = "inserthtMl ('títulos', title)"> <a> {{title.name}} </a> </li> </ul> <a ng-click = "toggle ('titleeCon')"> <span> </span> icon </a> <ul ng-hide = "titleicon" Sources.imgs "ng-chick =" inserthtml ('imgs', img) "> <a> <img ng-src =" {{img.url}} "> </a> </li> </ul> <a ng-click =" toggle ('titeoUxia') "> <pan> life> </span> </ul> <ul ngide =" id = "GlyphicnMenu"> <li ng-depheat = "yx en fuentes.yxs" ng-cLick = "inserthtml ('yxs', yx) ng-hide = "titleServe" id = "serveMenu"> <li ng-depheat = "ser en fuentes.sers" ng-chick = "inserthtml ('sers', ser)"> <a> {{ser.name}}} </a> </li> </ul> <a ng-click = "toTgle Artículos </a> <ul ng-hide = "titLearticle" id = "articlemenu"> <li ng-repeat = "arc en fuentes.arcs" ng-c-chick = "inserthtml ('arcs', arc)"> <a> {{arc.article}}} </a> </li> </ul> </div> <!El código en JS es el siguiente:
// estilo de interacción de la barra de herramientas $ scope.titlestyle = $ scope.titleicon = $ scope.titleoUxia = $ scope.titleServe = $ titLearticle = false; $ scope.toggle = function (style) {$ scope [style] =! $ alcance [estilo];}El efecto de acordeón controlado por Ng es simple y ligero, con una pequeña cantidad de código.
Los efectos son los siguientes:
Después de que se escriba el estilo, se insertará en el editor. Entonces, ¿cómo insertarlo? Aquí hay dos tipos de cosas: inserte directamente e inserte de acuerdo con los artículos después de buscar. Es más fácil de insertar directamente.
$ scope.insertttml = function (type, item) {if (type === 'títulos' || type ==== 'imgs') {editor.execCommand ('inserthtml', item.html);}El efecto después de la inserción es el siguiente:
Por supuesto, ¿de qué sirve hacer esto? Utiliza principalmente el contenido en el editor y usa NG Data Binking para reflejarlo en la aplicación, creando así la interfaz de edición de artículos de la aplicación.
Producción de funciones de búsqueda
Los datos se obtienen naturalmente de la API. ¿Cómo obtener los datos en la API? Echemos un vistazo. Usamos principalmente HTTP para obtener datos, luego usamos el método luego para devolver la llamada, obtener HTTP, obtener datos y luego usar el método luego para devolver la llamada, obtener datos de cables.
Angular.module ('Service'). Service ('ArticlesService', function ($ http) {return {SearchArticle: function (title) {return $ http.get ('api/artículo/search', {data: {title: title}});}};});Aquí declaramos ArticleService y devuelve los datos de API, por lo que inyectamos la dependencia a la página para llamarlo para llamar a su método. Veamos el código: generalmente llamadas de servicio
Los datos devueltos por la API se colocan en una carpeta, y el controlador que controla los datos se coloca en una carpeta. Echemos un vistazo a cómo se devuelven los datos de la API en el controlador.
angular.module ('Artículo.controllers'). Controler ('Servicectrl', function ($ alcance, $ rootscope, $ filtre, $ timeOut, $ state, $ stateParams, contentservice ,, ArticleService, type) {Tenga en cuenta que necesita inyectar ArticleService en el controlador antes de poder devolver la devolución de los datos. ¿Cómo devolver los datos? Mira el siguiente código:
var arcfullsearch = {text: '', resultado: [], seleccionado: [], // almacenó los datos seleccionados primero en la matriz inicial: function () {var self = this; var text = self.Text.trim (); if (! Text) return; en self.result = data.data; // Obtener los datos}, function (err) {console.log (err);}); },};Ok, devolvemos la llamada con éxito a los datos de la función. Con respecto a la sección de búsqueda, el siguiente es un resumen de puntos de conocimiento desconocidos.
Resumen de puntos de conocimiento
1. Cómo escribir una matriz en una cadena
2. Con respecto al uso de reemplazo de reemplazo con función
ECMAScript estipula que el reemplazo de parámetros del método reemplazar () puede ser una función o una cadena. En este caso, cada coincidencia llama a la función y la palabra que devuelve
La cadena se usará en lugar de texto. El primer parámetro devuelto por la función de devolución de llamada de la función indica el carácter coincidente, y el segundo y posteriormente los datos del paquete coincidente. Echemos un vistazo al código.
3. ¿Qué diablos es [p.slice (0, índice)] [p.slice (índice+1)]? Lo sabrás después de la depuración.
Veamos qué significa el código de síntesis.
var arr = servidor.map (function (xx) {return item.html.replace (/{{{((/w /.font>+?) {function (coincy, p) {var index = p.indexof ('.'); if (index> 0) {return Formatfield (xx [p.slice (0, index)] [p.slice (índice+1)); formatfield (xx [p]);}});4. Con respecto al principio del timer settimeout, echemos un vistazo al código primero
¿Por qué es la salida -1? Primero veamos el principio setTimeOut ()
setTimeOut () ejecuta el código solo una vez. Si desea llamar varias veces, use setInterval () o haga que el código mismo llame setTimeOut () nuevamente.
SetTimeOut se usa para retrasar durante un período de tiempo antes de realizar una determinada operación. Es decir, después de que el tiempo especificado se retrasa después de la carga, la expresión se ejecuta una vez, y solo una vez se ejecuta.
setTimeOut (código, tiempo de retraso);
El tiempo de retraso no es el tiempo que esperas. Diferentes navegadores tienen diferentes tiempos de retraso. Tome el ejemplo anterior, es decir, el tiempo de retraso no es el 0 anterior. Comparación
En otras palabras, SetTimeout solo se ejecuta una vez, pero el tiempo no es 0. No es seguro cuántos segundos es el retraso. Entonces no es sorprendente por qué aparece como -1. Analicemos el programa.
Cuando i = 3, después de while (3), me reduce a 2 y ejecuto un setTimeOut
Cuando i = 2, después de while (2), me reduce a 1 y ejecuto un setTimeOut
Cuando i = 1, después de while (0), me reduce a 2 y se ejecuta un setTimeOut
Cuando i = 0, después de while (0), disminuye a -1. En este momento, el programa finaliza, pero el intervalo de tiempo para configurar SetTimeOut es 0 no entenderá la ejecución, y se insertará en la cola de ejecución del hilo, esperando i
Cuando se convierta en -1, se ejecutarán los tres setTimeOuts anteriores, y en este momento he cambiado a -1, por lo que la salida es -1. La consola impresa en este momento es imprimida por la consola anterior.
SetTimeOut es un código asíncrono, lo que significa que escribir SetTimeOut (FN, 100) no significa que FN se ejecutará inmediatamente después de 100 milisegundos, y es probable que la demora sea más larga. Porque todo
Los eventos asíncronos (incluidos los temporizadores, o un XMLHTTPREQUEST completado) solo se ejecutarán cuando haya gratuito durante la ejecución del programa, no cuando estipula cuando ejecuta.
Lo anterior es el resumen del problema de insertar el estilo personalizado AngularJS en UEDitor introducido por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!