Vue-Vue3 集成编辑器功能

1、安装依赖

编辑器插件需要安装 @wangeditor/editor@wangeditor/editor-for-vue 两个插件

bash 复制代码
npm install @wangeditor/editor --save

vue3运行如下命令安装

bash 复制代码
npm install @wangeditor/editor-for-vue@next --save

vue2运行如下命令安装

bash 复制代码
npm install @wangeditor/editor-for-vue --save

安装后可在 Vue 项目的 package.json 中查看安装依赖项

2、插件使用

本文章针对 Vue3 项目,在 Vue 组件中使用方式如下:

html 复制代码
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {DomEditor} from '@wangeditor/editor'
import {computed, onBeforeUnmount, ref, shallowRef} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

const emit = defineEmits(["update:modelValue"])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入...'
  }
})
const inputValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit("update:modelValue", value)
  }
})
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef()
const mode = ref('default')
const test = ref(false)
const editorConfig = {placeholder: props.placeholder}
// 默认工具栏配置
const toolbarConfig = {}

/** 排除菜单组,写菜单组 key 的值即可 */
toolbarConfig.excludeKeys = [

  'group-image',
  'group-video',
  'fullScreen'
]

/** 组件销毁时,也及时销毁编辑器 */
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

/** 记录 editor 实例,重要!*/
const handleCreated = (editor) => {
  editorRef.value = editor
}
const print = () => {
  const toolbar = DomEditor.getToolbar(editorRef.value)
  const curToolbarConfig = toolbar.getConfig()
  console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组

  // const menu = editorRef.value.getAllMenuKeys()
  // console.log(menu)
  // console.log(editorRef.value.getMenuConfig('bgColor'))
  // console.log(valueHtml.value)
}

/** 获取HTML格式内容方法 */
const getHtml = () => {
  return editorRef.value.getHtml()
}

/** 获取原始文本内容方法 */
const getText = () => {
  return editorRef.value.getText()
}

/** 暴露方法 */
defineExpose({getHtml, getText})
</script>

<template>
  <el-button v-if="test" @click="print">打印</el-button>
  <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="inputValue"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
</template>

<style scoped lang="less">
.el-button {
  margin: 1%;
}
</style>

效果

更多

插件详细使用说明请查阅官网文档:
https://www.wangeditor.com/

提示:

官网示例当中的 editor 在 Vue3 中需要通过 ref 方式获取组件实例,官网示例中组件方法调用需要加上 .value,如管网 "编辑器配置" 一说明文档中,editor.getConfig() 对应 Vue3 写法是 editor.value.getConfig()

组件实例获取方式如下:

html 复制代码
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {DomEditor} from '@wangeditor/editor'
import {computed, onBeforeUnmount, ref, shallowRef} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

// 
/** 
  * 编辑器实例,必须用 shallowRef
  * 此处的 editor 对应官网的 editor 
  * 后续组件方法调用可能也是此处的 editor
  * 如:editor.getConfig() 对应 Vue3 写法是 editor.value.getConfig()
  * **/
const editor = shallowRef() 
const mode = ref('default')
const editorConfig = {placeholder: props.placeholder}
// 默认工具栏配置
const toolbarConfig = {}

const test= () => {
  const toolbar = DomEditor.getToolbar(editor.value)
  const curToolbarConfig = toolbar.getConfig()
  console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组

  // const menu = editor.value.getAllMenuKeys()
  // console.log(menu)
  // console.log(editor.value.getMenuConfig('bgColor'))
  // console.log(valueHtml.value)
}
</script>
<template>
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="inputValue"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
</template>
相关推荐
借月4 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang6 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
DoraBigHead20 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00123 分钟前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州34 分钟前
希尔排序
前端·javascript
爱学习的茄子35 分钟前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试
用户2519162427111 小时前
Canvas之绘制图形
前端·javascript·canvas
gnip1 小时前
99%前端不知道的API WebTransport
前端·javascript
小杜不是小杜1 小时前
qiankun:vue3+webpack 微前端搭建
前端·vue.js
Lazy_zheng1 小时前
React 核心 API 全景实战:从状态管理到性能优化,一网打尽
前端·javascript·react.js