am editor
@aomao
Ici, nous avons un nouvel éditeur de texte riche appelé Editable, qui n'utilise pas la propriété modifiable native
satisfaisant, mais utilise plutôt un rendu personnalisé. Cette approche nous permet de mieux contrôler le comportement de l'éditeur.
Un éditeur de texte riche qui prend en charge l'édition collaborative, vous pouvez utiliser librement React, Vue et d'autres bibliothèques communes frontales pour étendre et définir les plugins.
Aperçu · Document · Plugins
Vue2
Vue3
React
Vue2 Demo
Vue2 Nuxt Demo
| Emballer | Version | Taille | description |
|---|---|---|---|
@aomao/toolbar | Barre d'outils, adaptée à React | ||
@aomao/toolbar-vue | Barre d'outils, adaptée à Vue3 | ||
am-editor-toolbar-vue2 | Barre d'outils, adaptée à Vue2 | ||
@aomao/plugin-alignment | Alignement | ||
@aomao/plugin-embed | URL intégrée | ||
@aomao/plugin-backcolor | Couleur de fond | ||
@aomao/plugin-bold | Audacieux | ||
@aomao/plugin-code | Code en ligne | ||
@aomao/plugin-codeblock | CodeBlock, adapté à React | ||
@aomao/plugin-codeblock-vue | CodeBlock, adapté à Vue3 | ||
am-editor-codeblock-vue2 | CodeBlock, adapté à Vue2 | ||
@aomao/plugin-fontcolor | Couleur de police | ||
@aomao/plugin-fontfamily | Famille de polices | ||
@aomao/plugin-fontsize | Taille de la police | ||
@aomao/plugin-heading | Titre | ||
@aomao/plugin-hr | Règle horizontale | ||
@aomao/plugin-indent | Échancrure | ||
@aomao/plugin-italic | Italique | ||
@aomao/plugin-link | Lien, adapté à React | ||
@aomao/plugin-link-vue | Lien, adapté à Vue3 | ||
am-editor-link-vue2 | Lien, adapté à Vue2 | ||
@aomao/plugin-line-height | Hauteur de ligne | ||
@aomao/plugin-mark | Marque | ||
@aomao/plugin-mention | Mention | ||
@aomao/plugin-orderedlist | Liste commandée | ||
@aomao/plugin-paintformat | Peintre de format | ||
@aomao/plugin-quote | Blocsquote | ||
@aomao/plugin-redo | Refaire | ||
@aomao/plugin-removeformat | Retirer le format | ||
@aomao/plugin-selectall | Sélectionnez tout | ||
@aomao/plugin-status | Statut | ||
@aomao/plugin-strikethrough | Strikethrough | ||
@aomao/plugin-sub | Sous | ||
@aomao/plugin-sup | Souper | ||
@aomao/plugin-tasklist | Liste de tâches | ||
@aomao/plugin-underline | Souligner | ||
@aomao/plugin-undo | Défaire | ||
@aomao/plugin-unorderedlist | Liste non ordonnée | ||
@aomao/plugin-image | Image | ||
@aomao/plugin-table | Tableau | ||
@aomao/plugin-file | Déposer | ||
@aomao/plugin-mark-range | Gamme de marques | ||
@aomao/plugin-math | Formule mathématique | ||
@aomao/plugin-video | Vidéo |
L'éditeur se compose du engine , toolbar et plugins . Le engine nous offre la capacité d'édition de base.
Utilisez npm ou yarn pour installer le package du moteur.
$ npm install @aomao/engine
# or
$ yarn add @aomao/engineNous allons commencer par produire un "Hello World!" Message comme d'habitude.
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 ; Importez le plugin @aomao/plugin-bold plugin gras.
import Bold from '@aomao/plugin-bold' ; Ajoutez le plugin Bold au moteur.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ Bold ] ,
} ) ; Une carte est une zone définie séparément dans l'éditeur, avec son interface utilisateur et sa logique pour rendre le contenu personnalisé à l'intérieur de la carte à l'aide de React , Vue ou d'autres bibliothèques frontales avant d'être montées sur l'éditeur.
IntrodIn @aomao/plugin-codeblock , un plugin de bloc de code avec une langue déroulante en langue qui est rendue à l'aide de React, qui le distingue de Vue3 à l'aide de @aomao/plugin-codeblock-vue .
import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ; Ajoutez le plugin CodeBlock et le composant de carte CodeBlockComponent au moteur.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ CodeBlock ] ,
cards : [ CodeBlockComponent ] ,
} ) ; Le plugin CodeBlock prend en charge markdown par défaut. Vous pouvez le déclencher en tapant la syntaxe du bloc de code au début d'une ligne dans l'éditeur, suivie d'un espace et du nom de la langue, tel que `` JavaScript.
Pour gérer les nœuds plus commodément et réduire la complexité, l'éditeur résume les propriétés et les fonctionnalités du nœud et définit quatre types de nœuds: mark , inline , block et card . Ils sont composés d'attributs, de styles ou de structures HTML différents, et sont uniformément contraints à l'aide d'un schéma.
Un schema simple ressemble à ceci:
{
name : 'p' , // node name
type : 'block' // node type
}De plus, les propriétés, les styles, etc. peuvent également être décrites, par exemple:
{
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 : '*'
}
}Les types de nœuds suivants sont conformes aux règles ci-dessus:
< 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 > Mais sauf que la couleur et le test ont été définis dans schema , d'autres attributs (fond de fond, test1) seront filtrés par l'éditeur pendant le traitement.
Les nœuds de la zone modifiable ont quatre types de nœuds combinés de mark , inline , de bloc , and de carte through the rule. They are composed of different attributes, styles or structures HTML. Certaines contraintes sont imposées à la nidification.
Importez la barre d'outils @aomao/toolbar . En raison de l'interaction complexe, la barre d'outils est essentiellement rendue à l'aide de composants React + Antd UI, tandis que Vue3 utilise @aomao/toolbar-vue
À l'exception de l'interaction d'interface utilisateur, la plupart des travaux de la barre d'outils sont juste pour appeler le moteur pour exécuter les commandes de plugin correspondantes après que différents événements de bouton soient déclenchés. Dans le cas des exigences compliquées ou la nécessité de re-personnaliser l'interface utilisateur, il est plus facile de modifier après la fourche.
import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ; Ajoutez le plugin ToolbarPlugin et le composant de carte ToolbarComponent au moteur, ce qui nous permet d'utiliser la clé de raccourci / dans l'éditeur pour réveiller la barre d'outils de la carte
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ ToolbarPlugin ] ,
cards : [ ToolbarComponent ] ,
} ) ;Rendre la barre d'outils, la barre d'outils a été configurée avec tous les plugins, ici nous n'avons qu'à passer le nom du plugin
return (
...
{
engine && (
< Toolbar
engine = { engine }
items = { [
[ 'collapse' ] ,
[
'bold' ,
] ,
] }
/>
)
}
...
)Pour une configuration de barre d'outils plus complexe, veuillez consulter le document https://editor.aomao.com/config/toolbar
Cette bibliothèque open source écoute les modifications de la structure HTML de la zone d'édition (nœud racine satisfait), utilise MutationObserver pour inverser la structure de données et se connecte et interagit avec YJS via WebSocket pour réaliser l'édition collaborative multi-utilisateurs.
Chaque éditeur, en tant que client, communique et interagit avec le serveur via la fonction WebSocket dans le plugin @aomao/plugin-yjs-websocket .
@aomao/yjs implémente la conversion des données de l'éditeur et Yjs@aomao/plugin-yjs-websocket fournit la fonction client WebSocket de l'éditeur et Yjs@aomao/plugin-yjs-websocket/server fournit le serveur WebSocket de Yjs , écrit dans Node.js, et prend en charge le stockage de données à l'aide MongoDB et LevelDB .Iconfont
Avant d'utiliser cette bibliothèque open source, vous devez installer des dépendances dans le répertoire racine du projet.
yarn install
lerna bootstrap
Après avoir installé les dépendances, vous n'avez qu'à exécuter la commande suivante dans le répertoire racine pour démarrer le projet:
yarn start
La structure du répertoire de développement de cette bibliothèque open source est la suivante:
packages contient le code lié à la barre d'outils etplugins contient tous les pluginsapi fournit l'accès à l'API requis par certains plugins et utilise https://editor.aomao.com comme service d'API par défautyjs-server contient du code de serveur collaboratif, qui peut être démarré par yarn dev .AM-éditeur Vue Exemple
Merci heureux 、 Elena211314 、 ZB201307 、 Cheon pour le don
https://paypal.me/aomoom
