am editor
@aomao
Hier haben wir einen neuen reichen Texteditor namens Editable, der die native bearbeitbare Immobilie nicht verwendet
zufriedenbarverwendet aber stattdessen einen benutzerdefinierten Renderer. Dieser Ansatz ermöglicht es uns, das Verhalten des Editors besser zu kontrollieren.
Als reichhaltiger Texteditor, der die kollaborative Bearbeitung unterstützt, können Sie React, Vue und andere gemeinsame Bibliotheken frei verwenden, um Plugins zu erweitern und zu definieren.
Vorschau · Dokument · Plugins
Vue2
Vue3
React
Vue2 Demo
Vue2 Nuxt Demo
| Paket | Version | Größe | Beschreibung |
|---|---|---|---|
@aomao/toolbar | Symbolleiste, geeignet für React | ||
@aomao/toolbar-vue | Symbolleiste, geeignet für Vue3 | ||
am-editor-toolbar-vue2 | Symbolleiste, geeignet für Vue2 | ||
@aomao/plugin-alignment | Ausrichtung | ||
@aomao/plugin-embed | URL einbetten | ||
@aomao/plugin-backcolor | Hintergrundfarbe | ||
@aomao/plugin-bold | Deutlich | ||
@aomao/plugin-code | Inline -Code | ||
@aomao/plugin-codeblock | CodeBlock, geeignet für React | ||
@aomao/plugin-codeblock-vue | CodeBlock, geeignet für Vue3 | ||
am-editor-codeblock-vue2 | CodeBlock, geeignet für Vue2 | ||
@aomao/plugin-fontcolor | Schriftfarbe | ||
@aomao/plugin-fontfamily | Schriftfamilie | ||
@aomao/plugin-fontsize | Schriftgröße | ||
@aomao/plugin-heading | Überschrift | ||
@aomao/plugin-hr | Horizontale Regel | ||
@aomao/plugin-indent | Vertiefung | ||
@aomao/plugin-italic | Kursiv | ||
@aomao/plugin-link | Link, geeignet für React | ||
@aomao/plugin-link-vue | Link, geeignet für Vue3 | ||
am-editor-link-vue2 | Link, geeignet für Vue2 | ||
@aomao/plugin-line-height | Linienhöhe | ||
@aomao/plugin-mark | Markieren | ||
@aomao/plugin-mention | Erwähnen | ||
@aomao/plugin-orderedlist | Bestellte Liste | ||
@aomao/plugin-paintformat | Formatmaler | ||
@aomao/plugin-quote | Blockquote | ||
@aomao/plugin-redo | Wiederholen | ||
@aomao/plugin-removeformat | Format entfernen | ||
@aomao/plugin-selectall | Wählen Sie alle aus | ||
@aomao/plugin-status | Status | ||
@aomao/plugin-strikethrough | Schlägen | ||
@aomao/plugin-sub | Sub | ||
@aomao/plugin-sup | Sup | ||
@aomao/plugin-tasklist | Aufgabenliste | ||
@aomao/plugin-underline | Unterstreichen | ||
@aomao/plugin-undo | Rückgängig machen | ||
@aomao/plugin-unorderedlist | Ungeordnete Liste | ||
@aomao/plugin-image | Bild | ||
@aomao/plugin-table | Tisch | ||
@aomao/plugin-file | Datei | ||
@aomao/plugin-mark-range | Mark -Bereich | ||
@aomao/plugin-math | Mathematische Formel | ||
@aomao/plugin-video | Video |
Der Herausgeber besteht aus engine , toolbar und plugins . Der engine bietet uns die Kernbearbeitungsfunktion.
Verwenden Sie npm oder yarn , um das Motorpaket zu installieren.
$ npm install @aomao/engine
# or
$ yarn add @aomao/engineWir beginnen zunächst eine "Hallo Welt!" Nachricht wie gewohnt.
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 ; Importieren Sie das @aomao/plugin-bold -Fett-Plugin.
import Bold from '@aomao/plugin-bold' ; Fügen Sie das Bold Plugin zum Motor hinzu.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ Bold ] ,
} ) ; Eine Karte ist ein separat definierter Bereich im Editor mit der Benutzeroberfläche und der Logik, um benutzerdefinierte Inhalte in der Karte mit React , Vue oder anderen Front-End-Bibliotheken zu rendern, bevor sie an den Editor montiert werden.
Führen Sie @aomao/plugin-codeblock ein, ein Codeblock-Plugin mit einem Sprachdropfen, der mit React gerendert wird, das es von VUE3 unter Verwendung von @aomao/plugin-codeblock-vue unterscheidet.
import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ; Fügen Sie das CodeBlock -Plugin und die CodeBlockComponent -Kartenkomponente in die Engine hinzu.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ CodeBlock ] ,
cards : [ CodeBlockComponent ] ,
} ) ; Das CodeBlock -Plugin unterstützt markdown standardmäßig. Sie können es auslösen, indem Sie die Codeblock -Syntax am Anfang einer Zeile im Editor eingeben, gefolgt von einem Raum und dem Sprachnamen wie "` `` JavaScript.
Um Knoten bequemer zu verwalten und die Komplexität zu verringern, werden die Editors die Noteneigenschaften und die Funktionalität abgebaut und definiert vier Arten von Knoten: mark , inline , block und card . Sie bestehen aus verschiedenen Attributen, Stilen oder HTML -Strukturen und werden mit einem Schema einheitlich eingeschränkt.
Ein einfaches schema sieht so aus:
{
name : 'p' , // node name
type : 'block' // node type
}Darüber hinaus können Eigenschaften, Stile usw. auch beschrieben werden, zum Beispiel:
{
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 : '*'
}
}Die folgenden Arten von Knoten entsprechen den oben genannten Regeln:
< 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 > Abgesehen davon, dass Farbe und Test im schema definiert wurden, werden andere Attribute (Hintergrundfarbe, Test1) während der Verarbeitung vom Editor herausgefiltert.
Die Knoten im bearbeitbaren Bereich haben vier Arten von kombinierten mark , inline , Block , and Karte through the Schema rule. They are composed of different attributes, styles or HTML` -Strukturen. Bestimmte Einschränkungen werden zur Verhinderung auferlegt.
Importieren Sie die Symbolleiste @aomao/toolbar . Aufgrund der komplexen Wechselwirkung wird die Symbolleiste im Grunde genommen unter Verwendung von React + Antd UI-Komponenten gerendert, während Vue3 @aomao/toolbar-vue verwendet
Mit Ausnahme der UI -Interaktion besteht die meisten Arbeiten der Symbolleiste darin, die Engine zu rufen, um die entsprechenden Plugin -Befehle auszuführen, nachdem verschiedene Tastenereignisse ausgelöst wurden. Bei komplizierten Anforderungen oder der Notwendigkeit, die Benutzeroberfläche neu zu schützen, ist es nach der Gabel einfacher, zu ändern.
import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ; Fügen Sie das Symbollbarplugin ToolbarPlugin und ToolbarComponent der ToolBarbarcomponent zum Engine hinzu, mit dem wir den T -Shortcut -Schlüssel / im Editor verwenden können, um die Karten -Symbolleiste aufzuwecken
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ ToolbarPlugin ] ,
cards : [ ToolbarComponent ] ,
} ) ;Rendering -Symbolleiste, die Symbolleiste wurde mit allen Plugins konfiguriert. Hier müssen wir nur den Plugin -Namen übergeben
return (
...
{
engine && (
< Toolbar
engine = { engine }
items = { [
[ 'collapse' ] ,
[
'bold' ,
] ,
] }
/>
)
}
...
)Weitere komplexe Symbolleistenkonfigurationen finden Sie im Dokument https://editor.aomao.com/config/toolbar
Diese Open-Source-Bibliothek hört auf Änderungen in der HTML Struktur des Bearbeitungsbereichs (inhaltlicher Root-Knoten) zu, verwendet MutationObserver , um die Datenstruktur umzukehren, und verbindet und interagiert mit YJs über WebSocket , um eine kollaborative Multi-Benutzer-Bearbeitung zu erreichen.
Jeder Editor als Client kommuniziert und interagiert mit dem Server über die WebSocket -Funktion im @aomao/plugin-yjs-websocket Plugin.
@aomao/yjs implementiert die Konvertierung von Editor- und Yjs -Daten@aomao/plugin-yjs-websocket bietet die WebSocket Client-Funktion des Editors und Yjs@aomao/plugin-yjs-websocket/server stellt den in node.js geschriebenen WebSocket Server von Yjs bereit und unterstützt den Datenspeicher mithilfe von MongoDB und LevelDB .IConfont
Bevor Sie diese Open-Source-Bibliothek verwenden, müssen Sie Abhängigkeiten im Projektroot-Verzeichnis installieren.
yarn install
lerna bootstrap
Nach der Installation der Abhängigkeiten müssen Sie nur den folgenden Befehl im Stammverzeichnis ausführen, um das Projekt zu starten:
yarn start
Die Entwicklungsverzeichnisstruktur dieser Open-Source-Bibliothek lautet wie folgt:
packages enthält den Code des Motors und des Symbolleistensplugins enthält alle Pluginsapi bietet den API -Zugriff, den einige Plugins benötigen, und verwendet https://editor.aomao.com als Standard -API -Dienstyjs-server enthält einen kollaborativen Servercode, der von yarn dev gestartet werden kann.AM-Editor Vue-Beispiel
Vielen Dank erfreudig 、 Elena211314 、 ZB201307 、 Cheon für Spende
https://paypal.me/aomaocom
