1、组件

1、概述

  • 组件分为俩种，编辑器编辑型组件，渲染引擎渲染型组件。
  • 构建编辑器中可编辑基础元素由两部分构成，基础元素组件、可编辑方法，可编辑方法会提供编辑能力赋予基础组件，基础组件负责渲染。

2、组件介绍

1、template模块下编辑型组件创建

编辑型组件分为两种，可编辑组件、可编辑元素。

1、图示


2、可编辑组件

  • withEditableComponent  可编辑组件高阶组件，可生成可编辑组件
  • 可编辑组件上下文注入（查看 context 上下文）

3、可编辑元素

  • 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";

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/inputwithEditableInput

EditableTextarea

Textarea@fe-plugin/components/lib/templates/cmps/textareawithEditableTextarea

EditableFileUploader

FileUploader@fe-plugin/components/lib/templates/cmps/file-uploaderwithEditableFileUploader

EditableShape

Shape@fe-plugin/components/lib/templates/cmps/shapewithEditableShape

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模块下渲染型组件创建

渲染引擎渲染组件，有main模块引用，需要与编辑器可编辑组件对应渲染，并且需要附加逻辑。

基础组件名称渲染组件引入
Button

@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/Dialog
Input@fe-plugin/components/lib/h5/cmps/input
Textarea@fe-plugin/components/lib/h5/cmps/textarea
FileUploader@fe-plugin/components/lib/h5/cmps/file-uploader
公共组件名称渲染组件引入
ConfirmDialog 确认弹窗

@fe-plugin/components/lib/h5/confirm-dialog

QrCode 二维码组件@fe-plugin/components/lib/h5/qrcode
示例：
创建一个渲染按钮
import React from "react";
import Button from "@fe-plugin/components/lib/h5/cmps/button";


export default function RenderButton(props) {
  const handleClick = () => {
    console.log("处理按钮的点击事件");
  };
  //从外部到element元素数据 填充
  return <Button data={props.element} onClick={handleClick} />;
}


3、编辑器设置面板公用组件

(待补充)

  • 无标签