tinymce新增多图片上传功能

最新推荐文章于 2024-05-16 09:20:12 发布

zxna

最新推荐文章于 2024-05-16 09:20:12 发布

阅读量785

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_32555123/article/details/134071052

版权

效果：
在这里插入图片描述

在这里插入图片描述

/**
 * 文件路径：/src/tinymce/plugins/images/index.js
 */
import request from "@/utils/request"; 
tinymce.PluginManager.add('images', function (editor) {
  let pluginName = '多图上传'

  let bodyId = editor.getParam('body_id', '', 'hash')
  var imgList = []
  //配置弹出层
  let openDialog = function () {
    return editor.windowManager.open({
      title: pluginName,
      size: 'medium',
      body: {
        type: 'panel',
        items: [
          {
            name: 'multifile',
            type: 'htmlpanel',
            html: ' <div style="min-height:200px"><div style="background: #3d97d4;color: #fff;border-radius: 3px;padding: 8px 16px;width: 120px;text-align: center;cursor: pointer;" class="addfile " id="addfile">+ 添加文件</div> <ul id="file_list"></ul></div>',
          }
        ]
      },
      buttons: [{
        type: 'cancel',
        text: 'Close'
      }, {
        type: 'custom',
        text: 'Save',
        name: 'save',
        primary: true
      }],
      onAction: function (api, details) {
         
          console.log(imgList,"里面获取到什么==========")
        switch (details.name) {
          case 'save':
           	var html = '';
						var imgs = imgList;
            var len = imgs.length;
            if (len>0) {
              	for(let i=0;i<len;i++){
							if( imgs[i] ){
								html += '<img src="'+imgs[i]+'" />	';
							}
						}
            editor.insertContent(html)
            api.close()
            }
					
            break
          default:
            break
        }
      },
      onChange(api, evt) {
        console.log('change')
        console.log(api)
        console.log(evt)
      }
    })
  }

  //添加事件监听
  let addEventListener = function (editor) {
    imgList = []
        //添加文件
    document.querySelector('.addfile').addEventListener('click',()=>{
      var input = document.createElement('input');
      const filetype=".png,.gif,.jpg,.jpeg"
        input.setAttribute('type', 'file');
      input.setAttribute('multiple', 'multiple');
      input.setAttribute('accept', filetype);
        input.click();
        input.onchange = function(event) {
            var files = event.target.files;
            addList(files);
        }
    });
// let inputElement = document.getElementById('inputId');
// // 添加事件监听
// if (inputElement) {
//   inputElement.addEventListener('change', function(event) {
//     // 文件选择时执行的代码
//     console.log('文件已选择:', event.target.files);
//     const files = event.target.files
//     addList(files)

//   });
// } else {
//   console.log('未找到图片上传的input元素！');
// }
  }
  let addList = function (files) {
       console.log(files, "获取到什么222------------");
      var files_sum = files.length;
    var vDom = document.createDocumentFragment();
   
      for (let i = 0; i < files_sum; i++) {
        let file = files[i];

                  let params = new FormData();
            params.append("attachmentFile", file);
            let config = {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            };
            request({
              url: "/attachment/upload",
              method: "post",
              headers: config.headers,
              data: params,
              onUploadProgress: (progressEvent) => {},
            })
              .then((resp) => {
                if (resp.code == 0) {
                  imgList.push(resp.data.attachment.url); //上传成功，在成功函数里填入图片路径
                } else {
                  failure("上传失败");
                }
              })
              .catch((error) => {
                failure("上传出错，服务器开小差了呢");
              });
        let blobUrl = window.URL.createObjectURL(file);
          let li = document.createElement("li");
          li.setAttribute("class", "up-no");
          li.setAttribute("data-time", file.lastModified);
          li.innerHTML =
            '<div class="picbox"><img style="width:150px;height:150px;margin:20px" src="' +
            blobUrl +
          '"></div>'
          // < div class="namebox" > <span>' +
          //   file.name +
          //   '</span></div><div class="tools"><a class="remove"></a></div>';
          vDom.appendChild(li);
        }
        document.querySelector("#file_list").appendChild(vDom);
        //reSort();
      
    }
  //添加图标
  editor.ui.registry.getAll().icons.images || editor.ui.registry.addIcon('images', '<svg viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M1126.2,779.8V87.6c0-24-22.6-86.9-83.5-86.9H83.5C14.7,0.7,0,63.7,0,87.7v692c0,36.2,29.2,89.7,83.5,89.7l959.3-1.3c51.7,0,83.5-42.5,83.5-88.3zm-1044,4V86.3h961.6V783.7H82.2v0.1z" fill="#53565A"/><path d="M603,461.6L521.1,366.3,313,629.8,227.2,546.8,102.4,716.8H972.8v-170L768.2,235.2,603.1,461.6zM284.6,358.4a105.4,105.4,0,0,0,73.5-30c19.5-19.1,30.3-45,30.2-71.8,0-56.8-45.9-103-102.4-103-56.6,0-102.4,46.1-102.4,103C183.4,313.5,228,358.4,284.6,358.4z" fill="#9598A0"/><path d="M1197.7,153.6l-0.3,669.3s13.5,113.9-67.4,113.9H153.6c0,24.1,23.9,87.2,83.5,87.2h959.3c58.3,0,83.6-49.5,83.6-89.9V240.8c-0.1-41.8-44.9-87.2-82.3-87.2z" fill="#53565A"/></svg>')

  //注册toolbar按钮
  editor.ui.registry.addButton('images', {
    icon: 'images',
    tooltip: pluginName,
    onAction: function () {
      openDialog()
      addEventListener()
    }
  })
  //注册菜单选项
  editor.ui.registry.addMenuItem('images', {
    icon: 'images',
    text: pluginName,
    onAction: function () {
      openDialog()
      addEventListener()
    }
  })
  return {
    getMetadata: function () {
      return {
        name: pluginName,
        url: "https://dotatong.cn",
      }
    }
  }
})

