wangEditor使用教程

最新推荐文章于 2024-07-27 07:15:00 发布

小红茂不秃秃

最新推荐文章于 2024-07-27 07:15:00 发布

阅读量3.3k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42264407/article/details/127787757

版权

1.安装（vue2）

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

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

2. 使用（可封装成子组件）

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model.trim="html"
      style="height: 500px; overflow-y: hidden"
      :default-config="editorConfig"
      :mode="mode"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { upload } from "@/api/guideCertificate/guideCertificateIndex";
import { getToken } from "@/utils/auth";
import { DomEditor } from '@wangeditor/editor'
const editorConfig = {
  // JS 语法
  MENU_CONF: {},

  // 其他属性...
};
editorConfig.MENU_CONF["uploadImage"] = {
  server: "/concatenation/dzznInfo/upload",
  fieldName: "multipartFile",
  // 自定义增加 http  header
  headers: {
    Authorization: getToken(),
  },
  async customUpload(file, insertFn) {
    // JS 语法
    console.log(file);
    const fileData = new FormData();
    fileData.append("multi