页面历史记录

...

概述：

渲染模块中会有对应的render方法将组件逻辑渲染出来，最终注册到编辑器、渲染引擎使用。但组件的构建需要依赖default-setting、用户信息等数据支持，所以在构建组件之前需要创建一个上下文，提供此类数据给组件使用。

1、

...

注意:

DependencyContext只能提供给template、setting模块相关组件使用(main模块为PReact构建，所以无法正常调用)。

template模块中，还需要对可编辑组件，和可编辑元素进行对应的上下文注入。

2、withDependencyContext 高阶组件

main模块使用withDependencyContext方法进行上下文关联

3、示例

1、上下文的注入可查看各个模块创建详细示例，

点击查看template模块创建

点击查看setting模块创建

点击查看main模块创建

2、组件中上下文的获取可查看各个模块组件创建详细示例

点击查看template组件创建

点击查看setting组件创建

点击查看main组件创建

2、组件

1、概述

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

2、组件介绍

...

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

1、图示

Image Removed

2、可编辑组件

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

3、可编辑元素

withEditableElement 可编辑元素高阶组件
可编辑元素上下文注入（上下文注入点击查看）
可编辑元素根据不同的元素配置进行组件渲染，可编辑元素组件列表:

...

可编辑元素组件

...

基础元素组件

...

可编辑方法

...

EditableImage

...

Image

...

withEditableImage(key):void

...

EditableButton

...

Button

...

withEditableButton(key):void

...

EditableText

...

<p> 标签

...

withEditableText(key):void

...

EditableDialog

...

Dialog

...

withEditableDialog(key):void

概述

了解组件的类型，与创建后，不同模块最终需要对组件进行组合，形成最终的渲染。

2、渲染介绍

1、template模块组件渲染
锚
10
10

引入template模块上下文（查看 template 模块）

创建可编辑组件（查看 template模块下可编辑组件）

内置页的引用（查看 template 内置页创建）

示例:创建一个template组件

...

构建一个拥有可编辑组件、可编辑按钮元素的template模块下编辑型组件。

代码块

title	创建编辑器可编辑组件teplate组件
linenumbers	true

import React from "react";
import { DependencyContext } 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 { withEditableTextwithEditableButton } from "@fe-plugin/components/lib/templates/editable-element";
import BaseButton from "@fe-plugin/components/lib/templates/cmps/button";
import * as ELEMENT_KEY from "constants/element-keys";

// 创建一个可编辑组件
const EditableComponent = withEditableComponent();

// 编辑器舞台编辑组件
class Template extends React.Component {
  //获取上下文
  static contextType = DependencyContext;

  // 渲染组件
  renderCmp() {
    // 根据元素配置的key值创建一个可编辑元素
    const EditableButton = withEditableButton("元素key值"ELEMENT_KEY.Button)((element) => {
      return <BaseButton data={element} style={element.style} />;
    });

// 编辑器组件的渲染(一个带有可编辑按钮元素的组件)
function EditerCmpRender() {
  return (
      <EditableComponent>
       <EditableButton /><div>
    </EditableComponent>
  );
}

...

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

...

@fe-plugin/components/lib/h5/cmps/button

...

Image

...

Text

...

Dialog

...

示例：

代码块

title	创建一个渲染按钮
linenumbers	true

import React from "react";
import Button from "@fe-plugin/components/lib/h5/cmps/button";


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

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

...


}

export default Template;

3、setting模块组件渲染
锚
11
11

渲染setting模块需要以下步骤:

1、在default-setting中将 hasComponentSetting 设置为 true

2、在模块入口传入onChange、initValue参数，提供数据初始化，数据更改等功能(点击查看模块入口)

示例:创建一个setting组件

...

template、main模块中存在的弹出层模块，称之为内置页，可做组件的弹出层逻辑渲染。

...

1、template组件中的内置页

内置页在template模块中创建使用可编辑型组件创建。

示例：termplate模块中内置页的创建

代码块

title	template模块内置页创建setting组件
linenumbers	true

import React from "react";
import {
  withEditableButton,
  withEditableDialog,
DependencyContext } from "@fe-plugin/components/lib/templates/editable-elementcontext";
import { getComponentInfo } from "@fe-plugin/common/lib/component-info";
import { getElementByKeywithEditableComponent } from "@fe-plugin/commoncomponents/lib/templates/editable-component-element";
import { BaseDialogwithEditableButton } from "@fe-plugin/components/lib/templates/cmps/dialogeditable-element";
import BaseButton from "@fe-plugin/components/lib/templates/cmps/button";
import * as ELEMENT_KEY from "constants/element-keys";

// 创建一个可编辑组件
const EditableComponent = withEditableComponent();

// 编辑器舞台编辑组件
class InlinePageTemplate extends React.Component {
  //获取上下文
  static contextType = DependencyContext;

