AoMao Editor

<div data-element="root" contenteditable="true">
	<p>Hello world!</p>
	<p><br /></p>
</div>

{
	type: "div",
	"data-element": "root",
	"contenteditable": "true"
	children: [
		{
			type: "p",
			children: [{
				text: "Hello world!"
			




    
}]
		},
		{
			type: "p",
			children: [
				{
					type: "br",
					children: []
				}
			]
		}
	]
}

{
  name: 'p', // 节点名称
  type: 'block' // 节点类型
}

{
  name: 'span', // 节点名称
  type: 'mark', // 节点类型
  attributes: {
    // 节点有一个 style 属性
    style: {
      // 必须包含一个color的样式
      color: {
        required: true, // 必须包含
        value: '@color' // 值是一个符合css规范的颜色值，@color 是编辑器内部定义的颜色效验，此处也可以使用方法、正则表达式去判断是否符合需要的规则
      }
    },
    // 可选的包含一个 test 属性，他的值可以是任意的，但不是必须的
    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>

<card type="block" name="codeblock" editable="false" value="data:%7B%22id%22%3A%22ArADP%22%2C%22type%22%3A%22block%22%2C%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20a%20%3D%200%3B%22%7D"></card>
<p data-id="pd157317-RSLJ4X6g">
</p>

import { CodeBlockComponent } from '@aomao/plugin-codeblock';

data:{"id":"ArADP","type":"block","mode":"javascript","code":"const a = 0;"}

// 使用js做演示，后端处理也是这个逻辑




    
const value = encodeURIComponent(JSON.stringify({"id":"ArADP","type":"block","mode":"javascript","code":"const a = 0;"}));
const cardValue = `data:${value}`
<card type="block" name="codeblock" editable="false" value=`data:${value}`></card>

...
// 导入编辑器
import Engine from '@aomao/engine'
// 导入代码块插件
import CodeBlock, { CodeBlockComponent } from '@aomao/plugin-codeblock'
...
// 编辑器渲染节点
const container = useRef<HTMLDivElement | null>(null);
useEffect(() => {
    // 实例化引擎
    const engine = new Engine(container.current, {
        plugins: [CodeBlock], // 传入需要支持的插件
        cards: [CodeBlockComponent] //  传入需要支持的卡片
    });
    // 监听编辑器值改变
    engine.on('change', value => {
        // 打印当前变更的值
        console.log('am-editor value:', value)
        // 或者可以通过 engine.getValue() 获取值
    })
    // 给编辑器赋值
    engine.setValue('<card type="block" name="codeblock" editable="false" value="data:%7B%22id%22%3A%22ArADP%22%2C%22type%22%3A%22block%22%2C%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20a%20%3D%200%3B%22%7D"></card>')
    return () => {
        engine.destroy();
    };
}, []);
return <div ref={container}></div>;

...
// 导入视图渲染器
import { View } from '@aomao/engine';
// 导入代码块插件
import CodeBlock, { CodeBlockComponent } from '@aomao/plugin-codeblock'
...
const container = useRef<HTMLDivElement | null>(null);
useEffect(() => {
    // 实例化视图渲染器
    const view = new View (container.current, {
        plugins: [CodeBlock], // 传入需要支持的插件
        cards: [CodeBlockComponent] //  传入需要支持的卡片
    });
    // 渲染到容器
    view.render('<card type="block" name="codeblock" editable="false" value="data:%7B%22id%22%3A%22ArADP%22%2C%22type%22%3A%22block%22%2C%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20a%20%3D%200%3B%22%7D"></card>')
    return () => {
        view.destroy();
    };
}, []




    
);
return <div ref={container}></div>;

<div data-element="root" class="am-engine">
	<div
		data-id="de4bd68e-VhAUT2WQ"
		data-card-editable="false"
		class=""
		data-syntax="javascript"
	>
		<div
			class="data-codeblock-content"
			style="border: 1px solid rgb(232, 232, 232); max-width: 750px; color: rgb(38, 38, 38); margin: 0px; padding: 0px; background: rgb(249, 249, 249);"
		>
			<div
				class="CodeMirror"
				style="color: rgb(89, 89, 89); margin: 0px; padding: 16px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"
			>
				<pre
					class="cm-s-default"
					style="color: rgb(89, 89, 89);




    
 margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"
				><span class="cm-keyword" style="color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">const</span> <span class="cm-def" style="color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">a</span> <span class="cm-operator" style="color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0




    
% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span> <span class="cm-number" style="color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">0</span>;</pre>
			</div>
		</div>
	</div>
	<p data-id="pd157317-RSLJ4X6g"><br /></p>
</div>

...
// 我们把这段html通过setHtml方法设置给编辑器，编辑器会自动解析成对应的卡片并且渲染
engine.setHtml(`<div data-element="root" class="am-engine">
    <div data-id="de4bd68e-VhAUT2WQ" data-card-editable="false" class="" data-syntax="javascript"><div class="data-codeblock-content" style="border: 1px solid rgb(232, 232, 232); max-width: 750px; color: rgb(38, 38, 38); margin: 0px; padding: 0px; background: rgb(249, 249, 249);"><div class="CodeMirror" style="color: rgb(89, 89, 89); margin: 0px; padding: 16px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-keyword" style="color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">const</span> <span class="cm-def" style="color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">a</span> <span class="cm-operator" style="color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span> <span class="cm-number" style="color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">0</span>;</pre></div></div></div>
    <p data-id="pd157317-RSLJ4X6g"><br></p>
</div> `)
// 通过 getHtml 方法，我们可以获取到当前编辑器中对应的 html，此时我们不需要考虑我们编辑器中是使用 setHtml 还是 setValue 设置的值，我们都能通过 getHtml 获取到对应的 html
console.log(engine.getHtml())
...

{
	"type": "div",
	"children": [
		{
			"type": "div",
			"data-card-value": "data:%7B%22id%22%3A%22ArADP%22%2C%22type%22%3A%22block%22%2C%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20a%20%3D%200%3B%22%7D",
			"data-card-type": "block",
			"data-card-key": "codeblock",
			"data-id": "de4bd68e-VhAUT2WQ",
			"children": []
		},
		{
			"type": "p",
			"data-id": "pd157317-RSLJ4X6g",
			"children": [
				{
					"type": "br",
					"children": []
				}
			]
		}
	]
}

{
	// 节点的类型
	type: "div",
	// 子节点
	children: [
		...
	]
	// ... 其它自定义属性
}

{
	// 节点的文本
	text: "hello world",
}

...
// 我们把这段html通过setHtml方法设置给编辑器，编辑器会自动解析成对应的卡片并且渲染
engine.setJsonValue({
		type: 'div',
		children: [
			{
				type: 'div',
				'data-card-value': 'data:%7B%22id%22%3A%22ArADP%22%2C%22type%22%3A%22block%22%2C%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20a%20%3D%200%3B%22%7D',
				'data-card-type': 'block',
				'data-card-key': 'codeblock',
				'data-id': 'de4bd68e-VhAUT2WQ',
				children: []
			},
			{
				type: 'p',
				'data-id': 'pd157317-RSLJ4X6g',
				children: [
					{
						type: 'br',
						children: []
					}
				]
			}
		]
	})
// 通过 getJsonValue 方法，我们可以获取到当前编辑器中对应的 json，此时我们不需要考虑我们编辑器中是使用 setHtml 还是 setValue 设置的值，我们都能通过 getJsonValue 获取到对应的 json
console.log(engine.getJsonValue())
...