WangEditor5 Editor [Versión ZBLOG]

WangEditor5 Editor, código abierto gratuito (basado en el protocolo de código abierto del MIT), autor original Shuangyue Maestro, sitio web oficial del autor:https: //www.wangeditor.com/, soporte para el desarrollo secundario, ¡puede usarlo con seguridad!

Además, el autor original también está actualizando el editor wangEditor5, por lo que también podemos actualizar nuestros complementos con la actualización del autor original.

Gracias a la documentación de desarrollo completa de wangEditor5, pudimos convertirlo en un plugin para Z-blog PHP.

Hubo una vez que queríamos encontrar algo similar aCuenta pública de WeChatTan fácil de usar y moderno editor de texto enriquecido, ¡ahora está aquí!

Nota: no puede utilizarse con otros plugins de editor al mismo tiempo, use este plug-in por favor cierre otros plug-ins de editor por adelantado (por ejemplo, el editor UEditor que viene con Z-blog PHP)!

De hecho, independientemente de cualquier plugin del editor, la experiencia del usuario en el teléfono móvil es muy pobre, por lo que el editor wangEditor5 simplemente cortó esta función.

Por supuesto, esta función también se puede desbloquear, solo necesita personalizar la barra de herramientas que se muestra en el teléfono móvil para mejorar la experiencia de uso del usuario No, los usuarios que lo necesitan pueden encontrarnos para personalizar!

Aquí está la introducción del editor en el sitio web oficial de wangEditor

# Ventajas

# Problemas con otros editores de texto enriquecido

Búsqueda en la web "Web Rich Text Editor" y obtendrá muchos resultados, como UEditor kindEditor en el país, CKEditor TinyMCE Quill ProseMirror Draft Slate en el extranjero y así sucesivamente. También hay muchas personas que usan estos editores, o vienen a hacer desarrollo secundario.

Sin embargo, todos tienen los siguientes problemas (golpeando la pizarra ~), que pueden afectar en gran medida su eficiencia de desarrollo, costo de desarrollo y estabilidad del producto.

# Tecnología Vieja

Como el UEditor KindEditor, todavía utiliza la API document.execCommand. Esto afectará en gran medida la estabilidad y la escalabilidad del producto.

En ese momento, no se puede lograr, hay problemas en todas partes y será despreciado por el PM: "¿Cómo puede alguien hacer esto?"

El chino no es amigable

Como CKEditor TinyMCE Quill ProseMirror, no hay documentación oficial en chino. Esto afectará en gran medida su eficiencia de desarrollo (trabajo extra esta noche ~)

PS: Es especial en inglés, por favor, omita.

# Requiere mucho desarrollo secundario

Por ejemplo, ProseMirror Draft Slate, aunque también son editores de texto enriquecido, son solo un núcleo o controlador, no una función completa.

Una gran cantidad de desarrollo secundario no solo conducirá a un aumento significativo en los costos de I + D (cerrado este mes ~), sino que también puede ocurrir un error interminable debido a las pruebas imperfectas y caer en el pantano.

PS: A menos que tenga una fuerte necesidad de desarrollo personalizado.

# Con restricciones de marco

Slate y Draft dependen del marco React. Si quieres usarlo en Vue, la carga de trabajo y la dificultad es muy grande.

# No hay componentes como React Vue oficial

Algunos no dependientes de marco, como ProseMirror, deben encapsular sus propios componentes si está utilizando Vue React.

# Nuevos productos no son estables

Los editores enumerados anteriormente son productos más maduros y tienen un gran número de usuarios. También puede encontrar otros productos, como los nuevos desarrollados, que no tienen muchos usuarios.
De todos modos, por favor elija con cuidado, porque el editor de texto enriquecido es realmente demasiado agujero, necesita una gran cantidad de pruebas, uso para que se establezca lentamente.

Seleccione un producto estable, puede referirse

github stars

NPM descargas

