vue3封装wangEditor 富文本包含图片上传

原创

已于 2024-06-11 17:34:39 修改 · 644 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-06-11 15:42:07 首次发布

下载并安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
 
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

2.在项目components文件夹新建quill.vue 文件，名字可以自定义

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" />
    <Editor style="min-height: 300px" v-model="valueHtml" :defaultConfig="editorConfig" @onCreated="handleEditorCreated" />
  </div>
</template>
<script lang="js">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { ref, shallowRef, watchEffect } from "vue";
import { getToken } from "@/utils/auth";
expor