fo-editor
v0.2.8
Published
> TODO: description
Downloads
1,028
Readme
fo-editor
使用说明
最新文档请移步官方地址
常规用法:
import { createFoEditor, defaultConfig } from 'fo-editor';
const foEditor = createFoEditor({
dom: document.querySelector('#editor'), // 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
Vue3
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>