富文本框vue 自定义图片上传

最新推荐文章于 2024-04-30 10:31:17 发布

赵啸林

最新推荐文章于 2024-04-30 10:31:17 发布

阅读量829

点赞数 1

分类专栏： vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49295874/article/details/122352078

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

vue

31 篇文章 0 订阅

订阅专栏

 <ueditor
      ref="by_know"
      :config="{
       initialFrameWidth: null,
       initialFrameHeight: 350,
    }"
      :defaultMsg="form.info"
     :ueditorChange="agreenInfoChange"
></ueditor>
>

agreenInfoChange(msg) {
      this.form.info = msg;//富文本内容
 },

<template>
  <section v-loading="loading" class="ueditor-content">
    <!-- 图片/文件上传 multiple属性多选-->
    <form
      :action="`${$comentUrl}/auth/upload/image`"
      style="display: none"
      id="uploadForm"
      class="uploadForm"
      enctype="multipart/form-data"
      method="post"
    >
      <!-- <input
        type="file"
        name="file"
        id="uploadFile"
        ref="uploadFile"
        @change="uploadFileChange"
      /> -->
      <input
        type="file"
        accept="image"
        name="file"
        @change="uploadFileChange"
        ref="uploadFile"
        id="uploadFile"
      />
    </form>
    <el-dialog
      :append-to-body="true"
      :visible.sync="dialogVisible"
      custom-class="reset-pwd wlm-form-dialog dialog-table"
      width="30%"
    >
      <div v-if="dialogVisible" class="wlm-form">
        <div class="wlm-form-header wlm-dialog-fixheader">
          <span class="wlm-dialog-inlenr">微信图文采集</span>
        </div>
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <div class="wlm-form-content">
            <div class="wlm-dialog-main">
              <div class="wlm-dialog-content flex-col">
                <p>
                  1.下方表单输入链接，可以采集微信内容链接。例如：https://mp.weixin.qq.com/s/MQs5zQcYQlI_RCkf91BgXg
                </p>
                <p style="margin-top: 10px">
                  2.可以使用微信内容复制到编辑器中即可。由于图片采集需要时间。所以等待20秒再提交表单。
                </p>
                <p style="margin-top: 10px">
                  温馨提示：视频，过于复杂的样式，背景图，可能会导致采集失败。
                </p>
                <el-input
                  v-model="materialNewsText"
                  placeholder="采集微信图文内容（填写微信图文链接）"
                  style="margin-top: 10px; width: 90%"
                >
                </el-input>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button size="text" type="primary" @click="dialogVisible = false"
          >取消
        </el-button>
        <el-button
          :disabled="dialogLoding"
          :loading="dialogLoding"
          size="small"
          type="primary"
          @click="saveTextarea"
          >采集
        </el-button>
      </footer>
    </el-dialog>
    <vue-ueditor-wrap
      v-if="!destoryed"
      v-show="!destoryed"
      ref="ueditor"
      v-model="msg"
      :config="ueditorConfig"
      :destroy="true"
      :init="ueditorInit"
      @ready="ready"
    ></vue-ueditor-wrap>
    <!-- <p class="orders-gray font-12" style="margin-top:10px;">建议使用图片作为详情内容，从其他编辑器或者平台粘贴可能会出现样式问题，请手动修改。</p>
    <p class="orders-gray font-12">样式有问题的建议先粘贴到word文档（无格式粘贴）再复制到后台</p> -->
  </section>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import $ from "jquery";
