Mejora de personajes del juego con editor de texto enriquecido
Cuando vea este título, debe tener varias preguntas en mente:
¿Qué es un editor de texto enriquecido? Un editor de texto enriquecido integra formato, incrustación de medios y redes sociales. Una serie Las funciones de edición, como la interacción, WYSIWYG, proporcionan a los usuarios diversos efectos de visualización. Por ejemplo, foros, comunidades, comentarios, etc. utilizan editores de texto enriquecido.
Relación con los personajes del juego: los editores de texto enriquecidos y los personajes del juego tienen muchas similitudes. Para que la introducción de los editores de texto enriquecidos sea más inmersiva, este artículo utilizará la analogía de los personajes del juego para explicarlos. En cuanto a dónde están las características más comunes, las presentaremos una por una más adelante.
¿Por qué se actualiza? "Actualizar" significa progreso continuo. El propósito de este artículo es centrarse en los problemas fundamentales de los editores de texto enriquecido, inspirar ideas y esperar brindarle algunas soluciones. Los editores de texto enriquecido se han desarrollado continuamente y la exploración de cuestiones de seguridad nunca se ha detenido.
Este artículo se divide principalmente en cinco partes:
A través de la analogía de los personajes del juego, este artículo espera permitir a los desarrolladores que tienen menos exposición a los editores de texto enriquecido tener una visión en profundidad. comprensión del mismo. Aprenda sobre los editores de texto enriquecido. Hoy, analicemos los problemas fundamentales que se encuentran en el proceso de selección y expansión de editores de texto enriquecido.
Por lo general, antes de elegir un nuevo juego, elegiremos ir al sitio web oficial y a los foros para conocer la información del juego y filtrar información efectiva que nos ayude a elegir el personaje correcto.
Cuando los desarrolladores reciben solicitudes de editores de texto enriquecido, no solo elegirán uno de ellos, sino que realizarán selecciones técnicas basadas en una gran cantidad de datos. Esta sección es la preparación para la selección posterior.
Los personajes del juego estarán equipados con diferentes estilos de forma predeterminada antes de que se lance el servidor, y el estilo a menudo determina nuestra impresión inicial del personaje.
El editor de texto enriquecido también tiene varias formas iniciales de uso común, modo clásico, modo documento y modo en línea, como se muestra en la siguiente figura:
Entonces, de la comparación de lo anterior En la figura, se puede ver que el componente esencial del editor de texto enriquecido es el área de edición de contenido. La barra de estado se utiliza para registrar datos relevantes durante la edición y se puede ocultar. La barra de herramientas puede ajustar arbitrariamente la posición y el tiempo de visualización e incluso cambiar al control detrás de escena (activado por teclas de acceso directo, etc.).
Por el contrario, podemos recibir el siguiente mensaje: al editor de texto enriquecido se le pueden dar diferentes formas de visualización a través de diferentes combinaciones de barras de herramientas, áreas de contenido, barras de estado y barras de menú.
Todos los personajes del juego son personajes con capacidad de crecimiento. Siempre habrá algunos "períodos de cuello de botella" durante el proceso de crecimiento. Después de pasar el llamado período de cuello de botella, las habilidades de los personajes cambiarán obviamente.
A lo largo de su desarrollo, los editores de texto enriquecido se han encontrado con algunas dificultades. Precisamente por estas dificultades el proceso de desarrollo se puede dividir en etapas L0, L1, L2 y L3.
L0-gt; L1
L0, el editor de texto enriquecido de primera generación, se basa en el execCommand del navegador y solo proporciona comandos limitados para lograr las funciones más simples. Con los requisitos de estilos cada vez más ricos, el editor de texto enriquecido en este momento no puede satisfacer la demanda, y el editor de escenario L1 surgió según lo requieren los tiempos. El editor de texto enriquecido de L1 adopta una solución execCommand personalizada para lograr funciones de texto enriquecido más ricas.
L1-gt; L2
Los editores de texto enriquecido de L0 y L1 aún modifican HTML a través de execCommand. En distintos navegadores, la estructura HTML de un texto enriquecido con la misma presentación puede ser bastante diferente.
Por ejemplo, para negrita, el HTML puede ser lt;stronggt;boldlt;/stronggt;, puede ser lt;bgt;boldlt;/bgt;, o puede ser lt;stronggt;lt ; stronggt;lt;/stronggt;boldlt;/stronggt;etc. Para resolver el problema de la correspondencia uno a uno entre datos y vistas, se propuso el concepto de modelo de datos personalizado.
El modelo de datos personalizado es una estructura de datos extraída por el editor de texto enriquecido basado en el árbol HTML-DOM de texto enriquecido. La misma estructura de datos puede garantizar que el HTML renderizado también sea el mismo. Los comandos personalizados controlan directamente el modelo de datos y, en última instancia, garantizan la coherencia del documento HTML renderizado.
Para el mismo HTML, diferentes editores de texto enriquecido en última instancia generan diferentes modelos de datos. Tomando Hello EditorName como ejemplo, aquí hay una comparación de los modelos de datos de Quill, ProseMirror, Draft y Slate de la siguiente manera:
El editor de texto enriquecido en la etapa L2 resuelve el problema de los datos sucios y datos en texto enriquecido abstrayendo el modelo de datos El problema de la difícil realización de funciones complejas. A través de la unidad de datos, puede satisfacer mejor las necesidades de funciones personalizadas, análisis cruzados y colaboración en línea.
L2-gt; L3
Los editores hasta la etapa L2 pueden cumplir con la mayoría de los escenarios de uso. Entonces, ¿por qué se desarrolló L3 más tarde?
Esto se debe a que los editores de texto enriquecido de L0-L2 se basan en el contenido del navegador. Al modificar el modelo de datos, a menudo es necesario interceptar las operaciones del usuario. Es difícil controlar el comportamiento del usuario y, junto con los problemas de compatibilidad de los diferentes navegadores, es probable que se produzcan errores.
Para resolver el problema del contenido incontrolableEdición editable, los editores representados por Google Docs han entrado en la etapa L3 a través del "motor de composición tipográfica de desarrollo propio".
El motor de composición tipográfica de desarrollo propio abandona por completo contentEditable y logra un efecto de edición similar al de un navegador al controlar la posición del cursor, el dibujo de selección, la composición tipográfica, el monitoreo de la entrada y otros comportamientos. La "autoinvestigación" sin duda tiene una mayor escalabilidad. Pero en consecuencia, su desarrollo es difícil, costoso y tiene muchos problemas ocultos. En esta etapa, todavía hay una cierta brecha entre la experiencia general y el rendimiento y la representación del navegador nativo.
Mirando hacia atrás en el historial de desarrollo del editor de texto enriquecido, no es difícil encontrar que la estructura del editor de texto enriquecido no se puede separar de los tres módulos de modelo, vista y controlador. Como se muestra en la siguiente figura:
Al igual que el período de cuello de botella que atravesaron los personajes del juego, los cambios que experimentó el editor de texto enriquecido en la transición de L1 a L2 son: la extracción de datos personalizados modelo; los cambios en la transición de L2 a L3 Sí: una nueva definición de motor de composición.
Después de haber conocido los antecedentes del juego y la información de los personajes a través de varios canales, el siguiente paso es iniciar sesión en el juego y crear un personaje. En este momento, el problema que suelen encontrar los novatos es, sin duda, cómo elegir el personaje del juego más adecuado para ellos.
De manera similar, para aquellos que son nuevos en los editores de texto enriquecido, una pregunta frecuente es: ¿Qué editor de texto enriquecido debo elegir?
En primer lugar, puede elegir el editor de texto enriquecido correspondiente a la etapa según las necesidades de su negocio:
En segundo lugar, según la etapa seleccionada, según la arquitectura del proyecto (Vue , React, Augular, etc.), así como las características del propio editor de texto enriquecido, basta con elegir el editor adecuado.
Puede considerar los siguientes aspectos:
Lo anterior es la rutina de selección que he resuelto. CKEditor, TinyMCE, Quill, etc. son todos conocidos. Quizás quieras considerar estos editores al elegir:
Elegir el personaje correcto es solo el comienzo del juego. Durante el juego, debes ajustar constantemente el árbol de habilidades del personaje del juego para desarrollar su potencial hasta el límite.
A medida que el negocio siga desarrollándose, se impondrán mayores requisitos a los editores de texto enriquecido. En este sentido, las siguientes preguntas suelen preocupar a los desarrolladores:
1. ¿Cómo expandir rápidamente las funciones de texto enriquecido?
2. ¿Cómo cambiar rápidamente la apariencia del editor?
Respecto a los dos temas anteriores, se analizará lo siguiente desde dos aspectos: expansión de capacidad y transformación temática.
Esta sección no se centrará en cómo se puede expandir un editor de texto enriquecido específico, pero compartirá algunas ideas generales de procesamiento para los diferentes métodos de expansión mencionados anteriormente.
Al igual que en un personaje de juego, los datos finales del poder de combate se pueden ajustar mediante diferentes planes de montaje de accesorios. La extensión de la barra de herramientas tiene como objetivo satisfacer las necesidades comerciales finales mediante la combinación y transformación de diferentes funciones en la barra de herramientas.
Una barra de herramientas común se compone de varios botones de función, grupos de botones de estado, menús desplegables, cuadros modales, etc., como se muestra en la siguiente figura:
General, texto enriquecido editor Ambos tienen elementos de configuración para administrar barras de herramientas y puede consultar la documentación oficial según sea necesario. Aquí discutimos un escenario: ¿cómo extender los botones de función existentes?
Tome la "Función de resaltado de fuente del editor Quill" como ejemplo: el color de este botón de función refleja el color de la fuente en la posición del cursor, logrando así el efecto de cambios vinculantes, como se muestra en la siguiente figura:
Entonces, ¿qué debemos hacer si el editor de texto enriquecido introducido en el proyecto no proporciona tales capacidades? Aquí se proporcionan dos soluciones:
1) Controlar el estilo de interfaz de usuario nativo del botón de función.
Tome la función de resaltado de fuente de Tiny en la imagen a continuación como ejemplo. El botón es una estructura SVG y el efecto se puede lograr controlando trazo/color de relleno. En este momento, solo necesita agregar OnSelectionChange para monitorear el cambio de la posición del cursor en el editor, obtener el color de resaltado de fuente de la posición del cursor y restablecer la interfaz de usuario del botón.
2) El icono SVG reemplaza el botón actual.
Esta solución se puede utilizar cuando los botones de función se presentan en forma de imágenes y es difícil controlar los cambios de la interfaz de usuario. Reemplace el ícono de la imagen con un ícono SVG y logre el mismo efecto cambiando el color del trazo/color de relleno de la ruta svg.
Resumen: si el proyecto introduce un editor de texto enriquecido por primera vez, es posible que desee consultar la segunda opción en 4.2 Transformación del tema.
La "extensión de la barra de menú" es similar a agregar algunas habilidades auxiliares al equipo del personaje del juego. Estas nuevas habilidades dependen del equipo, y las habilidades equipadas por cada equipo también son diferentes entre sí.
La barra de menú mencionada en esta sección se refiere específicamente a la barra de menú en línea dentro del editor. Por ejemplo, barra de herramientas de imagen, barra de herramientas de tabla, barra de menú contextual, etc.
Como se muestra en la siguiente figura:
Para las barras de menú, el requisito más común es: ¿Cómo agregar una nueva barra de menú a un complemento existente?
1) El editor de texto enriquecido proporciona capacidades de configuración asociadas, que se pueden configurar directamente de acuerdo con el documento API. A continuación se muestra un extracto del esquema de configuración de algunas barras de menú en el editor Tiny, como se muestra en la siguiente figura:
2) No tiene la capacidad de asociar configuración y es necesario monitorear los cambios. en la posición del cursor. Cuando el cursor cambia dentro del área de datos de texto enriquecido correspondiente, se activa un evento/comando para controlar la visualización de esta barra de menú.
Independientemente de la solución anterior, la barra de menú extendida se puede integrar en el editor o se puede lanzar fuera del editor a través de eventos y asociarse en forma de un componente personalizado. Prefiero la solución de usar componentes de barra de menú personalizados:
Para mejorar el poder de combate de los personajes del juego, los accesorios y el equipo son mejoras externas, y también es necesario centrarse en el personaje en sí.
En la sección sobre el historial de desarrollo del editor de texto enriquecido, se concluyó que la estructura del editor de texto enriquecido no se puede separar de los tres módulos de modelo, vista y controlador, partiendo de estos. tres módulos, el plan de expansión También hay distinciones.
Extensión del modelo de datos
Como se mencionó en la introducción anterior, el comportamiento clave de la transición de etapa L1-L2 es extraer el modelo de datos personalizado. El modelo de datos del editor de texto enriquecido determina la estructura de la representación final del texto enriquecido. Cuando una estructura de texto enriquecido preestablecida no puede cumplir con las expectativas, es necesario ampliar el modelo de datos de texto enriquecido. Dependiendo de si el editor de texto enriquecido está antes o después de la etapa L2, los métodos de expansión también son bastante diferentes.
1) Los editores de texto enriquecidos en la etapa L2 y posteriores ya tienen capacidades de abstracción del modelo de datos. En este momento, solo necesita agregar/editar los objetos de datos definidos en la estructura de datos y vincular la estructura HTML renderizada. Puede ser:
2) Antes de la etapa L2, los datos de texto enriquecido no se han extraído del modelo de datos. Para este escenario, puede utilizar el complemento html-parse-stringify para extraer el modelo de datos usted mismo y luego expandir los datos. a lt;pgt;hola lt;bgt;HTML-parse-stringfylt;/bgt;! lt；/pgt; Por ejemplo, se puede convertir a la estructura de datos que se muestra en la siguiente figura:
Extensión de vista
La vista debería ser más fácil de entender con los mismos roles. Los datos de atributos están equipados con diferentes aspectos y efectos especiales de habilidades. Tienen diferentes efectos de presentación durante el combate. La misma fuente de datos de texto enriquecido puede mostrar diferentes efectos visuales a través de diferentes extensiones de vista.
1) La estructura de datos del texto enriquecido no cambia, solo la configuración del estilo es diferente.
Cambie diferentes estilos cambiando el atributo de clase vinculado a la estructura DOM:
p>
2) Cambie directamente la estructura de datos del texto enriquecido
Cambie de un enlace normal a una tarjeta, cambie la estructura de datos de Inline-Block a Block (link-card) y cambie Representación DOM en consecuencia. La comparación de la estructura DOM es la siguiente:
Extensión del controlador
El controlador es un concepto relativamente abstracto para los personajes del juego, se utiliza principalmente para controlar las condiciones de activación de habilidades, el tiempo de liberación y la activación. condiciones y efectos de atributos, etc.
De manera similar, el controlador del editor de texto enriquecido es también el nombre colectivo de los métodos de control de la capa de datos y de la capa de vista. La expansión del controlador se puede lograr a través de múltiples dimensiones, como eventos, comandos y elementos de configuración. Hoy hablaremos brevemente sobre cómo se pueden ampliar eventos y comandos.
1) Expansión de eventos
Los eventos son un poco como habilidades activas, que el personaje libera activamente. El editor de texto enriquecido generará activamente algunos eventos para implementar el control dentro o fuera del editor, como OnselectionChange, OnInit, etc. Cuando las nuevas funciones requieren que se controlen componentes externos dentro del editor y los eventos nativos no pueden cumplir con los requisitos, a menudo es necesario implementar nuevos detectores de eventos.
La expansión de eventos es muy útil en operaciones cross-end, lo que se destacará en el artículo Cross-end Practice.
2) Extensión de comandos
El control de comandos es lo opuesto a la lógica de control de eventos. Los comandos son similares a las habilidades pasivas. Cuando el entorno externo alcanza una determinada condición, desencadena una determinada operación. del personaje. La gestión de comandos del editor de texto enriquecido brinda la capacidad de controlar las operaciones internas del editor desde fuera del editor. Cuando la operación no está en la biblioteca de comandos, es necesario ampliar el comando Command. Diferentes editores tienen diferentes formas de escribir extensiones de Comando, pero siguen siendo las mismas: el núcleo de Comando es ejecutar y actualizar.
Además de eventos y comandos, algunos editores también pueden lograr operaciones personalizadas ampliando los elementos de configuración.
Para maximizar el valor de las nuevas habilidades, no solo es necesario actualizar los datos de atributos del personaje a un nivel apropiado, sino también implementar de manera flexible grupos de habilidades, configurar accesorios y equipos apropiados, etc.
Agregar un nuevo complemento al editor de texto enriquecido a menudo requiere expandir varios módulos simultáneamente:
Expanda e introduzca cada módulo en la figura anterior:
Definir el modelo de datos
A través de la sección 4.1.3 Extensión del modelo de datos, podemos encontrar que el modelo de datos es el núcleo de la nueva función de texto enriquecido. Sólo determinando primero la capa de datos se puede decidir cómo controlar la representación de la vista y cómo se presentará finalmente en el front-end.
La definición del modelo de datos se divide principalmente en tres pasos:
1. Determinar si el DOM del modelo de datos es de tipo Inline, tipo Block o conmutable
<; p> 2, aclarar las restricciones de acceso del modelo de datos y sus restricciones de edición, como decir que los hipervínculos no se pueden anidar en el título y otras reglas similares3. Determinar el modelo de datos y su entrada de datos; y salida de datos
p>
Diagrama de ejemplo de conversión de entrada-modelo-salida, como se muestra a continuación:
Personalizar botón de la barra de herramientas
El botón de la barra de herramientas es un La ventana de control de datos, que se puede mostrar externamente en la barra de herramientas, también se puede ocultar y controlar mediante teclas de método abreviado. Si se muestra en la barra de herramientas, debe personalizar los botones de función de los estados correspondientes, vincular menús o controlar operaciones según las necesidades específicas. Consulte la sección 4.1.1 Extensión de la barra de herramientas.
Agregar eventos o comandos
Después de determinar el núcleo de datos y la ventana de control, el siguiente paso es formular una estrategia de control. Primero determine si la estrategia de control en el requisito es directa (la operación del editor de texto enriquecido desencadena retroalimentación externa) o inversa (la externa desencadena la operación interna del editor), o ambas. Luego, según la estrategia de control, puedes optar por expandir eventos, comandos o ambos. Para planes de expansión específicos, consulte la Sección 4.1.3 Expansión del controlador
Selección de cursor asociado
A través de la posición del cursor, se determina la estructura de datos correspondiente a la selección actual para controlar el cambio de estados especiales.
¿Cómo determinar si es necesario asociar la selección del cursor?
1. Si el estado del botón de la nueva función está relacionado con la posición del cursor. La asociación se puede completar en el paso de personalizar el botón de la barra de herramientas;
2. Si la nueva función debe mostrarse en la barra de menú asociada. Para conocer la solución, consulte la Sección 4.1.2 Extensión de la barra de menús;
3. Si la nueva función está asociada con otras funciones de texto enriquecido. Por ejemplo, lógica mutuamente excluyente: no se permite insertar hipervínculos en el título.
Si se determina que la selección del cursor debe estar asociada, entonces el oyente OnSelectionChange debe agregarse al texto enriquecido. editor para completar el procesamiento relevante.
Gestión de registros de operaciones relacionadas (deshacer, rehacer)
Al realizar operaciones interactivas en un editor de texto enriquecido, inevitablemente se producirán algunas operaciones incorrectas. Cuanto más complejo sea el escenario de interacción de un editor de texto enriquecido, mayor será la probabilidad de un mal funcionamiento. Por lo tanto, los editores de texto enriquecido generalmente administran registros de operaciones para reducir el impacto de operaciones incorrectas.
La lógica de procesamiento de deshacer/rehacer en diferentes editores de texto enriquecido es diferente. De manera similar, los editores de texto enriquecido definirán comportamientos clave durante la operación (como inserciones y eliminaciones comunes, etc.) y los almacenarán. el expediente operativo.
Cuando asociamos la gestión de registros de operaciones en la nueva función del complemento, solo necesitamos reutilizar la lógica entrante y saliente de los comportamientos clave de otros complementos.
Agregar control de copiar y pegar
"Copiar y pegar" es uno de los problemas más problemáticos en el funcionamiento de los editores de texto enriquecido. Los amigos con experiencia en desarrollo relevante deberían haberlo encontrado antes. Cuando el contenido copiado de otras fuentes se pega en el editor, la vista muestra una situación anormal. En este caso, a menudo es necesario filtrar los datos en el portapapeles y convertirlos en datos que puedan ser reconocidos por el editor de texto enriquecido.
La "transformación del tema" debe ser fácil de entender, que consiste en cambiar el aspecto del juego y cambiar rápidamente el estilo del personaje del juego.
La transformación del tema en el editor de texto enriquecido es en realidad el reemplazo de la barra de herramientas, la barra de menú y los estilos especiales de texto enriquecido. Hay dos soluciones habituales:
Si se trata de una transformación de un proyecto existente, entonces se debe tener en cuenta la relación inversión-producto del cambio entre los temas antiguos y nuevos, y se debe tomar la mejor decisión. ; si es un proyecto nuevo y se requieren detalles de estilo del tema. Si es superior, se puede utilizar la opción 2.
En comparación con la opción 1, opción 2:
Resumen: hay más que las opciones anteriores para la expansión de funciones y la transformación del tema. También hay otras opciones de compromiso. Elija según el escenario empresarial la solución adecuada. Hay un dicho que bien dice: “Lo mejor puede no ser adecuado, pero lo adecuado es lo mejor”.
En este punto, el contenido de este artículo llega a su fin. Espero que después de leer esto, pueda obtener algunas respuestas a las siguientes preguntas:
1. Según las necesidades comerciales actuales, ¿qué editor de texto enriquecido debo elegir?
2. A medida que el negocio se expande, ¿cómo ampliar la función de texto enriquecido?
3. Revisión del diseño, ¿cómo cambiar rápidamente el aspecto?
Al igual que en el mundo del juego, tendrás que luchar contra monstruos para subir de nivel. Al mismo tiempo, en el proceso, también acumularás más habilidades, sentando una base sólida para posteriores saltos y lucha contra monstruos. Durante el proceso de desarrollo del editor de texto enriquecido, nos encontramos con muchos problemas difíciles y requisitos complejos, que nos costaron mucho tiempo y energía. Entrenando una y otra vez, todos ganaremos y creceremos.
Este artículo comparte algunos de mis pensamientos sobre problemas de seguridad durante el proceso de desarrollo del editor de texto enriquecido. Espero que pueda ser útil para amigos que están a punto de participar en el desarrollo del editor de texto enriquecido. que actualmente están desarrollando texto enriquecido, los socios de desarrollo del editor brindan algo de ayuda.
En el futuro, compartiré con ustedes algunas experiencias de editores de texto enriquecidos en soluciones entre terminales. Si está interesado, puede seguir prestando atención.
Materiales de referencia