Flowmix/docx 核心理念

flowmix/docx 底层核心设计基于如下模块开发:

blocks 文档块组件
inlineTool 内联工具条
Tunes 组件子配置

blocks 文档块组件

文档组件是基于 blocks 模式开发, 可以支持各种复杂的文档布局, 支持多模态的文档内容嵌入, 比如 富文本, 音视频, 思维导图, 自由画板, Iframe内嵌网页, 业务信息流卡片, AI创作插件, 表格, 复杂数学公式, 可视化图表, 多语言代码, PDF文档, 自定义水印等. 目前在 flowmix/docx 中我们自研了很多自定义的文档组件, 私有化的客户可以轻松基于我们的组件开发自己的文档组件. 同时我们也会不断的扩展更多的组件, 打造文档即服务的引擎设计模式.

我们可以像开发组件的方式开发文档组件, 目前我们设计的组件结构如下:

index.tsx 组件入口
index.less 组件样式
api.ts 组件api文件(可选)

主文件如下:

tsx

import styles from './index.module.less';
import { make }  from '../../utils/dom';

class Audio {
    // 工具条显示配置
    static get toolbox() {
      return {
        // 配置标题
        title: 'Audio',
        // 配置显示的icon
        icon: `自定义icon`
      };
    }

    // 组件只读配置
    static get isReadOnlySupported() {
      return true;
    }
  
    constructor({data, api, config, readOnly}){
      this.data = {
        url: data.url,
      };

      this.api = api;

      this.readOnly = readOnly;

      this.config = config || {};
    }
  
    render(){
      // 自定义UI逻辑
      return this.wrapper;
    }
  
    save(blockContent){
      // 保存逻辑
      return this.data
    }
  }

export default Audio

更详细的介绍可以参考私有化部署文档和企业内部视频培训.

inlineTool 内联工具条

内联工具条是基于 inlineTool 模式开发, 可以对文本进行更灵活的样式设置, 比如支持 加粗, 斜体, 下划线, 删除线, 字体颜色, 字体大小, 字体对齐, 字体背景颜色, 字体背景图片, 字体下划线, 字体删除线, 字体倾斜, 字体加粗, 字体倾斜等功能.

案例代码如下:

tsx

import styles from './index.module.less';
import { IconLink } from '@codexteam/icons';
import { make } from '../../utils/dom';

class InlinkTool {
    // 判断当前组件是否为inline类型
    static get isInline() {
        return true;
    }

    // 显示的图标
    get toolboxIcon() {
        return IconLink
    }

    // 序列化内容
    static get sanitize() {
        return {
            span: true,
            a: true
        };
    }

    // 快捷键
    static get shortcut() {
        return 'CTRL+L';
    }

    // 显示的标题
    static get title() {
        return '链接'
    }

    clear() {
        this.hideActions();
    }

    get state() {
        return this._state;
    }

    set state(state) {
        this._state = state;

        this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
    }

    constructor({api}) {
        // 初始化时的逻辑
    }

    render() {
        // 渲染自定义inlineTool的逻辑
        this.button = make('button', styles['paper'], {type: 'button'});
        // ...

        return this.button;
    }

    surround(range) {
        // 应用插件时的逻辑
    } 

    wrap(range) {
        // 应用状态时的逻辑
    }

    unwrap(range) {
        // 取消应用状态时的逻辑
    }

    // 选中内容时执行此方法
    checkState(selection) {
        const mark = this.api.selection.findParentTag(this.tag, this.class);
        this.state = !!mark;

        if (this.state) {
            this.showActions(mark);
        } else {
            this.hideActions();
        }
    }

    renderActions() {
        this.paperEl = make('span', styles['paperEl']);
        // 渲染控件时的逻辑 
    
        return this.paperEl;
    }

    showActions(mark) {
        // 控件显示时的逻辑
    }

    hideActions() {
        // 隐藏操作控件的逻辑
    }
}

export default InlinkTool

Tunes 组件子配置

Tunes 主要是基于具体的文档组件属性进行扩展, 比如我们可以给指定的文档组件设置不同的状态或样式. 又比如我们可以对指定组件进行复制, 都可以在通过开发Tunes插件来实现.

案例代码如下:

tsx

import { IconCopy } from '@codexteam/icons';
class CopyBlockTune {
    // 指定当前组件的类型为Tune模式
    static get isTune() {
        return true;
    }

    constructor({api, data, config, block}) {
        this.api = api;
        this.block = block;
    }

    render() {
        return {
          icon: IconCopy,
          label: '复制',
          onActivate: async () => {
            // 复制逻辑
          }
        };
    }

    // 保存数据的固定写法
    save() {
        return {
          prop: 'value'
        };
    }

    wrap(blockContent) {
        const myWrapper = document.createElement('div');
        // 通用外层容器样式设置
        return myWrapper;
    }
}

export default CopyBlockTune

Flowmix/docx 核心理念 ​

blocks 文档块组件 ​

inlineTool 内联工具条 ​

Tunes 组件子配置 ​

Flowmix/docx 核心理念

blocks 文档块组件

inlineTool 内联工具条

Tunes 组件子配置