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 | 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支持数据存储。ICONFONT
在使用此开源库之前，您需要在项目根目录中安装依赖项。
yarn install
lerna bootstrap
安装依赖项后，您只需要在根目录中执行以下命令即可启动项目：
yarn start
该开源库的开发目录结构如下：
packages包含引擎和工具栏相关的代码plugins包含所有插件api提供某些插件所需的API访问，并使用https://editor.aomao.com作为默认API服务yjs-server包含协作服务器代码，可以由yarn dev启动。AM-编辑Vue示例
谢谢Chancemi，eLena211314，ZB201307、Cheon捐赠
https://paypal.me/aomaocom
