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>
相关推荐
coderlin_29 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说44 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
前端小超人rui1 小时前
UEditor 对接 秀米 手机编辑器流程与问题
编辑器
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js