Design Editor

属性

| 属性名 | 功能 | | -------- | -----: | | imageUploadUrl | 提供图片上传地址 | | mentions | 提供动态字段提示列表 [{key,title}] （填充key值） | | contents | 默认值为['button','divider','html','image','text','social']，可以通过此参数定制需要的内置默认组件 |

回调方法

| 方法名 | 功能 | 参数 | 返回值 | | -------- | -----: | ----- | ----- | | onRef | 用于获取编辑器instance | 编辑器instance | 无 | | onUpload | 图片上传完成处理数据格式 | 服务端返回的数据 | 实际图片地址 | | onUploadError | 捕获图片上传失败异常信息 | error: { message: string, errorStack: string } | 无 |

instance方法

| 方法名 | 功能 | 参数 | 返回值 | | -------- | -----: | ----- | ----- | | export | 将当前内容转换成html导出 | 无 | html:string | | getData | 获取当前内容的原始数据rawData | 无 | rawData:Object | | setData | 将原始数据设置回编辑器 | rawData:Object | 无 |

关于Content组件扩展

在编码前的设计阶段，我就构想了Content扩展，包括Content图标，标题，编辑区如何展示，如何提供属性编辑器列表等等。 扩展方式如下（以Video为例）：

import React from 'react';
import DesignEditor, { Extension, PropertyWidget, PropertyGroup } from 'design-editor';

const { Space, Align, Input, Switch } = PropertyWidget;
class Video extends Extension {
    getIconClass() {
      return 'icon icon-video';
    }

    getContentType() {
      return 'video';
    }

    getLabel() {
      return 'Video';
    }

    toHtml(data) {
      const { url, containerPadding, textAlign, fullWidth } = data;
      const videoStyle = fullWidth ? ` width: 100% ` : ` maxWidth: 100% `;
      return `<div style="padding:${containerPadding}">
        <div style="text-align:${textAlign}">
          <video controls src="${url}" style="${videoStyle}" />
        </div>
      </div>`;
    }

    getInitialAttribute() {
      return {
        containerPadding: '10px',
        textAlign: 'center',
        fullWidth: false,
        url: ''
      };
    }

    getProperties(values, update) {
      const { url, textAlign, containerPadding, fullWidth } = values;
      return <React.Fragment>
        <PropertyGroup title="LINK">
          <Input title="Video URL" value={url} attribute="url" desc="Add a YouTube or Vimeo URL to automatically generate a preview image. The image will link to the provided URL." onUpdate={update} />
        </PropertyGroup>
        <PropertyGroup title="SPACING">
          <Switch title="Full Width" checked={fullWidth} attribute="fullWidth" onUpdate={update} />
          <Align title="Align" align={textAlign} onUpdate={update} />
        </PropertyGroup>
        <PropertyGroup title="GENERAL">
          <Space title="Container Padding" value={containerPadding} attribute="containerPadding" onUpdate={update} />
        </PropertyGroup>
      </React.Fragment>
    }


    render() {
      const { url, containerPadding, textAlign, fullWidth } = this.props;
      const videoStyle = fullWidth ? { width: '100%' } : { maxWidth: '100%' };
      return <div className="ds_content_video"
        style={{
          padding: containerPadding,
        }}
      >
        <div style={{
          textAlign
        }}>
          {url ? <video controls src={url} style={videoStyle} /> : <p><i className="icon icon-play-button"></i></p>}
        </div>
      </div>;
    }
}

export default Video;

然后，直接将Video组件放置于DesignEditor组件内部即可，如有多个扩展，显示时会按照放置顺序进行输出：

<DesignEditor
  imageUploadUrl="http://localhost:3001/NewUserFeedback/upload"
  mentions={[
    { key: 'key', title: 'title' },
  ]}
  onUpload={data => data.fileUrl}
  onUploadError={error => console.log('5555', error.message)}
  onRef={(obj) => { instance = obj; window.instance = obj; }}>
  <Video />
</DesignEditor>

之所以继承自Extension类，是因为需要规范几个方法，如下所示：

Extension方法

| 方法名 | 功能 | 参数 | 返回值 | | -------- | -----: | ----- | ----- | | getIconClass | 提供扩展图标样式 | 无 | iconClass:string | | getLabel | 提供扩展标题 | 无 | label:string | | getContentType | 提供扩展类型名称（需要保证唯一，除button divider html image text social外） | 无 | contentType:string | | toHtml | 提供toHtml转换功能 | 扩展的所有属性 | 根据属性生成扩展html片段 | | getInitialAttribute | 提供初始属性对象 | 无 | Attribute:Object | | getProperties | 提供属性编辑器片段 | (values: Object 属性对象, update:(key, value) => {} 更新方法) | ReactNode | | render | 提供渲染片段 | props: { ...所有扩展的属性, focus: boolean 编辑区域中是否选中当前扩展 } | ReactNode |

如果觉得默认组件内置的toHtml片段满足不了需求或是需要更多属性编辑，可以在继承自原有组件的基础上加入自己个性化的东西

属性编辑组件列表

内置一些属性编辑组件如下：

| 组件 | 功能 | 使用示例 | | -------- | ----- | ------ | | Link | 配置链接 | <Link link={link} linkType={linkType} title="Button Link" onUpdate={update} /> | | Colors | 配置四项颜色，color+backgroundColor+hoverColor+hoverBackgroundColor（可选） | <Colors title="Colors" colors={{ color, backgroundColor, hoverColor, hoverBackgroundColor }} onUpdate={update} /> | | Align | 对齐 | <Align align={textAlign} onUpdate={update} /> | | LineHeight | 行高 | <LineHeight lineHeight={lineHeight} onUpdate={update} /> | | BorderRadius | 圆角 | <BorderRadius borderRadius={borderRadius} onUpdate={update} /> | | Color | 颜色 | <Color title="Color" value={color} attribute="color" onUpdate={update} /> | | Switch | toggle开关 | <Switch title="Full Width" checked={fullWidth} attribute="fullWidth" onUpdate={update} /> | | Space | 四周空间配置，用于margin padding等 | <Space title="Padding" value={padding} attribute="padding" onUpdate={update} /> | | Slide | 滑块 | <Slide title="Width" attribute="width" value={width} onUpdate={update} /> | | Line | 边框效果配置，包括边框样式颜色与粗细 | <Line title="Line" lineWidth={lineWidth} lineStyle={lineStyle} lineColor={lineColor} onUpdate={update} /> | | HtmlEditor | Html源码编辑 | <HtmlEditor style={{ margin: '-15px -20px' }} value={html} onChange={(value) => { update('html', value) }} /> | | Input | 普通输入框，参见Image的Url | <Input addOn="URL" onChange={(e) => { onUpdate('link', e.target.value) }} value={link} /> <Input title="Video URL" value={url} attribute="url" desc="Add a YouTube or Vimeo URL to automatically generate a preview image. The image will link to the provided URL." onUpdate={update} /> | | ImageEditor | 图片上传组件 | <ImageEditor key={values._meta.guid} attribute="url" onUpdate={update} /> | | NumberItem | 左右加减操作数字 | <NumberItem title="Content Width" value={width} attribute="width" onUpdate={onUpdate} /> | | Font | 字体选择 | <Font title="Font Family" fontFamily={fontFamily} onUpdate={onUpdate} /> |

若有其它需求，需要另行开发。