am editor
@aomao
Aqui, temos um novo editor de texto rico chamado Editável, que não usa a propriedade editável nativa
contentável, mas, em vez disso, usa um renderizador personalizado. Essa abordagem nos permite controlar melhor o comportamento do editor.
Um editor de texto rico que suporta edição colaborativa, você pode usar livremente o React, Vue e outras bibliotecas comuns do front-end para estender e definir plugins.
Visualização · documento · plugins
Vue2
Vue3
React
Vue2 Demo
Vue2 Nuxt Demo
| Pacote | Versão | Tamanho | descrição |
|---|---|---|---|
@aomao/toolbar | Barra de ferramentas, adequada para React | ||
@aomao/toolbar-vue | Barra de ferramentas, adequada para Vue3 | ||
am-editor-toolbar-vue2 | Barra de ferramentas, adequada para Vue2 | ||
@aomao/plugin-alignment | Alinhamento | ||
@aomao/plugin-embed | URL de incorporação | ||
@aomao/plugin-backcolor | Cor de fundo | ||
@aomao/plugin-bold | Audacioso | ||
@aomao/plugin-code | Código embutido | ||
@aomao/plugin-codeblock | CodeBlock, adequado para React | ||
@aomao/plugin-codeblock-vue | CodeBlock, adequado para Vue3 | ||
am-editor-codeblock-vue2 | CodeBlock, adequado para Vue2 | ||
@aomao/plugin-fontcolor | Cor da fonte | ||
@aomao/plugin-fontfamily | Família de fontes | ||
@aomao/plugin-fontsize | Tamanho da fonte | ||
@aomao/plugin-heading | Cabeçalho | ||
@aomao/plugin-hr | Regra horizontal | ||
@aomao/plugin-indent | Indentação | ||
@aomao/plugin-italic | itálico | ||
@aomao/plugin-link | Link, adequado para React | ||
@aomao/plugin-link-vue | Link, adequado para Vue3 | ||
am-editor-link-vue2 | Link, adequado para Vue2 | ||
@aomao/plugin-line-height | Altura da linha | ||
@aomao/plugin-mark | Marca | ||
@aomao/plugin-mention | Menção | ||
@aomao/plugin-orderedlist | Lista ordenada | ||
@aomao/plugin-paintformat | Painter de formato | ||
@aomao/plugin-quote | BlockQuote | ||
@aomao/plugin-redo | Refazer | ||
@aomao/plugin-removeformat | Remova o formato | ||
@aomao/plugin-selectall | Selecione tudo | ||
@aomao/plugin-status | Status | ||
@aomao/plugin-strikethrough | Strikethrough | ||
@aomao/plugin-sub | Sub | ||
@aomao/plugin-sup | E aí | ||
@aomao/plugin-tasklist | Lista de tarefas | ||
@aomao/plugin-underline | Sublinhado | ||
@aomao/plugin-undo | Desfazer | ||
@aomao/plugin-unorderedlist | Lista não ordenada | ||
@aomao/plugin-image | Imagem | ||
@aomao/plugin-table | Mesa | ||
@aomao/plugin-file | Arquivo | ||
@aomao/plugin-mark-range | Faixa de marcas | ||
@aomao/plugin-math | Fórmula matemática | ||
@aomao/plugin-video | Vídeo |
O editor consiste no engine , toolbar e plugins . O engine nos fornece a capacidade de edição principal.
Use npm ou yarn para instalar o pacote do motor.
$ npm install @aomao/engine
# or
$ yarn add @aomao/engineComeçaremos produzindo um "Hello World!" mensagem como sempre.
import React , { useEffect , useRef , useState } from 'react' ;
import Engine , { EngineInterface } from '@aomao/engine' ;
const EngineDemo = ( ) => {
//Editor container
const ref = useRef < HTMLDivElement | null > ( null ) ;
//Engine instance
const [ engine , setEngine ] = useState < EngineInterface > ( ) ;
//Editor content
const [ content , setContent ] = useState < string > ( '<p>Hello world!</p>' ) ;
useEffect ( ( ) => {
if ( ! ref . current ) return ;
//Instantiate the engine
const engine = new Engine ( ref . current ) ;
//Set the editor value
engine . setValue ( content ) ;
//Listen to the editor value change event
engine . on ( 'change' , ( ) => {
const value = engine . getValue ( ) ;
setContent ( value ) ;
console . log ( `value: ${ value } ` ) ;
} ) ;
//Set the engine instance
setEngine ( engine ) ;
} , [ ] ) ;
return < div ref = { ref } /> ;
} ;
export default EngineDemo ; Importe o @aomao/plugin-bold Bold.
import Bold from '@aomao/plugin-bold' ; Adicione o plug -in Bold ao motor.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ Bold ] ,
} ) ; Um cartão é uma área definida separadamente no editor, com sua interface do usuário e lógica para renderizar conteúdo personalizado dentro do cartão usando React , Vue ou outras bibliotecas de front-end antes de ser montado no editor.
Introduce @aomao/plugin-codeblock , um plug-in de bloco de código com um suspensão de idioma que é renderizado usando o React, que o distingue do vue3 usando @aomao/plugin-codeblock-vue .
import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ; Adicione o plug -in CodeBlock e o componente do cartão CodeBlockComponent ao mecanismo.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ CodeBlock ] ,
cards : [ CodeBlockComponent ] ,
} ) ; O plug -in CodeBlock suporta markdown por padrão. Você pode acioná -lo digitando a sintaxe do bloco de código no início de uma linha no editor, seguido de um espaço e o nome do idioma, como `` `javascript.
Para gerenciar os nós de maneira mais conveniente e reduzir a complexidade, o editor abstrai as propriedades e funcionalidades do Nó e define quatro tipos de nós: mark , inline , block e card . Eles são compostos de diferentes atributos, estilos ou estruturas HTML e são uniformemente restritos usando um esquema.
Um schema simples se parece com o seguinte:
{
name : 'p' , // node name
type : 'block' // node type
}Além disso, propriedades, estilos etc. também podem ser descritos, por exemplo:
{
name : 'span' , // node name
type : 'mark' , // node type
attributes : {
// The node has a style attribute
style : {
// Must contain a color style
color : {
required : true , // must contain
value : '@color' // The value is a color value that conforms to the css specification. @color is the color validation defined in the editor. Here, methods and regular expressions can also be used to determine whether the required rules are met
}
} ,
// Optional include a test attribute, its value can be arbitrary, but it is not required
test : '*'
}
}Os seguintes tipos de nós estão em conformidade com as regras acima:
< span style =" color:#fff " > </ span >
< span style =" color:#fff " test =" test123 " test1 =" test1 " > </ span >
< span style =" color:#fff;background-color:#000; " > </ span >
< span style =" color:#fff;background-color:#000; " test =" test123 " > </ span > Mas, exceto que a cor e o teste foram definidos no schema , outros atributos (cor de fundo, teste1) serão filtrados pelo editor durante o processamento.
Os nós na área editável têm quatro tipos de nós combinados de mark , inline , Block , and Carting through the rule. They are composed of different attributes, styles or estruturas html. Certas restrições são impostas ao ninho.
Importe a barra de ferramentas @aomao/toolbar . Devido à interação complexa, a barra de ferramentas é basicamente renderizada usando componentes React + Antd UI, enquanto Vue3 usa @aomao/toolbar-vue
Exceto pela interação da interface do usuário, a maior parte do trabalho da barra de ferramentas é apenas chamar o mecanismo para executar os comandos do plug -in correspondentes após o acionamento de diferentes eventos do botão. No caso de requisitos complicados ou a necessidade de repreender a interface do usuário, é mais fácil modificar após o garfo.
import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ; Adicione o componente do plug -in ToolbarPlugin e o componente da ToolbarComponent ao motor, o que nos permite usar a chave de atalho / no editor para acordar a barra de ferramentas do cartão
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ ToolbarPlugin ] ,
cards : [ ToolbarComponent ] ,
} ) ;Renderização da barra de ferramentas, a barra de ferramentas foi configurada com todos os plugins, aqui só precisamos passar no nome do plug -in
return (
...
{
engine && (
< Toolbar
engine = { engine }
items = { [
[ 'collapse' ] ,
[
'bold' ,
] ,
] }
/>
)
}
...
)Para uma configuração mais complexa da barra de ferramentas, verifique o documento https://editor.aomao.com/config/toolbar
Essa biblioteca de código aberto ouve as alterações na estrutura HTML da área de edição (nó raiz contentável), usa MutationObserver para engenheiro reversa da estrutura de dados e conecta e interage com YJs através WebSocket para obter uma edição colaborativa multi-usuária.
Cada editor, como cliente, comunica e interage com o servidor através da função WebSocket no plug-in @aomao/plugin-yjs-websocket .
@aomao/yjs implementa a conversão dos dados do editor e YjsYjs @aomao/plugin-yjs-websocket WebSocket@aomao/plugin-yjs-websocket/server fornece o servidor WebSocket de Yjs , escrito no Node.js, e suporta armazenamento de dados usando MongoDB e LevelDB .Iconfont
Antes de usar esta biblioteca de código aberto, você precisa instalar dependências no diretório raiz do projeto.
yarn install
lerna bootstrap
Depois de instalar as dependências, você só precisa executar o seguinte comando no diretório raiz para iniciar o projeto:
yarn start
A estrutura do diretório de desenvolvimento desta biblioteca de código aberto é a seguinte:
packages contém o código do motor e da barra de ferramentasplugins contém todos os pluginsapi fornece acesso à API exigido por alguns plugins e usa https://editor.aomao.com como o serviço de API padrãoyjs-server contém código de servidor colaborativo, que pode ser iniciado pelo yarn dev .Exemplo de AM-Editor Vue
Obrigado satisfeito
https://paypal.me/aomaocom
