vue中使用富文本wangeditor(数据双向绑定、图片上传回显)vue中使用富文本wangeditor, wange

1.样式部分

<el-drawer
      title="修改商品"
      size="40%"
      :visible.sync="dialogVisible2"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer>
      <div class="drawercontent">
        <el-form ref="editGoodFormRef" :model="editGood">
          <el-form-item label="商品简介:" prop="blurb">
            <div style="overflow: hidden; border: 1px solid #ccc"> //设置overflow: hidden是为了形成bfc，防止富文本z-index过高，格式错乱
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"/>
              <Editor
                style="height: 400px; overflow-y: hidden"
                v-model="editGood.blurb" //数据双向绑定
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"/>
            </div>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelEditGood">取 消</el-button>
          <el-button type="primary" @click="doEditGood" :disabled="editGoodBtn">确定</el-button>
        </div>
      </div>
    </el-drawer>

2.JS部分

1.安装，引入wangeditor

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  components: {
    Editor,
    Toolbar
  },
  data() {}
 }
</script>

2.基础配置及上传图片配置

data() {
    return {
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            // 自定义上传图片 方法
            customUpload: this.uploadImg,
            fieldName: "file",
          },
        },
      },
      mode: "simple",
   }
 },
 
 methods: {
  onCreated1(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
  },
 //自定义上传图片
 uploadImg(file, insertFn) {
      let imgData = new FormData();
      imgData.append("file", file);
      //调用上传图片接口，上传图片
      this.postRequest("/material/fileUpload", imgData) //该上传图片接口，返回url
        .then((res) => {
          console.log(res);
          // 插入后端返回的url
          insertFn(res.data.data); //res.data.data是url地址
          this.$message({
            type: "success",
            message: "上传成功",
          });
        })
        .catch((error) => {
          this.$message("上传失败,请重新上传");
        });
    },
 },
 beforeDestroy() {
    const editor = this.editor;
    if (editor1 == null) return;
    editor1.destroy(); // 组件销毁时，及时销毁编辑器
 }