wangEditor富文本编辑器在vue中的应用

最新推荐文章于 2024-11-05 15:38:21 发布

原创最新推荐文章于 2024-11-05 15:38:21 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

实习杂记专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成并使用wangEditor富文本编辑器，包括代码实例与关键配置，如上传图片、Base64编码存储及自定义按钮等。

wangEditor富文本编辑器在vue中的应用

代码实例：

<template>
  <div class="editor-tool">
    <a-button class="btn" v-on:click="getContent">保存</a-button>
    <div ref="editor" style="text-align: left;"></div>
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  name: "editor",
  props: {
    content: {
      type: String,
    },
  },
  data() {
    return {
      editorContent: "",
    };
  },
  methods: {
    getContent: function() {
      this.$emit("Edit", this.editorContent);
    },
  },
  watch: {
    content: function(newVal) {
      this.editorContent = newVal;
    },
  },
  mounted() {
    var editor = new E(this.$refs.editor);
    editor.customConfig.onchange = (html) => {
      this.editorContent = html;
    };
    //进入debug状态
    editor.customConfig.debug = true;
    //删除黏贴文件的样式
    editor.customConfig.pasteFilterStyle = false;
	//用Base64存图
    editor.customConfig.uploadImgShowBase64 = true;
    //忽略黏贴文件的图片
    editor.customConfig.pasteIgnoreImg = true;

    // 配置服务器端地址 upload:上传图片地址
    editor.customConfig.uploadImgServer = "/upload";
	
    editor.customConfig.customUploadImg = function(files, insert) {
      console.log(files, insert);
      var objectURL = URL.createObjectURL(files[0]);
      // 上传代码返回结果之后，将图片插入到编辑器中
      insert(objectURL);
    };

    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      //设置延迟执行
      editor.create();
      editor.txt.html(this.editorContent);
    }, 500);//延时获取编辑器内容
  },
};
</script>