sam-editor

一个集成富文本的在线WORD文档编辑器

[ 查看演示 Demo ] [ 更新日志 ]

一、安装使用

1. 安装

# npm 安装
npm install sam-editor

# yarn 安装
yarn add sam-editor

2. 引入 sam-editor

Vue 3 组件内引入

import { samEditor } from 'sam-editor';
import 'sam-editor/index/style.css';

Vue3 全局引入

import { samEditor } from 'sam-editor';
import 'sam-editor/index/style.css';

const app = createApp(App)
app.use(VueCropper)
app.mount('#app')

nuxt 引入方式

if(process.browser) {
  samEditor = require('sam-editor')
  Vue.use(samEditor)
}

3. 代码中使用

<sam-editor ref="samEditor" :data="editorSetting" @change="changeEvent"></sam-editor>

二、文档

1. props 属性配置

editorSetting: {
    readonly: false,                                // 只读模式
    hideMenu: true,                                 // 隐藏菜单
    hideNav: true,                                  // 隐藏左侧导航栏
    menu: {                                         // 菜单栏
        file: { title: 'File', items: 'newStandard openFile save-btn restoredraft | preview | close-btn' },
        edit: { title: 'Edit', items: 'undo redo | cut copy paste | searchreplace' },
        view: { title: 'View', items: ' | preview fullscreen' },
        insert: { title: 'Insert', items: 'image inserttable | charmap hr | math linecode-btn textnode-btn' },
        format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
        tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code' },
        table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
        help: { title: 'Help', items: 'help | bzt-ver' },
    },
    toolbar1: 'undo redo | close-btn save-btn | queue levels | hr finished-btn paragraph-btn title-block formatting | alignment indent2em lineheight | image charmap table | pageLayout page-type | searchreplace preview fullscreen | code',
    toolbar2: 'zhu-btn | example-btn | articleTitle imgtitle-btn | footer-btn | math graphy | introduceGroup quote-btn term quota | comment | catalogue | exportFile mergePage',
    quickbars: 'bold italic underline strikethrough superscript subscript',
    draftTimes: 30000,
    htmlContent: ''
}

2. 可用回调方法 changeEvent

• @realTime 实时预览事件
• @imgMoving 图片移动回调函数
• @cropMoving 截图框移动回调函数
• @imgLoad 图片加载的回调, 返回结果 success, error

3. 外部接口调用