import axios from "axios";
import local from "@/utils/local";
export default {
  name: "UE",
  data() {
    return {
      materialNewsText: "",
      dialogVisible: false,
      dialogLoding: false,
      destoryed: false,
      loading: true,
      msg: "",
      isReady: false,
      chooseFilesConfig: {
        type: ["image"],
        model: "normal",
        initList: [],
        file_type: "image",
      },
      chooseFilesVideoConfig: {
        type: ["video"],
        model: "normal",
        initList: [],
        file_type: "video",
      },
      ueditorConfig: {
        UEDITOR_HOME_URL: "UEditor/",
        autoHeightEnabled: false,
        maximumWords: 20000,
        initialFrameHeight: 240,
        initialFrameWidth: "100%",
        enableAutoSave: false,
        toolbars: [
          [
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "horizontal",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "indent",
            "|",
            "imagenone",
            "imageleft",
            "imageright",
            "imagecenter",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "fullscreen",
            "|",
            "paragraph",
            "fontsize",
            "|",
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "splittocells",
            "splittorows",
            "splittocols",
            "|",
            "link",
          ],
        ],
      },
    };
  },
  computed: {},
  components: {
    VueUeditorWrap
  },
  watch: {
    defaultMsg: {
      handler(newData, oldData) {
        if (typeof newData === "string" && newData !== "") {
          this.msg = newData;
        } else if (newData == "") {
          this.msg = "";
        }
      },
      immediate: true,
      deep: true,
    },
  },
  props: {
    defaultMsg: {
      type: String,
    },
    bindIndex: {
      type: Number,
      required: false,
    },
    ueditorList: {
      type: Array,
      required: false,
    },
    config: {
      type: Object,
    },
    ueditorChange: {
      type: Function,
    },
    defaultFocus: {
      type: Boolean,
    },
    ueditorDisabled: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {},
  methods: {
    saveTextarea() {
      const Base64 = require("js-base64").Base64;
      this.dialogLoding = true;
      getWechatNews({ url: this.materialNewsText }).then((response) => {
        const {
          data: { data: msgData = [] },
        } = response;
        const contentBase = Base64.decode(msgData);
        this.msg = contentBase;
        this.materialNewsText = "";
        this.dialogVisible = false;
        this.dialogLoding = false;
      });
    },
    uploadFileChange(e) {
      console.log(e.target, "图片文件");
      console.log(e.target.files[0], "图片文件");
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
     //关键更改Content-Type为multipart/form-data文件类型
      let instance = axios.create();
      instance.defaults.headers["common"]["X-Requested-With"] =
        "XMLHttpRequest";
      // 设置post请求头
      instance.defaults.headers.post["Content-Type"] =
        "multipart/form-data";
      instance
        .post(`${this.$comentUrl}/auth/upload/image`, formData)
        .then((res) => {
          console.log(res.data.data, "图片路径");
          if (res.data.code == 1) {
            this.$Ueditor.focus();
            this.$Ueditor.execCommand(
              "inserthtml",
              `<img style='font-size: 0px;line-height: 0px;vertical-align: middle;max-width: 100%;' src='${res.data.data}'/>`
            );
          }
        });
    },
    //  `<img style="font-size: 0px;line-height: 0px;vertical-align: middle;max-width: 100%;" src='${res.data.data}'/>`
    // async uploadFileChange(e) {
    //   console.log(e, "文件上传");
    //   let fileInput = document.getElementById("uploadFile");
    //   console.log(fileInput, "fileInput");
    //   let fileName = fileInput.files[0].name;
    //   let ext = fileName.substring(
    //     fileName.lastIndexOf(".") + 1,
    //     fileName.length
    //   );
    //   if (fileInput.files[0].size == 0) {
    //     this.$message.error("不能传空文件");
    //     return;
    //   }
    //   if (!(fileInput.files[0].size / 1024 / 1024 < 10)) {
    //     this.$message({
    //       type: "warning",
    //       message: "上传文件大小不能超过 10MB!",
    //     });
    //     return;
    //   }
    //   // 文件大小转换
    //   // if(fileSize < 1024 ) {
    //   //   sizeNum = fileSize + 'b';
    //   // } else if(fileSize == 1024) {
    //   //   sizeNum = "1KB";
    //   // } else if(fileSize > 1024 && fileSize < (1024 * 1024)) {
    //   //   sizeNum = ((fileSize / 1024).toFixed(1)) + "KB";
    //   // } else if(fileSize == (1024 * 1024)) {
    //   //   sizeNum = "1M";
    //   // } else if(fileSize > (1024 * 1024)) {
    //   //   sizeNum = (fileSize / (1024 * 1024)).toFixed(1) + "M";
    //   // }
    //   // 文件大小转换
    //   let formFile = new FormData();
    //   formFile.append("file", fileInput.files[0]);
    //   console.log(formFile, "formFile");
    //   let type = /png|jpg|bmp|jpeg|gif/i.test(ext) ? "image" : "file";
    //   if (type == "image") {
    //     axios
    //       .post(`${this.$comentUrl}/auth/upload/image`, formFile, {
    //         headers: { "Content-Type": "multipart/form-data" }
    //       })
    //       .then((res) => {
    //         console.log(res, "res");
    //         if (res.code == 1) {
    //           console.log(res, "res");
    //           this.$Ueditor.focus();
    //           this.$Ueditor.execCommand(
    //             "inserthtml",
    //             `<img style="font-size: 0px;line-height: 0px;vertical-align: middle;max-width: 100%;" src="${res.data}"/>`
    //           );
    //         }
    //       });
    //   } else if (type == "file") {
    //     axios
    //       .post(`${this.$comentUrl}/auth/upload/image`, formFile, {
    //         headers: { "Content-Type": "multipart/form-data" }})
    //       .then((res) => {
    //         console.log(res, "res");
    //         if (res.code == 1) {
    //           this.$Ueditor.focus();
    //           this.$Ueditor.execCommand(
    //             "inserthtml",
    //             `<img style="font-size: 0px;line-height: 0px;vertical-align: middle;max-width: 100%;" src="${res.data}"/>`
    //           );
    //         }
    //       });
    //   }
    // },

    uploadSaveChange(fileList) {
      // this.$Ueditor.focus();
      if (fileList.length > 0) {
        fileList.map((item) => {
          if (item.file_type !== "video") {
            this.$Ueditor.execCommand(
              "inserthtml",
              `<img style="font-size: 0px;line-height: 0px;vertical-align: middle;max-width: 100%;" src="${item["file_path"]}"/>`
            );
          } else {
            this.$Ueditor.execCommand("insertvideo", {
              url: item["file_path"],
              width: 300,
              height: 200,
            });
          }
        });
      }
    },
    ueditorInit(...arg) {
      const UE = window.UE;
      const that = this;
      // 自定义上传图片和视频按钮
      UE.registerUI("buttonimg", function (editor, uiName) {
        // 注册按钮执行时的command命令，使用命令默认就会带有回退操作
        // editor.registerCommand(uiName, {
        //   execCommand: function() {
        //     alert('execCommand:' + uiName)
        //   }
        // })
        // 创建一个button
        var btn = new UE.ui.Button({
          // 按钮的名字
          name: "uiName",
          // 提示
          title: "上传图片",
          // 添加额外样式，指定icon图标，这里默认使用一个重复的icon
          cssRules: "background-position: -726px -77px;",
          // 点击时执行的命令
          onclick: function () {
            // 这里可以不用执行命令,做你自己的操作也可
            editor.execCommand(uiName);
            // 执行自定义上传
            that.$Ueditor.focus();
            console.log("点击了");
            $("#uploadFile").trigger("click");
          },
        });
        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener("selectionchange", function () {
          var state = editor.queryCommandState(uiName);
          if (state === -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
          } else {
            btn.setDisabled(false);
            btn.setChecked(state);
          }
        });
        // 返回button
        return btn;
      });
    },
    ready(editorInstance) {
      this.loading = false;
      this.$Ueditor = editorInstance;
      this.$UeditorKey = editorInstance.key;
      if (this.ueditorDisabled) {
        this.$Ueditor.setDisabled();
      }
      if (
        Object.prototype.toString.call(this.ueditorChange) ===
        "[object Function]"
      ) {
        this.$Ueditor.addListener("contentChange", (res) => {
          const content = this.getUEContent("getContent");
          this.ueditorChange(content, this.isReady);
          this.isReady = true;
        });
        this.$Ueditor.addListener("afterSelectionChange", () => {
          const content = this.getUEContent("getContent");
          this.ueditorChange(content);
        });
      }
    },
    setDisabled() {
      if (this.$Ueditor) {
        this.$Ueditor.setDisabled();
      }
    },
    getUEContent(getType = "getPlainTxt") {
      // 获取内容方法
      return this.$Ueditor[getType]();
    },
  },
  beforeDestroy() {
    this.destoryed = true;
  },
  destoryed() {
    this.$Ueditor.destory();
  },
};
</script>

<style lang="less" scoped>
.ueditor-content {
  width: 700px;
  position: relative;
  z-index: 0;
}

.imoprt-uedotor {
  position: absolute;
  padding: 5px;
  font-size: 12px;
  top: 34px;
  right: 4px;
  z-index: 2000;
}

/deep/ .edui-editor div {
  line-height: 20px;
  padding-bottom: 2px;
}

/deep/ .edui-default .edui-editor-toolbarboxouter {
  border-bottom: none !important;
  background-image: none !important;
}

/deep/ .edui-default .edui-editor-breadcrumb {
  margin: 5px 0 0 6px !important;
}

/deep/ .edui-default .edui-editor-toolbarbox {
  border-bottom: 0;
  box-shadow: none;
  background-color: #fafafa;
  z-index: 2000;
}

/deep/ .edui-default iframe body {
  overflow-x: hidden;
}

/deep/ textarea[name="editorValue"] {
  display: none !important;
}
</style>

在这里插入图片描述

赵啸林

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
富文本框vue 自定义图片上传

<ueditor ref="by_know" :config="{ initialFrameWidth: null, initialFrameHeight: 350, }" :defaultMsg="form.info" :ueditorChange="agreenInfoChange"></ueditor>>agreenInfoChange(msg) { this.form.
复制链接

扫一扫