...
- withEditableElement 可编辑元素高阶组件
- 可编辑元素上下文注入（查看 context 上下文）
- 可编辑元素根据不同的元素配置进行组件渲染，可编辑元素组件列表:
可编辑元素组件(名称不固定) | 基础元素组件 | 基础元素引用 | 可编辑方法 | 可编辑方法引用 |
|---|---|---|---|---|
EditableImage | Image | @fe-plugin/components/lib/templates/cmps/image | withEditableImage |
import { withEditableImage, withEditableButton, withEditableText, |
withEditableDialog, withEditableInput, withEditableTextarea, withEditableFileUploader, |
withEditableShape } from "@fe-plugin/components/lib/templates/editable-element"; |
可编辑元素组件(名称不固定)
基础元素组件
可编辑方法
EditableImage
Image
withEditableImage(key):void
EditableButton | Button |
@fe-plugin/components/lib/templates/cmps/button | withEditableButton | ||
EditableText | <p>、<article>标签 | 原生标签 | withEditableText |
EditableDialog | Dialog | @fe-plugin/components/lib/templates/cmps/dialog | withEditableDialog |
EditableInput |
| Input | @fe-plugin/components/lib/templates/cmps/input |
| withEditableInput | |
EditableTextarea |
EditableSubmit
| Textarea | @fe-plugin/components/lib/templates/cmps/textarea | withEditableTextarea |
EditableFileUploader |
EditableCheckbox
| FileUploader | @fe-plugin/components/lib/templates/cmps/file-uploader | withEditableFileUploader |
EditableShape | Shape | @fe-plugin/components/lib/templates/cmps/shape |
EditableSelect
EditableDialog
| withEditableShape |
4、示例：
构建可编辑组件、可编辑元素
| 代码块 | ||||
|---|---|---|---|---|
| ||||
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>
);
} |
2、main模块下渲染型组件创建锚 7 7
| 7 | |
| 7 |
渲染引擎渲染组件，有main模块引用，需要与编辑器可编辑组件对应渲染，并且需要附加逻辑。
...
| title | 创建一个渲染按钮 |
|---|---|
| linenumbers | true |
...
| 组件名称基础组件名称 | 组件参数渲染组件引入 | 引入模块 |
|---|---|---|
| Button | data:ComponentElementModel element元素配置 | @fe-plugin/components/lib/h5/cmps/button |
Image | @fe-plugin/components/lib/h5/cmps/image | |
Text | @fe-plugin/components/lib/h5/cmps/text | |
Dialog | @fe-plugin/components/lib/h5/cmps/confirm-dialog |
示例：
| Dialog |
| Input |
| @fe-plugin/components/lib/h5/cmps/ |
...
3、编辑器设置面板公用组件
...
template、main模块中存在的弹出层模块，称之为内置页，可做组件的弹出层逻辑渲染。
...
1、template组件中的内置页
内置页在template模块中创建使用可编辑型组件创建。
示例：termplate模块中内置页的创建
...
| title | template模块内置页创建 |
|---|---|
| linenumbers | true |
...
| input |
| Textarea |
| @fe-plugin/components/lib/ |
...
| h5/cmps/textarea | |
| FileUploader | @fe-plugin/components/lib/ |
...
| h5/cmps/ |
...
2、main组件中的内置页
内置页在main模块中的创建使用渲染型组件创建。
示例：main模块中内置页的创建
...
| title | 可弹出内置页渲染 |
|---|---|
| linenumbers | true |
...
| file-uploader | |
| 公共组件名称 | 渲染组件引入 |
|---|---|
| ConfirmDialog 确认弹窗 |
@fe-plugin/components/lib/h5/confirm- |
...
dialog |
...
3、渲染
了解组件的类型，与创建后，不同模块最终需要对组件进行组合，形成最终的渲染。
...
引入main模块上下文（点击查看main模块的创建）
创建渲染组件（点击查看渲染型组件创建）
内置页的引用（点击查看main模块下内置页创建）
示例:创建一个main组件
...
| title | main组件 |
|---|---|
| linenumbers | true |
...
| QrCode 二维码组件 |
| @fe-plugin/components/lib/ |
...
| h5/qrcode |
示例：
| 代码块 | ||
|---|---|---|
|
...
引入template模块上下文（点击查看template模块的创建 ）
创建可编辑组件（点击查看编辑型组件创建）
内置页的引用（点击查看template模块下内置页创建）
示例:创建一个template组件
| 代码块 | ||||
|---|---|---|---|---|
| ||||
import React from "react"; import { DependencyContext }Button from "@fe-plugin/components/lib/context"; import { getComponentInfo } from "@fe-plugin/common/lib/component-info"; import { withEditableComponent } from "@fe-plugin/components/lib/templates/editable-component"; import { withEditableButton } from "@fe-plugin/components/lib/templates/editable-element"; import BaseButton from "@fe-plugin/components/lib/templates/h5/cmps/button"; import * as ELEMENT_KEY from "constants/element-keys"; // 创建一个可编辑组件 const EditableComponent = withEditableComponent(); // 编辑器舞台编辑组件 class Template extends React.Componentexport default function RenderButton(props) { //获取上下文 static contextType = DependencyContext; // 渲染组件 renderCmp() { // 根据元素配置的key值创建一个可编辑元素 const EditableButtonconst handleClick = withEditableButton(ELEMENT_KEY.Button)((element) => { return <BaseButton data={element} style={element.style} />; }); return ( <EditableComponent> <div> <EditableButton /> </div> </EditableComponent> ); } } export default Template; |
...
渲染setting模块需要以下步骤:
1、在default-setting中将 hasComponentSetting 设置为 true
2、在模块入口传入onChange、initValue参数，提供数据初始化，数据更改等功能(点击查看模块入口)
示例:创建一个setting组件
...
| title | main组件 |
|---|---|
| linenumbers | true |
...
console.log("处理按钮的点击事件");
};
//从外部到element元素数据 填充
return <Button data={props.element} onClick={handleClick} />;
} |
3、编辑器设置面板公用组件
(待补充)
...