fo-editor v0.0.11

fo-editor

使用说明

常规用法：

import { createFoEditor, defaultConfig } from 'fo-editor';

const foEditor = createFoEditor({
  dom: div, // HTMLElement 需要将编辑器渲染到的具体节点
  /** 编辑器模式 */
  mode: 'design',
  /** 分页模式 */
  pageMode: 'none',
  /** 初始化默认值 */
  defaultValue: jsonValue,
  onChange: (change) => {
    console.log('fo editor change:', change);
  },
  ready: () => {
    console.log('fo editor ready!');
  },
  onError: (err) => {
    console.error('fo editor error', err);
  },
  onChange: ({ docChanged: boolean }) => {
    console.log('event:change', docChanged);
  },
  onClick: () => {
    console.log('event:click');
  },
  onDblClick: () => {
    console.log('event:dblclick');
  },
  onBlur: () => {
    console.log('event:blur');
  },
  onFocus: () => {
    console.log('event:focus');
  },
  /** 未设置就取默认值 defaultConfig */
  config: defaultConfig,
});

// 打印当前值
console.log(foEditor.toValue());

// mark: 卸载时需要执行 destroy
foEditor.destroy();

React

详见 fo-editor-react

Vue3

详见 fo-editor-vue

Vue2

类似原生用法，简单实例如下：

<template>
  <div ref="myDiv">Hello, World!</div>
</template>

<script>
import { createFoEditor, defaultConfig } from 'fo-editor';

let foEditor;
export default {
  beforeDestroy(){
    if (foEditor) {
      // 卸载需执行 destroy
      foEditor.destroy();
    }
  },
  mounted() {
    foEditor = createFoEditor({
      dom: this.$refs.myDiv, // HTMLElement 需要将编辑器渲染到的具体节点
      /** 编辑器模式 */
      mode: 'design',
      /** 分页模式 */
      pageMode: 'none',
      /** 初始化默认值 */
      defaultValue: jsonValue,
      // 以下为可选属性
      /** 未设置就取默认值 defaultConfig */
      config: defaultConfig,
      onChange: (change) => {
        console.log('fo editor change:', change);
      },
      ready: () => {
        console.log('fo editor ready!');
      },
      onError: (err) => {
        console.error('fo editor error', err);
      },
      onChange: ({ docChanged: boolean }) => {
        console.log('event:change', docChanged);
      },
      onClick: () => {
        console.log('event:click');
      },
      onDblClick: () => {
        console.log('event:dblclick');
      },
      onBlur: () => {
        console.log('event:blur');
      },
      onFocus: () => {
        console.log('event:focus');
      },
    });
  }
}
</script>