  render() {
    const { config } = this.context;

    // 获取信息，并创建获取element的方法渲染组件
    const componentInfo = getComponentInfo(config);
    const getElement = (type) => getElementByKey(componentInfo.elements, type);

    // 获取弹窗元素
    const dialogElement = getElement(ELEMENT_KEY.POPUP_DIALOG);

renderCmp() {
    // 根据元素配置的key值创建一个可编辑元素
    const EditableButton = withEditableDialogwithEditableButton(ELEMENT_KEY.Button)((element) => {
      return <BaseButton data={element} style={element.style} />;
    });

    const EditableDialog = withEditableButton(ELEMENT_KEY.Dialog)((element) => {return (
      return (<EditableComponent>
        <BaseDialog data={element}><div>
          <EditableButton />
        </BaseDialog>
      );
    });

    return (
      <Dialog name={ELEMENT_KEY.POPUP_DIALOG}>
        <EditableDialog />div>
      </Dialog>EditableComponent>
    );
  }
}

export default InlinePage;

...

Template;

...

2、main组件中的内置页

内置页在main模块中的创建使用渲染型组件创建。

示例：main模块中内置页的创建

代码块

title	可弹出内置页渲染
linenumbers	true

import React from "react";
import Dialog from "@fe-plugin/components/lib/h5/confirm-dialog";
import withPopup from "@fe-plugin/components/lib/h5/with-popup";
import { getElementByKey } from "@fe-plugin/common/lib/component-element";
import * as ELEMENT_KEY from "constants/element-keys";


// 可弹出内置页渲染
function InlineRender(props) {
  // 获取main组件传入的参数
  const { componentInfo, onClose, getElement } = props;
  const getElement = (type) => getElementByKey(componentInfo, type);

  return (
    <Dialog
      dialog={getElement(ELEMENT_KEY.POPUP_DIALOG)}
      image={getElement(ELEMENT_KEY.IMAGE_B)}
      button={getElement(ELEMENT_KEY.BTN_B)}
      onClick={onClose}
      onClose={onClose}
    />
  );
}

export default withPopup(InlineRender);

3、渲染

了解组件的类型，与创建后，不同模块最终需要对组件进行组合，形成最终的渲染。

1、main模块组件渲染
锚
9
9

引入main模块上下文（点击查看main模块的创建1、引入main模块上下文（查看 main 模块）

创建渲染组件（点击查看渲染型组件创建2、创建渲染组件（查看 main模块下渲染组件）

内置页的引用（点击查看main模块下内置页创建3、内置页的引用（查看 main内置页创建）

示例:创建一个main组件

代码块

title	main组件
linenumbers	true

import React from "react";
import { DependencyContext } from "@fe-plugin/components/lib/context";
import { getComponentInfo } from "@fe-plugin/common/lib/component-info";
import { getElementByKey } from "@fe-plugin/common/lib/component-element";
import * as ELEMENT_KEY from "constants/element-keys";


//创建main组件
class Main extends React.Component {
  // 获取上下文
  static contextType = DependencyContext;

  // 处理逻辑
  hanldeClick() {
    console.log("点击了按钮");
  }

  render() {
    // 从上上下文获取 配置
    const { config } = this.context;

    // 获取信息，并创建获取element的方法
    const componentInfo = getComponentInfo(config);
    const getElement = (type) => getElementByKey(componentInfo.elements, type);

    return (
      <div>
        <Button
          data={getElement(ELEMENT_KEY.BTN_A)}
          onClick={() => hanldeClickAnswerButton()}
        />
      </div>
    );
  }
}

export default Main;

...

3、内置页
锚

...

8
8

template、main模块中存在的弹出层模块，称之为内置页，可做组件的弹出层逻辑渲染。

锚

	12
	12

1、template组件中的内置页

内置页在template模块中创建使用可编辑型组件创建。

示例：termplate模块中内置页的创建

...

引入template模块上下文（点击查看template模块的创建 ）

创建可编辑组件（点击查看编辑型组件创建）

内置页的引用（点击查看template模块下内置页创建）

示例:创建一个template组件

代码块

title	main组件template模块内置页创建
linenumbers	true

import React from "react";
import {
  withEditableButton,
 DependencyContext withEditableDialog,
} from "@fe-plugin/components/lib/templates/contexteditable-element";
import { getComponentInfo } from "@fe-plugin/common/lib/component-info";
import { withEditableComponentgetElementByKey } from "@fe-plugin/componentscommon/lib/templates/editablecomponent-componentelement";
import { withEditableButton }BaseDialog from "@fe-plugin/components/lib/templates/cmps/editable-elementdialog";
import BaseButton from "@fe-plugin/components/lib/templates/cmps/button";
import * as ELEMENT_KEY from "constants/element-keys";

// 创建一个可编辑组件
const EditableComponent = withEditableComponent();

// 编辑器舞台编辑组件
class TemplateInlinePage extends React.Component {
  //获取上下文
  static contextType = DependencyContext;

  render() {
    const { config } = this.context;

    // 渲染组件
  renderCmp() { 获取信息，并创建获取element的方法
    const componentInfo = getComponentInfo(config);
    const getElement = (type) => getElementByKey(componentInfo.elements, type);

    // 获取弹窗元素
    const dialogElement = getElement(ELEMENT_KEY.POPUP_DIALOG);

    // 根据元素配置的key值创建一个可编辑元素
    const EditableButton = withEditableButtonwithEditableDialog(ELEMENT_KEY.Button)((element) => {
      return <BaseButton data={element} style={element.style} />;
    });

    const EditableDialog return (
= withEditableButton(ELEMENT_KEY.Dialog)((element) => {
      return <EditableComponent>(
        <div> <BaseDialog data={element}>
          <EditableButton />
        </div>/BaseDialog>
      );
    });

    return (
      <Dialog name={ELEMENT_KEY.POPUP_DIALOG}>
        <EditableDialog />
      </EditableComponent>Dialog>
    );
  }
}

export default TemplateInlinePage;

...

锚

...

	13

...

	13

渲染setting模块需要以下步骤:

1、在default-setting中将 hasComponentSetting 设置为 true

2、在模块入口传入onChange、initValue参数，提供数据初始化，数据更改等功能(点击查看模块入口)

2、main组件中的内置页

内置页在main模块中的创建使用渲染型组件创建。

示例：main模块中内置页的创建示例:创建一个setting组件

代码块

title	main组件可弹出内置页渲染
linenumbers	true

import React from "react";
import { DependencyContext }Dialog from "@fe-plugin/components/lib/context";
import { getComponentInfo } from "@fe-plugin/common/lib/component-infoh5/confirm-dialog";
import { withEditableComponent }withPopup from "@fe-plugin/components/lib/templatesh5/editablewith-componentpopup";
import { withEditableButtongetElementByKey } from "@fe-plugin/componentscommon/lib/templates/editable-element";
import BaseButton from "@fe-plugin/components/lib/templates/cmps/buttoncomponent-element";
import * as ELEMENT_KEY from "constants/element-keys";


// 创建一个可编辑组件可弹出内置页渲染
const EditableComponent = withEditableComponent();

function InlineRender(props) {
  // 编辑器舞台编辑组件获取main组件传入的参数
class Template extends React.Componentconst {
  //获取上下文
  static contextTypecomponentInfo, onClose, getElement } = DependencyContextprops;

  //const 渲染组件
getElement = renderCmp(type) {
  => getElementByKey(componentInfo, type);

  return (
   // 根据元素配置的key值创建一个可编辑元素<Dialog
    const EditableButton dialog= withEditableButton{getElement(ELEMENT_KEY.Button)((element) => {POPUP_DIALOG)}
      return <BaseButton data={element} style={element.style} />;image={getElement(ELEMENT_KEY.IMAGE_B)}
    });

    return (button={getElement(ELEMENT_KEY.BTN_B)}
      <EditableComponent>onClick={onClose}
        <div>
       onClose={onClose}
   <EditableButton />
        </div>
      </EditableComponent>
    );
  }
}

export default TemplatewithPopup(InlineRender);

页面树结构

版本比较

旧版本 1

新版本当前版本

标识

概述：

1、

2、withDependencyContext 高阶组件

3、示例

1、上下文的注入可查看各个模块创建详细示例，

2、组件中上下文的获取可查看各个模块组件创建详细示例

2、组件介绍

1、图示

2、可编辑组件

3、可编辑元素

概述

2、渲染介绍

1、template模块组件渲染
锚
10
10

示例：

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

3、setting模块组件渲染
锚
11
11

1、template组件中的内置页

2、main组件中的内置页

3、渲染

1、main模块组件渲染
锚
9
9

3、内置页
锚

8
8

1、template组件中的内置页

2、main组件中的内置页

页面树结构

页面历史记录

版本比较

旧版本 1

新版本 当前版本

标识

概述：

1、

2、withDependencyContext 高阶组件

3、示例

1、上下文的注入可查看各个模块创建详细示例，

2、组件中上下文的获取可查看各个模块组件创建详细示例

2、组件介绍

1、图示

2、可编辑组件

3、可编辑元素

概述

2、渲染介绍

1、template模块组件渲染 锚1010

示例：

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

3、setting模块组件渲染 锚1111

1、template组件中的内置页

2、main组件中的内置页

3、渲染

1、main模块组件渲染 锚99

3、内置页 锚

88

1、template组件中的内置页

2、main组件中的内置页

新版本当前版本

1、template模块组件渲染
锚
10
10

3、setting模块组件渲染
锚
11
11

1、main模块组件渲染
锚
9
9

3、内置页
锚

8
8