富文本编辑器的使用

1.下载应用包

// 下面两个依赖都需要安装 
npm i @wangeditor/editor 
npm i @wangeditor/editor-for-vue@next

 基础案列

<script setup>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  
  // mode: 'default' 默认模式 - 集成了 wangEditor 所有功能
  // mode: 'simple' 简洁模式 - 仅有部分常见功能，但更加简洁易用
  const mode = ref("simple")
  
  // const mode = ref("default")
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef()
  
  // 内容 HTML
  const valueHtml = ref('<p>hello</p>')
  
  // 模拟 ajax 异步获取内容
  onMounted(() => {
    setTimeout(() => {
      valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    }, 1500)
  })
  const toolbarConfig = {}
  const editorConfig = { placeholder: '请输入内容...' }
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })
  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }
</script>

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" />
    </div>
</template>

工具栏配置/查看

查看所有默认工具栏配置

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    //打印所有默认配置
    console.log(editor.getConfig()["MENU_CONF"])
}

MENU_CONF

自定义工具栏

工具栏配置 

const toolbarConfig = {
    toolbarKeys: [
        "headerSelect",  //正文
        "blockquote", //引号
        "|", //分隔线
        "bold",  //加粗
        "underline",  //下划线
    ]
}

配置前

 

配置后

 

上传图片的配置

工具栏配置决定了在工具栏显示哪些工具，菜单配置决定了该工具使用时的相关配置。

比如： 工具栏上显示上传图片工具，但上传后的接口地址，header中携带token等需要通过菜单配置

// 初始化默认配置
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {}
}
editorConfig.MENU_CONF['uploadImage'] = {
    server: '/api/upload',
    fieldName: 'file',
    headers: {
        Authorization: 'Bearer ' + sessionStorage.getItem("token"),
    },
    // 上传之前触发
    onBeforeUpload(file) { // TS 语法
        // onBeforeUpload(file) {    // JS 语法
        // file 选中的文件，格式如 { key: file }
        return file
        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress) {  // TS 语法
        // onProgress(progress) {       // JS 语法
        // progress 是 0-100 的数字
        console.log('progress', progress)
    },
    // 自定义插入图片
    customInsert(res, insertFn) {  // TS 语法
        // customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        let { url } = res
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(url)
    }
}