...
1、组件
1、概述
- 组件分为俩种，编辑器编辑型组件，渲染引擎渲染型组件。
- 构建编辑器中可编辑基础元素由两部分构成，基础元素组件、可编辑方法，可编辑方法会提供编辑能力赋予基础组件，基础组件负责渲染。
2、组件介绍
1、template模块下编辑型组件创建锚 6 6
| 6 | |
| 6 |
编辑型组件分为两种，可编辑组件、可编辑元素。
1、图示
2、可编辑组件
- withEditableComponent 可编辑组件高阶组件，可生成可编辑组件
- 可编辑组件上下文注入（上下文注入点击查看可编辑组件上下文注入（查看 context 上下文）
3、可编辑元素
- withEditableElement 可编辑元素高阶组件
- 可编辑元素上下文注入（上下文注入点击查看可编辑元素上下文注入（查看 context 上下文）
- 可编辑元素根据不同的元素配置进行组件渲染，可编辑元素组件列表:
| 可编辑方法模块 | ||
|---|---|---|
import { ... | ||
可编辑元素组件(名称不固定) | 基础元素组件 | 可编辑方法 |
EditableImage | Image | withEditableImage(key):void |
EditableButton | Button | withEditableButton(key):void |
EditableText | ||
<p>、<article>标签 | withEditableText(key):void | |
EditableDialog | Dialog | withEditableDialog(key):void |
EditableRadio | withEditableRadio | |
EditableInput | withEditableInput | |
EditableTextarea | withEditableTextarea | |
EditableSubmit | withEditableSubmit | |
EditableFileUploader | withEditableFileUploader | |
EditableCheckbox | withEditableCheckbox | |
EditableSelect | withEditableSelect | |
EditableDialog | withEditableDialog | |
EditableShape | withEditableShape |
4、示例：
构建一个拥有可编辑组件、可编辑按钮元素的template模块下编辑型组件。构建可编辑组件、可编辑元素
| 代码块 | ||||
|---|---|---|---|---|
| ||||
import React from "react";
import { withEditableComponent } from "@fe-plugin/components/lib/templates/editable-component";
import { withEditableText } from "@fe-plugin/components/lib/templates/editable-element";
import BaseButton from "@fe-plugin/components/lib/templates/cmps/button";
// 创建一个可编辑组件
const EditableComponent = withEditableComponent();
// 根据元素配置的key值创建一个可编辑元素
const EditableButton = withEditableButton("元素key值")((element) => {
return <BaseButton data={element} style={element.style} />;
});
// 编辑器组件的渲染(一个带有可编辑按钮元素的组件)
function EditerCmpRender() {
return (
<EditableComponent>
<EditableButton />
</EditableComponent>
);
} |
...