am editor
@aomao
Aquí tenemos un nuevo editor de texto enriquecido llamado Editable, que no utiliza la propiedad editable nativa
contento, pero en su lugar usa un renderizador personalizado. Este enfoque nos permite controlar mejor el comportamiento del editor.
Un editor de texto rico que admite la edición colaborativa, puede usar libremente React, Vue y otras bibliotecas comunes front-end para extender y definir complementos.
Vista previa · Documento · complementos
Vue2
Vue3
React
Vue2 Demo
Vue2 Nuxt Demo
| Paquete | Versión | Tamaño | descripción |
|---|---|---|---|
@aomao/toolbar | Barra de herramientas, adecuada para React | ||
@aomao/toolbar-vue | Barra de herramientas, adecuada para Vue3 | ||
am-editor-toolbar-vue2 | Barra de herramientas, adecuada para Vue2 | ||
@aomao/plugin-alignment | Alineación | ||
@aomao/plugin-embed | URL de incrustación | ||
@aomao/plugin-backcolor | Color de fondo | ||
@aomao/plugin-bold | Atrevido | ||
@aomao/plugin-code | Código en línea | ||
@aomao/plugin-codeblock | Codeblock, adecuado para React | ||
@aomao/plugin-codeblock-vue | Codeblock, adecuado para Vue3 | ||
am-editor-codeblock-vue2 | Codeblock, adecuado para Vue2 | ||
@aomao/plugin-fontcolor | Color de fuente | ||
@aomao/plugin-fontfamily | Familia de fuentes | ||
@aomao/plugin-fontsize | Tamaño de fuente | ||
@aomao/plugin-heading | Título | ||
@aomao/plugin-hr | Regla horizontal | ||
@aomao/plugin-indent | Sangría | ||
@aomao/plugin-italic | Itálico | ||
@aomao/plugin-link | Enlace, adecuado para React | ||
@aomao/plugin-link-vue | Enlace, adecuado para Vue3 | ||
am-editor-link-vue2 | Enlace, adecuado para Vue2 | ||
@aomao/plugin-line-height | Altura de línea | ||
@aomao/plugin-mark | Marca | ||
@aomao/plugin-mention | Mencionar | ||
@aomao/plugin-orderedlist | Lista ordenada | ||
@aomao/plugin-paintformat | Pintor de formato | ||
@aomao/plugin-quote | Bloqueo | ||
@aomao/plugin-redo | Rehacer | ||
@aomao/plugin-removeformat | Eliminar formato | ||
@aomao/plugin-selectall | Seleccionar todo | ||
@aomao/plugin-status | Estado | ||
@aomao/plugin-strikethrough | Fusible | ||
@aomao/plugin-sub | Sub | ||
@aomao/plugin-sup | Sorber | ||
@aomao/plugin-tasklist | Lista de tareas | ||
@aomao/plugin-underline | Subrayar | ||
@aomao/plugin-undo | Deshacer | ||
@aomao/plugin-unorderedlist | Lista desordenada | ||
@aomao/plugin-image | Imagen | ||
@aomao/plugin-table | Mesa | ||
@aomao/plugin-file | Archivo | ||
@aomao/plugin-mark-range | Rango de marca | ||
@aomao/plugin-math | Fórmula matemática | ||
@aomao/plugin-video | Video |
El editor consiste en el engine , toolbar y plugins . El engine nos proporciona la capacidad de edición del núcleo.
Use npm o yarn para instalar el paquete del motor.
$ npm install @aomao/engine
# or
$ yarn add @aomao/engineComenzaremos por generar un "¡Hola mundo!" mensaje como de costumbre.
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 el complemento Bold @aomao/plugin-bold .
import Bold from '@aomao/plugin-bold' ; Agregue el complemento Bold al motor.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ Bold ] ,
} ) ; Una tarjeta es un área definida por separado en el editor, con su interfaz de usuario y lógica para generar contenido personalizado dentro de la tarjeta usando React , Vue u otras bibliotecas frontales antes de montar en el editor.
Introduzca @aomao/plugin-codeblock , un complemento de bloque de código con un desplegable de lenguaje que se representa usando React, que lo distingue de Vue3 usando @aomao/plugin-codeblock-vue .
import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ; Agregue el complemento CodeBlock y el componente de la tarjeta CodeBlockComponent al motor.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ CodeBlock ] ,
cards : [ CodeBlockComponent ] ,
} ) ; El complemento CodeBlock admite markdown de forma predeterminada. Puede activarlo escribiendo la sintaxis del bloque de código al comienzo de una línea en el editor, seguido de un espacio y el nombre del idioma, como `` JavaScript.
Para administrar los nodos más convenientemente y reducir la complejidad, el editor abstrae las propiedades y la funcionalidad del nodo y define cuatro tipos de nodos: mark , inline , block y card . Están compuestos de diferentes atributos, estilos o estructuras HTML , y se limitan de manera uniforme usando un esquema.
Un schema simple se ve así:
{
name : 'p' , // node name
type : 'block' // node type
}Además, también se pueden describir propiedades, estilos, etc., por ejemplo:
{
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 : '*'
}
}Los siguientes tipos de nodos se ajustan a las reglas anteriores:
< 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 > Pero excepto que el color y la prueba se han definido en schema , el editor filtrará otros atributos (color de fondo, Test1) durante el procesamiento.
Los nodos en el área editable tienen cuatro tipos de nodos combinados de mark , inline , bloque , and tarjeta through the rule. They are composed of different attributes, styles or estructuras HTML`. Ciertas restricciones se imponen al anidar.
Importe la barra de herramientas @aomao/toolbar . Debido a la interacción compleja, la barra de herramientas se representa básicamente utilizando componentes React + Antd UI, mientras que Vue3 usa @aomao/toolbar-vue
A excepción de la interacción de la interfaz de usuario, la mayor parte del trabajo de la barra de herramientas es solo llamar al motor para ejecutar los comandos de complemento correspondientes después de que se activen diferentes eventos de botón. En el caso de requisitos complicados o la necesidad de volver a colustomizar la interfaz de usuario, es más fácil modificar después de la bifurcación.
import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ; Agregue el complemento ToolbarPlugin y el componente de la tarjeta de ToolbarComponent al motor, que nos permite usar la tecla de acceso directo / en el editor para despertar la barra de herramientas de la tarjeta
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ ToolbarPlugin ] ,
cards : [ ToolbarComponent ] ,
} ) ;Barra de herramientas de representación, la barra de herramientas se ha configurado con todos los complementos, aquí solo necesitamos pasar el nombre del complemento
return (
...
{
engine && (
< Toolbar
engine = { engine }
items = { [
[ 'collapse' ] ,
[
'bold' ,
] ,
] }
/>
)
}
...
)Para obtener una configuración más compleja de la barra de herramientas, consulte el documento https://editor.aomao.com/config/toolbar
Esta biblioteca de código abierto escucha los cambios en la estructura HTML del área de edición (nodo raíz contento), utiliza MutationObserver para modificar inversamente la estructura de datos, e conecta e interactúa con YJ a través de WebSocket para lograr una edición colaborativa de usuarios múltiples.
Cada editor, como cliente, se comunica e interactúa con el servidor a través de la función WebSocket en el complemento @aomao/plugin-yjs-websocket .
@aomao/yjs implementa la conversión de los datos del editor y Yjs@aomao/plugin-yjs-websocket proporciona la función de cliente WebSocket del editor y Yjs@aomao/plugin-yjs-websocket/server proporciona el servidor WebSocket de Yjs , escrito en Node.js y admite el almacenamiento de datos utilizando MongoDB y LevelDB .Iconfo
Antes de usar esta biblioteca de fuente abierta, debe instalar dependencias en el directorio raíz del proyecto.
yarn install
lerna bootstrap
Después de instalar las dependencias, solo necesita ejecutar el siguiente comando en el directorio raíz para iniciar el proyecto:
yarn start
La estructura del directorio de desarrollo de esta biblioteca de código abierto es la siguiente:
packages contienen el motor y el código relacionado con la barra de herramientasplugins contienen todos los complementosapi proporciona acceso de API requerido por algunos complementos, y utiliza https://editor.aomao.com como el servicio API predeterminadoyjs-server contiene un código de servidor colaborativo, que puede ser iniciado por yarn dev .Ejemplo de AM-editor vue
Gracias Aplicada 、 Elena211314 、 ZB201307 、 Cheon por la donación
https://paypal.me/aomaocom
