vue3添加wangEditor富文本框

呆邱邱

已于 2023-04-20 14:01:32 修改

阅读量477

点赞数

文章标签： vue.js

于 2023-04-18 11:00:51 首次发布

本文链接：https://blog.csdn.net/weixin_45824909/article/details/130214489

版权

vue3 添加wangEditor富文本框

在package.js添加

    "@wangeditor/editor": "^5.1.14",
    "@wangeditor/editor-for-vue": "^5.1.10",

创建组件

<template>
  <div style="height: 100%; width: 100%">
    <div>
      <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" />
      <Editor
        :defaultConfig="editorConfig"
        v-model="valueHtml"
        style="height: 600px; overflow-y: hidden"
        @onCreated="handleCreated"
        @onChange="handleChange"
        @onDestroyed="handleDestroyed"
        @onFocus="handleFocus"
        @onBlur="handleBlur"
        @customAlert="customAlert"
        @customPaste="customPaste"
      />
    </div>
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css";
import {
    onBeforeUnmount, ref, shallowRef, onMounted, defineEmits, computed } from "vue";
import {
    Editor, Toolbar } from "@wangeditor/editor-for-vue";
import {
    getToken } from "@/utils/auth";
import {
    ElMessage } from "element-plus";

const props = defineProps({
   
  modelValue: {
   
    type: String,
    default: ""
  },
  isHaveImg: {
   
    type: Boolean,
    default: false
  }
});
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("");
const baseUrl =

最低0.47元/天解锁文章