@qingbing/ts-v3-editor v2.0.3

Editor 插件介绍

• Editor 插件介绍
  • 1. 概要说明
    • 1.1 地址
    • 1.2 插件描述
    • 1.3 重要依赖
    • 1.4 插件安装
  • 2. 包说明
    • 2.1 属性说明
      • 2.1.1 toolbarConf 重要属性说明
      • 2.1.2 editorConf 重要属性说明
      • 2.1.3 editorEvents 重要属性说明
    • 2.2 事件说明
    • 2.3 实例暴露说明
  • 3. 示例
    • 3.1 全局注册使用
    • 3.2 模板组件使用

1. 概要说明

1.1 地址

• https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-editor
• @wangeditor/editor 官网

1.2 插件描述

vite + ts + vue3 技术，以 @wangeditor/editor 为基础， 二次封装的在线富文本编辑器

1.3 重要依赖

• @qingbing/ts-utils: ^2.0.15
• @qingbing/ts-v3-element-plus: ^2.1.3
• @wangeditor/editor: ^5.1.23
• @wangeditor/editor-for-vue: ^5.1.12
• element-plus: ^2.6.2
• vue: ^3.4.21

1.4 插件安装

# yarn 安装
yarn add @qingbing/ts-v3-editor

# npm 安装
npm i @qingbing/ts-v3-editor

2. 包说明

2.1 属性说明

2.1.1 toolbarConf 重要属性说明

2.1.2 editorConf 重要属性说明

2.1.3 editorEvents 重要属性说明

2.2 事件说明

支持 @wangeditor/editor 的事件, 配置上属性 editorEvents 中, 参考 2.1.3 editorEvents 重要属性说明

2.3 实例暴露说明

3. 示例

3.1 全局注册使用

• 一旦注册， Editor 作为组件全局通用
• 使用方法参考 3.2 模板组件使用, 去掉组件导入的语句即可

// main.ts
import "@qingbing/ts-v3-editor/dist/style.css"
import { EditorPlugin } from '@qingbing/ts-v3-editor'
app.use(EditorPlugin, {
  name: 'Editor',
  options: {}
})

3.2 模板组件使用

<template>
    <h2>mini</h2>
    <Editor ref="editor-mini" v-model="miniContent" mode="mini" :showHtml="true" />
    <h2>normal</h2>
    <Editor ref="editor-normal" v-model="normalContent" mode="normal" :showHtml="true" />
    <h2>full</h2>
    <Editor ref="editor-full" v-model="fullContent" mode="full" :showHtml="true" />
    <h2>default</h2>
    <Editor ref="editor-default" v-model="defaultContent" mode="default" :showHtml="true" />
    <h2>simple</h2>
    <Editor ref="editor-simple" v-model="simpleContent" mode="simple" :showHtml="true" />
    <hr>
    <button @click="onClick">获取 editor</button>
    <Editor ref="editorRef" v-model="content" :showHtml="true" :editorEvents="events" :uploadImageServer="uploadImageServer"
        :uploadImage="uploadImage" mode="default" />
    <p>{{ content }}</p>
</template>

<script setup lang="ts">
import "@qingbing/ts-v3-editor/dist/style.css"
import type { IDomEditor } from "@wangeditor/editor";
import type { TEditorEvents } from '@qingbing/ts-v3-editor' // 如果注册成了全局组件，这句将不再需要
import { Editor } from '@qingbing/ts-v3-editor' // 如果注册成了全局组件，这句将不再需要
import { Toolbar } from "@wangeditor/editor";
import { ref } from "vue";

const content = ref("what")
const uploadImageServer = 'http://mock.qiyezhu.net/mock/64e35b8e4a2b7b001dd2e4ec/example/upload-image-server'
const uploadImage = {
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': "Content-Type"
    }
}
const events: TEditorEvents = {
    onBlur(editor) {
        console.log("blur", editor);
    },
    onChange: (editor) => {
        console.log("change", editor);
    }
}
const editorRef = ref({
    editor: "",
    getToolbar: ((): Toolbar | void => { return })
})
const onClick = () => {
    const editor: IDomEditor = editorRef.value.editor as unknown as IDomEditor
    const toolbar: Toolbar = editorRef.value.getToolbar() as Toolbar

    const menuKeys = editor.getAllMenuKeys()
    const toolbarConf = toolbar.getConfig()
    const toolbarMenus = toolbar.getMenus()

    console.log(menuKeys);
    console.log(toolbarConf);
    console.log(toolbarConf.toolbarKeys);
    console.log(toolbarMenus);
}

const miniContent = ref("mini")
const normalContent = ref("normal")
const fullContent = ref("full")
const defaultContent = ref("default")
const simpleContent = ref("simple")
</script>