am editor下載 - am editor源代碼下載

am editor

其他資源

@aomao

下載

在這裡，我們有一個新的豐富文本編輯器，稱為Editable，它不使用本機可編輯的屬性~~可滿足的~~，而是使用自定義渲染器。這種方法使我們能夠更好地控制編輯器的行為。

AM編輯

一個支持協作編輯的豐富文本編輯器，您可以自由使用React，Vue和其他前端通用庫來擴展和定義插件。

預覽·文檔·插件

Vue2

Vue3

React

Vue2 Demo

Vue2 Nuxt Demo

特徵

？開箱即用的解決方案，還有數十個豐富的插件，以滿足大多數需求
高度可擴展的，除了用於標記，內聯和塊類型的基本插件外，我們還提供與前端庫相結合的卡組件，例如React和Vue，以渲染插件UI
？豐富的多媒體支持，不僅支持圖像和音頻/視頻，而且還支持嵌入多媒體內容
支持Markdown語法
？支持國際化
引擎純粹是用JavaScript編寫的，而無需依賴任何前端庫，可以使用React和Vue等前端庫來渲染插件。可以輕鬆處理複雜的體系結構
內置的協作編輯解決方案，使用的輕巧配置
與大多數最新的移動瀏覽器兼容

插件

包裹	版本	尺寸	描述
`@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`			CodeBlock，適用於`React`
`@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`			罷工
`@aomao/plugin-sub`			子
`@aomao/plugin-sup`			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 ，一個使用React渲染的語言下拉插件的代碼塊插件，該插件使用react渲染，該插件使用@aomao/plugin-codeblock-vue將其與VUE3區分開。

 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 。它們由不同的屬性，樣式或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卡的組合節點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提供Yjs的WebSocket ，用node.js編寫，並使用MongoDB和LevelDB支持數據存儲。