WangEditor5 Editor [ZBLOG versão]

WangEditor5 Editor, código aberto gratuito (baseado no protocolo de código aberto do MIT), autor original Shuangyue Professor, site oficial do autor:https: //www.wangeditor.com/, apoio ao desenvolvimento secundário, você pode usar com segurança!

Além disso, o autor original está atualizando o editor wangEditor5 o tempo todo, então podemos atualizar nossos plugins com a atualização do autor original.

Graças à documentação de desenvolvimento completa do wangEditor5, podemos torná - lo um plugin para Z-blog PHP.

Era uma vez que estávamos procurando algo que parecesseConta pública do WeChatUm editor de texto rico moderno e fácil de usar, agora ele está aqui!

Nota: não pode ser usado com outros plugins de editor ao mesmo tempo, use este plug-in, por favor, feche outros plug-ins de editor com antecedência (por exemplo, o editor UEditor do Z-blog PHP)!

O editor wangEditor5 não suporta o uso em telefones celulares por padrão. Na verdade, independentemente de qualquer plug-in do editor, a experiência do usuário no telefone celular é muito pobre, então o editor wangEditor5 oficialmente simplesmente cortou esse recurso.

É claro que esta função também pode ser desbloqueada, apenas precisa personalizar a barra de ferramentas exibida no telefone celular, a fim de melhorar a experiência do usuário não, os usuários que precisam podem nos encontrar para personalizar!

Aqui está a introdução do editor no site oficial do wangEditor

# Vantagens

Problemas com outros editores de texto rico

Pesquise na web "Web rich text editor" Você vai obter muitos resultados, como UEditor kindEditor doméstico, CKEditor TinyMCE Quill ProseMirror Draft Slate e assim por diante. Há também muitas pessoas que usam esses editores ou fazem desenvolvimento secundário.

No entanto, todos eles têm os seguintes problemas, que podem afetar muito a sua eficiência de desenvolvimento, o custo de desenvolvimento e a estabilidade do produto.

# Tecnologia velha

Por exemplo, o UEditor KindEditor ainda usa a API document.execCommand. Isso afetará muito a estabilidade e a escalabilidade do produto.

Naquele momento, não pode ser realizado, há problemas em todos os lugares, será desprezado pelo PM: "Como os outros podem fazer isso?"

O chinês não é amigável

Como o CKEditor TinyMCE Quill ProseMirror, não há documento oficial em chinês. Isso afetará muito a sua eficiência de desenvolvimento (trabalho extra hoje à noite ~)

PS: Inglês especial, por favor, omita.

Exige muito desenvolvimento secundário

Como o ProseMirror Draft Slate, eles são editores de texto rico, mas eles são apenas um núcleo ou controlador, não um recurso completo.

Um grande número de desenvolvimento secundário não só levará a um aumento acentuado nos custos de P & D (fechado este mês ~), mas também pode causar bugs intermináveis devido a testes imperfeitos e cair no pântano.

PS: A menos que você tenha uma forte necessidade de desenvolvimento personalizado.

# Restrições com estrutura

O Slate e o Draft são baseados na estrutura React. A carga de trabalho e a dificuldade são muito grandes se você quiser usá - lo no Vue.

Não há componentes como o React Vue oficial

Algumas dependências sem framework, como o ProseMirror, precisam encapsular seus próprios componentes se você estiver usando o Vue React.

Novos produtos ainda não estão estáveis

Os editores listados acima são produtos mais maduros e têm um grande número de usuários. Você também pode encontrar outros produtos, como recém-desenvolvidos, que não têm muitos usuários.
De qualquer forma, por favor, escolha com cuidado, porque o editor de texto rico tem muitos poços e precisa de um monte de testes e uso para se estabilizar lentamente.

Escolha produtos estáveis que podem ser referenciados

github stars

Downloads npm

Tempo e frequência de liberação do npm

Quantidade de resultados relevantes nos motores de busca

Se há um endosso de uma grande fábrica

Teste de unidade / teste e2e

Vantagens do # wangEditor

O valor de um produto reside em resolver os problemas dos usuários, aumentar a eficiência, reduzir os custos, aumentar a estabilidade e a escalabilidade.

WangEditor não é apenas para fazer, nem para imitar quem, mas para dar uma solução sistemática após a análise do problema acima. O objetivo é realmente resolver os problemas dos usuários e produzir seu próprio valor.

# Utilização da tecnologia mainstream

WangEditor começa com a versão V5 com grandes atualizações técnicas.

#1. Atualização para capacidade L1

A API document.execCommand foi desativada, usando slate.jsopen em nova janela (mas não dependendo do React) como kernel e atualizado para capacidade L1.

Este é o esquema técnico dos editores de texto rico tradicionais atualmente, como o bem conhecido Quill ProseMirror Draft.

#2. Usando o vdom

Usando a tecnologia vdom (baseada emdom.jsopen em nova janela) para atualizar a visão, separação do modelo e da visão para aumentar a estabilidade.

#3. Extensibilidade

O mecanismo de extensão de plugins e módulos é usado para garantir a extensão. No futuro, mais funcionalidades continuarão a ser expandidas.

Na verdade, agora as funções incorporadas do wangEditor também são construídas através de plugins e módulos de extensão.

# Documento chinês

WangEditor tem documentos detalhados em chinês, bem como um ambiente de comunicação em chinês. Porque o autor aberto em nova janela é um programador doméstico.

# Feedback e comunicação oportunos

Você também pode enviar uma questão no github, e a equipe receberá feedback ou aceitação prontamente.

# Integração de todas as funcionalidades sem desenvolvimento secundário

O wangEditor tem todas as funções comuns de manipulação de texto rico embutidas e pode atender à maioria das necessidades de uso. Configure diretamente para uso, sem necessidade de desenvolvimento secundário.

/ / wangEditor tem 50 + menueditor.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: Ao mesmo tempo, o wangEditor tem uma API rica e extensibilidade suficiente para permitir que você personalize menus de desenvolvimento, módulos, plugins, etc.

É muito fácil usar o Vue React

O wangEditor é desenvolvido com base no kernel slate, mas não depende do React, por isso é livre de framework.

Além disso, encapsulamos oficialmente os componentes do Vue React, que podem ser facilmente usados em frameworks como o Vue React.
Continuaremos a apoiar outros frameworks, e você também pode enviar uma questão.

Passou por 5.000 buracos

WangEditor é de código aberto há muitos anos, com um grande número de usuários usados e comentários, resolveu muitos problemas. Durante o teste da versão V5, esses problemas também foram testados repetidamente para garantir a estabilidade máxima.

# Trabalho em equipe, atualização iterativa contínua

WangEditor não é mais o autor sozinho, temos uma equipe de várias pessoas, juntos para corrigir bugs, atualizar recursos, rastrear problemas e responder perguntas da comunidade.