Tiempo y frecuencia de publicación de npm

Número de resultados relevantes para los motores de búsqueda

Si hay un respaldo de gran fábrica

Prueba de unidad / Prueba e2e

Ventajas de # wangEditor

El valor de un producto consiste en resolver los problemas de los usuarios, mejorar la eficiencia, reducir los costos, aumentar la estabilidad y la escalabilidad.

WangEditor no lo hace con el fin de hacer, ni simplemente imita a quién, sino que después del análisis de los problemas anteriores, da una solución sistemática. Está diseñado para resolver realmente los problemas de los usuarios y producir su propio valor.

# Uso de tecnología mainstream

WangEditor comienza con la versión V5 con actualizaciones técnicas más importantes.

#1. Actualización a la capacidad L1

La API document.execCommand se deshace, se utiliza slate.jsopen en nueva ventana (pero no depende de React) como el núcleo y se actualiza a la capacidad L1.

Este es el esquema técnico de los editores de texto enriquecido principales, como el conocido Quill ProseMirror Draft.

#2. Uso de vdom

Utilice la tecnología vdom (basada en la nueva ventana) para realizar actualizaciones de vista, separación de modelo y vista para aumentar la estabilidad.

#3. Extensión

El mecanismo de extensión de plugins y módulos se utiliza para garantizar la extensibilidad. Se seguirán ampliando más funciones en el futuro.

De hecho, ahora las funciones incorporadas en wangEditor también se construyen a través de plugins y módulos de extensión.

Documento chino

WangEditor tiene documentación detallada en chino y un entorno de comunicación en chino. Porque el autor abierto en nueva ventana es un programador nacional.

# Feedback y comunicación oportunos

También puede enviar un problema a github, y el equipo le dará comentarios o aceptará de manera oportuna.

# Integra todas las funciones sin desarrollo secundario

wangEditor tiene todas las funciones comunes de manipulación de texto enriquecido incorporadas, que pueden satisfacer la mayoría de las necesidades de uso. Se puede configurar directamente para su uso, sin necesidad de desarrollo secundario.

/ / wangEditor tiene 50 + menús incorporados editor.getAllMenuKeys()[
  "bold","underline","italic","through","code","clearStyle","headerSelect","header1","header2","header3",
  "color","bgColor","insertLink","editLink","unLink","viewLink","insertImage","deleteImage","editImage",
  "viewImageLink","imageWidth30","imageWidth50","imageWidth100","blockquote","emotion","fontSize","fontFamily",
  "indent","delIndent","justifyLeft","justifyRight","justifyCenter","lineHeight","redo","undo","divider","codeBlock",
  "bulletedList","numberedList","insertTable","deleteTable","insertTableRow","deleteTableRow","insertTableCol",
  "deleteTableCol","tableHeader","tableFullWidth","insertVideo","deleteVideo","uploadImage","codeSelectLang"]

PS: Al mismo tiempo, wangEditor tiene una rica API y suficiente extensibilidad para permitirle personalizar menús de desarrollo, módulos, plugins, etc.

Es muy fácil de usar en Vue React.

wangEditor se basa en el kernel de pizarra, pero no depende de React, por lo que es libre de marco en sí.

Además, hemos encapsulado oficialmente los componentes de Vue React, que se pueden usar convenientemente en marcos como Vue React.
Otros marcos, seguiremos apoyando, también puede enviar un problema.

Peseó en 5000 hoyos

wangEditor ha sido de código abierto durante muchos años, con un gran número de usuarios que lo usan y retroalimentan, y ha resuelto muchos problemas. Durante el proceso de prueba de la versión V5, estos problemas también se probaron repetidamente para garantizar la máxima estabilidad.

# Trabajo en equipo, actualización iterativa continua

wangEditor ya no es un autor que lucha solo, tenemos un equipo de varias personas, juntos para corregir errores, actualizar funciones, rastrear problemas y responder preguntas de la comunidad.