TEditor编辑器配置


```bash
<template>
  <div class="tinymce-box">
    <Editor
      v-model="contentValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    />
  </div>
</template>

<script>
// import api from '../api/api.js'

//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";

//引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
import "tinymce/themes/silver"; //编辑器主题，不引入则报错
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标

// 引入编辑器插件（基本免费插件都在这儿了）
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullpage"; //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/toc"; //目录生成器
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount";
import "/public/tinymce/plugins/images"; //多图上传
import request from "@/utils/request"; //字数统计

export default {
  name: "TEditor",
  components: {
    Editor,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image images link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textpattern autosave ",
    },
    toolbar: {
      type: [String, Array],
      default:
        " bold italic underline image images strikethrough  alignment |  forecolor backcolor  outdent indent  | \
                    formatselect  fontsizeselect | bullist numlist  blockquote  link table  code",
      // default: 'bold italic underline   image  alignment forecolor | outdent indent | \
      //     backcolor   styleselect formatselect fontselect fontsizeselect | bullist numlist |strikethrough blockquote subscript superscript removeformat link| \
      //     table  media charmap hr pagebreak insertdatetime  preview | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs'
    },
    height: {
      type: Number,
      default: 300,
    },
    isCustomStyle: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      init: {
        force_br_newlines: false,
        force_p_newlines: false, //不使用p标签换行
        forced_root_block: "",
        statusbar: false,
        language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件
        language: "zh_CN", //语言类型

        skin_url: "/tinymce/skins/ui/oxide", //皮肤：浅色
        // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色

        plugins: this.plugins, //插件配置
        toolbar: this.toolbar, //工具栏配置，设为false则隐藏
        toolbar_groups: {
          alignment: {
            icon: "align-left",
            tooltip: "对齐",
            items: "alignleft aligncenter alignright alignjustify lineheight",
          },
        },
        menubar: false, //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”

        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", //字体样式
        lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5", //行高配置，也可配置成"12px 14px 16px 20px"这种形式

        height: this.height, //注：引入autoresize插件时，此属性失效
        placeholder: "在这里输入文字",
        branding: false, //tiny技术支持信息是否显示
        resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        elementpath: false, //元素路径是否显示

        content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入

        // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        paste_data_images: true, //图片是否可粘贴
        images_upload_handler: (blobInfo, success, failure) => {
          if (blobInfo.blob().size / 1024 / 1024 > 2) {
            failure("上传失败，图片大小请控制在 2M 以内");
          } else {
            let params = new FormData();
            params.append("attachmentFile", blobInfo.blob());
            let config = {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            };
            request({
              url: "/attachment/upload",
              method: "post",
              headers: config.headers,
              data: params,
              onUploadProgress: (progressEvent) => {},
            })
              .then((resp) => {
                if (resp.code == 0) {
                  success(resp.data.attachment.url); //上传成功，在成功函数里填入图片路径
                } else {
                  failure("上传失败");
                }
              })
              .catch((error) => {
                failure("上传出错，服务器开小差了呢");
              });
 
          }
        },
        setup: function (editor) {
          editor.on("init", function (e) {
            let isCustomStyle = localStorage.getItem("IsCustomStyle");
            if (isCustomStyle == "true") {
              this.getBody().style.fontSize = "12px";
              this.getBody().style.color = "#6b778c";
              this.getBody().style.lineheight = "12px";
            }
          });
        },
      },
      contentValue: this.value,
    };
  },
  watch: {
    value(newValue) {
      this.contentValue = newValue;
    },
    contentValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  created() {},
  mounted() {
    localStorage.setItem("IsCustomStyle", this.isCustomStyle);
    tinymce.init({});
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    //清空内容
    clear() {
      this.contentValue = "";
    },
  },
};
</script>

<style lang="less">
.tox-tinymce {
  border: 1px solid#ebecf0 !important;
  border-radius: 4px !important;
}
.tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) {
  border-right: 1px solid#ebecf0 !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
  border-bottom: 1px solid#ebecf0 !important ;
  background: #f2f6fc !important;
}
.tox .tox-tbtn svg {
  fill: #6b778c !important;
}

.tinymce-box .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
  width: 60px;
}
.tox-tinymce-aux {
  z-index: 5000 !important;
}
#file_list {
  margin-left: -56px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.up-no {
  list-style: none;
}
</style>