vue 中动态使用多个wangeditor

最新推荐文章于 2024-08-22 16:52:31 发布

Blog_ing_

最新推荐文章于 2024-08-22 16:52:31 发布

阅读量853

点赞数 1

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_50903388/article/details/131011680

版权

该文章展示了一个Vue应用中集成wangEditor富文本编辑器的示例，包括配置编辑器的高度、初始值、只读模式以及上传图片的自定义方法。通过监听onChange事件对外部页面传递编辑器内容变化。

摘要由CSDN通过智能技术生成

<template>
  <div class="editor n_b_r">
      <!-- 类名为做一些基本的边框设置 -->
      <Toolbar
          class="toolbar-container"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          mode="default"
      />
      <!-- 高度外部页面可调,受制于插件,最小值为300px -->
      <!-- defaultConfig: 配置项 -->
      <!-- 方法 onCreated必须有, onChange可以没有,这里加是为了在外部页面取值-->
      <Editor
          :style="{ height }"
          class="editor-container"
          v-model="html"
          :defaultConfig="editorConfig"
          mode="default"
          @onCreated="onCreated"
          @onChange="onChange"
      />
  </div>
</template>

<script>

import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 接口
import { uploadImg } from "@/api/liftingCenter/index"

export default {
  name: "editor-component",
  props: {
      // 初始值
      initHtml:{
          type: String,
          default: "",
      },
      atItem:{
          type: Object,
          default: {},
      },
      // 是否只读
      readOnly: {
          type: Boolean,
          default: false,
      },
      // ........
      placeholder: {
          type: String,
          default: "请输入内容",
      },
      // 小于300px无效
      editorHeight: {
          type: String,
          default: "300px",
      },
  },
  components: { Editor, Toolbar },
  data() {
      return {
          editor: null,
          toolbarConfig: {
              // excludeKeys文档里有讲到: 一般用于大部分默认功能都需要, 只有少部分功能不需要, 用这个来排除
              // 查看全部功能使用:  this.editor.getAllMenuKeys()
              excludeKeys: [
                'insertVideo',
                'uploadVideo',
                'group-video',
              ],
          },
          html: "",
          // 语义化的不写注释了好累
          autoFocus: false,
          editorConfig: {
              autoFocus: this.autoFocus,
              placeholder: this.placeholder,
              readOnly: this.readOnly,

              MENU_CONF: {
                  uploadImage: {
                      maxFileSize: 1 * 1024 * 1024,
                      // 这个我理解的是上传文件个数..但我试了, 妹有用
                      maxNumberOfFiles: 4,
                      allowedFileTypes: [
                          "image/jpeg",
                          "image/jpg",
                          "image/png",
                          "image/svg",
                          "image/gif",
                          "image/webp",
                      ],
                      timeout: 6 * 1000,
                      // 自定义上传图片的方法
                      customUpload: (file, insertFn) => {
                          this.uploadImage(file, insertFn);
                      },
                  },
                 
              },
          },
      };
  },
  computed: {
      // 限制editor高度
      height() {
          return parseInt(this.editorHeight) < 300
              ? "300px"
              : this.editorHeight;
      },
  },
  methods: {
      onCreated(editor) {
          this.editor = Object.seal(editor);
      },
      onChange() {
          // 输入框内值发生变化时需要向外传值
          this.$emit("change", this.html,this.atItem);
      },
      uploadImage(file, insertFn) {
          let formData = new FormData();
          formData.append("file", file);
          formData.append('flag','zsk');
          uploadImg(formData).then((res) => {
               // 接口返回的路径----将图片插入页面
               // insertFn是上面自定义上传的方法中传递的参数方法, 本身有仨参数
               // url, alt, href
              insertFn(process.env.VUE_APP_BASE_API + '/admin-api/' + res.data, file.name, process.env.VUE_APP_BASE_API + '/admin-api/' + res.data); 
          });
      },
      
  },
  beforeDestroy() {
      const editor = this.editor;
      if (editor == null) return;
      editor.destroy();
  },
  watch: {
    initHtml: {
        handler(value) {
          this.html = value;
          this.autoFocus = this.html === "";
        },
      immediate: true,
    },
  }
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.editor {
  border: 1px solid #DCDFE6;
}
.editor-container {
  min-height: 300px;
  overflow-y: scroll;
}
.toolbar-container {
  border-bottom: 1px solid #DCDFE6;
  border-top: 1px solid transparent;
}
</style>

<template>
    <div class="">
        <editor
            :atItem="item"
            :initHtml="item.remark"
            placeholder="请输入..."
             @change="editorChange"
        />
    </div>
</template>

<script>
import editor from "@/components/editor/editor.vue";

export default {
    name: "unic-page-name",
    components: { editor },
    methods: {
      
        editorChange(value,item) {
          item.remark = value
        },
    },
    data() {
        return {
            initValue: "",
            editorValue: "",
        };
    },
    mounted() {
       
    }
};
</script>