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>
相关推荐
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
小妖6668 小时前
vscode 源码编译
ide·vscode·编辑器
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~9 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安10 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202010 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子10 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js