am editor
@aomao
ここには、editableと呼ばれる新しいリッチテキストエディターがあります。
満足できる、代わりにカスタムレンダラーを使用します。このアプローチにより、編集者の動作をより適切に制御できます。
共同編集をサポートする豊富なテキストエディターであるため、React、Vue、およびその他のフロントエンド共通ライブラリを自由に使用して、プラグインを拡張および定義できます。
プレビュー・ドキュメント・プラグイン
Vue2
Vue3
React
Vue2 Demo
Vue2 Nuxt Demo
| パッケージ | バージョン | サイズ | 説明 |
|---|---|---|---|
@aomao/toolbar | Reactに適したツールバー | ||
@aomao/toolbar-vue | Vue3に適したツールバー | ||
am-editor-toolbar-vue2 | Vue2に適したツールバー | ||
@aomao/plugin-alignment | アライメント | ||
@aomao/plugin-embed | 埋め込みurl | ||
@aomao/plugin-backcolor | 背景色 | ||
@aomao/plugin-bold | 大胆な | ||
@aomao/plugin-code | インラインコード | ||
@aomao/plugin-codeblock | Reactに適したCodeBlock | ||
@aomao/plugin-codeblock-vue | codeblock、 Vue3に適しています | ||
am-editor-codeblock-vue2 | codeblock、 Vue2に適しています | ||
@aomao/plugin-fontcolor | フォントカラー | ||
@aomao/plugin-fontfamily | フォントファミリー | ||
@aomao/plugin-fontsize | フォントサイズ | ||
@aomao/plugin-heading | 見出し | ||
@aomao/plugin-hr | 水平ルール | ||
@aomao/plugin-indent | インデント | ||
@aomao/plugin-italic | イタリック | ||
@aomao/plugin-link | リンク、 Reactに適しています | ||
@aomao/plugin-link-vue | Vue3に適したリンク | ||
am-editor-link-vue2 | Vue2に適したリンク | ||
@aomao/plugin-line-height | 線の高さ | ||
@aomao/plugin-mark | マーク | ||
@aomao/plugin-mention | 言及 | ||
@aomao/plugin-orderedlist | 注文リスト | ||
@aomao/plugin-paintformat | 画家のフォーマット | ||
@aomao/plugin-quote | BlockQuote | ||
@aomao/plugin-redo | やり直します | ||
@aomao/plugin-removeformat | フォーマットを削除します | ||
@aomao/plugin-selectall | すべてを選択します | ||
@aomao/plugin-status | 状態 | ||
@aomao/plugin-strikethrough | strikethrough | ||
@aomao/plugin-sub | サブ | ||
@aomao/plugin-sup | すする | ||
@aomao/plugin-tasklist | タスクリスト | ||
@aomao/plugin-underline | 下線 | ||
@aomao/plugin-undo | 元に戻します | ||
@aomao/plugin-unorderedlist | 順序付けられていないリスト | ||
@aomao/plugin-image | 画像 | ||
@aomao/plugin-table | テーブル | ||
@aomao/plugin-file | ファイル | ||
@aomao/plugin-mark-range | マークレンジ | ||
@aomao/plugin-math | 数学式 | ||
@aomao/plugin-video | ビデオ |
編集者は、 engine 、 toolbar 、 pluginsで構成されています。 engine 、コア編集機能を提供します。
npmまたはyarnを使用して、エンジンパッケージをインストールします。
$ npm install @aomao/engine
# or
$ yarn add @aomao/engine「Hello World！」を出力することから始めます。いつものようにメッセージ。
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 ;@aomao/plugin-bold boldプラグインをインポートします。
import Bold from '@aomao/plugin-bold' ;エンジンにBoldプラグインを追加します。
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ Bold ] ,
} ) ;カードは、編集者に別々に定義された領域であり、UIとロジックは、エディターに取り付けられる前にReact 、 Vue 、またはその他のフロントエンドライブラリを使用して、カード内でカスタムコンテンツをレンダリングします。
@aomao/plugin-codeblockを紹介します。これ@aomao/plugin-codeblock-vueを使用してVue3と区別するReactを使用してレンダリングされる言語ドロップダウンを備えたコードブロックプラグインです。
import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ; CodeBlockプラグインとCodeBlockComponentカードコンポーネントをエンジンに追加します。
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ CodeBlock ] ,
cards : [ CodeBlockComponent ] ,
} ) ; CodeBlockプラグインは、デフォルトでmarkdownサポートしています。エディターの行の先頭にコードブロック構文を入力し、「JavaScript」などのスペースと言語名を入力することにより、トリガーできます。
ノードをより便利に管理し、複雑さを減らすために、エディターはノードのプロパティと機能を抽象化し、 mark 、 inline 、 block 、およびcard 4種類のノードを定義します。これらは、さまざまな属性、スタイル、またはHTML構造で構成されており、スキーマを使用して均一に制約されています。
単純なschema次のようになります：
{
name : 'p' , // node name
type : 'block' // node type
}さらに、プロパティ、スタイルなども説明できます。たとえば、：
{
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 : '*'
}
}次のタイプのノードは、上記のルールに準拠しています。
< 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 >ただし、色とテストがschemaで定義されていることを除いて、他の属性（バックグラウンドカラー、test1）は、処理中にエディターによって除外されます。
編集可能な領域のノードには、スキーマルールthrough the mark 、 inline 、ブロック, andカードの4種類の結合ノードがありますrule. They are composed of different attributes, styles or 。特定の制約は、ネストに課されます。
@aomao/toolbarツールバーをインポートします。複雑な相互作用により、ツールバーは基本的にReact + Antd UIコンポーネントを使用してレンダリングされ、 Vue3は@aomao/toolbar-vueを使用します
UIの相互作用を除き、ツールバーの作業のほとんどは、異なるボタンイベントがトリガーされた後、対応するプラグインコマンドを実行するためにエンジンを呼び出すだけです。複雑な要件の場合、またはUIを再カスタマイズする必要性の場合、フォーク後に変更する方が簡単です。
import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ; ToolbarPluginプラグインとToolbarComponentカードコンポーネントをエンジンに追加します。これにより、エディターのショートカットキー/使用してカードツールバーを覚ますことができます
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ ToolbarPlugin ] ,
cards : [ ToolbarComponent ] ,
} ) ;ツールバーをレンダリングするツールバーは、すべてのプラグインで構成されています。ここでは、プラグイン名を渡すだけが必要です。
return (
...
{
engine && (
< Toolbar
engine = { engine }
items = { [
[ 'collapse' ] ,
[
'bold' ,
] ,
] }
/>
)
}
...
)より複雑なツールバーの構成については、ドキュメントhttps://editor.aomao.com/config/toolbarを確認してください
このオープンソースライブラリは、編集領域のHTML構造（コンテンツ誘導性ルートノード）の変更に耳を傾け、 MutationObserverを使用してデータ構造をリバースエンジニアリングし、 WebSocketを介してYJSと接続および相互作用してマルチユーザーの共同編集を実現します。
各エディターは、クライアントとして、 @aomao/plugin-yjs-websocketプラグインのWebSocket関数を介してサーバーと通信および対話します。
@aomao/yjsエディターとYjsデータの変換を実装しています@aomao/plugin-yjs-websocketエディターとYjsのWebSocketクライアント機能を提供します@aomao/plugin-yjs-websocket/server 、node.jsで記述されたYjsのWebSocketサーバーを提供し、 MongoDBとLevelDBを使用してデータストレージをサポートしています。iconfont
このオープンソースライブラリを使用する前に、プロジェクトルートディレクトリに依存関係をインストールする必要があります。
yarn install
lerna bootstrap
依存関係をインストールした後、プロジェクトを開始するには、ルートディレクトリで次のコマンドを実行する必要があります。
yarn start
このオープンソースライブラリの開発ディレクトリ構造は次のとおりです。
packagesには、エンジンとツールバー関連のコードが含まれていますpluginsにはすべてのプラグインが含まれていますapi 、一部のプラグインに必要なAPIアクセスを提供し、https://editor.aomao.comをデフォルトのAPIサービスとして使用しますyjs-serverには、 yarn devが開始できるコラボレーションサーバーコードが含まれています。Am-Editor Vueの例
ありがとうalleashmi
https://paypal.me/aomaocom
