图片素材库

src/components/Tinymce/index.vue

@@ -1,84 +1,110 @@
 <template>
-  <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
-    <textarea :id="tinymceId" class="tinymce-textarea" /> 
-	<el-dialog id="editor-dialog" class="image-dialog" title="选择图片" :visible.sync="dialogVisible"   width="70%" :close-on-click-modal="false" append-to-body>
-		<upload-image  :multiple="true" :branch-id="userInfo.branchId" :dept-id="userInfo.deptid" :visible="dialogVisible" @cancel="dialogVisible=false" @confirm="handleConfirm"></upload-image>
-	</el-dialog> 
+  <div
+    :class="{ fullscreen: fullscreen }"
+    class="tinymce-container editor-container"
+  >
+    <textarea :id="tinymceId" class="tinymce-textarea" />
+    <el-dialog
+      id="editor-dialog"
+      class="image-dialog"
+      title="选择图片"
+      :visible.sync="dialogVisible"
+      width="70%"
+      :close-on-click-modal="false"
+      append-to-body
+    >
+      <upload-image
+        :multiple="true"
+        :branch-id="userInfo.branchId"
+        :dept-id="userInfo.deptid"
+        :visible="dialogVisible"
+        @cancel="dialogVisible = false"
+        @confirm="handleConfirm"
+      ></upload-image>
+    </el-dialog>
+    					<el-upload v-show="false" :disabled="uploadOptions.categoryId==''||uploadOptions.categoryId==null" class="upload-demo"  :show-file-list="false" :action="uploadAction"  :on-success="handleSuccess" :before-upload="beforeupload" :data="uploadOptions" multiple>
+						  
+						      <el-button   type="primary" :id="tinymceId+'-uploadImageBtn'" >点击上传</el-button>  
+					</el-upload>
   </div>
 </template>
 
 <script>
+import config from "@/common/config"; //全局公共库import
+import UploadImage from "@/components/Image/UploadImage";
+import { uploadBase64  } from '@/api/mdp/arc/image';
+import { mapGetters } from "vuex";
+import plugins from "./plugins";
+import toolbar from "./toolbar";
 
-
-import config from '@/common/config';//全局公共库import 
-import UploadImage from '@/components/Image/UploadImage';	
-import { mapGetters } from 'vuex' 
-import plugins from './plugins'
-import toolbar from './toolbar' 
-
-export default { 
-  name: 'Tinymce',
+export default {
+  name: "Tinymce",
   components: { UploadImage },
-  props: { 
+  props: {
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     toolbar: {
       type: Array,
       required: false,
       default() {
-        return []
-      }
+        return [];
+      },
     },
     menubar: {
       type: String,
-      default: 'file edit insert view format table'
+      default: "file edit insert view format table",
     },
     height: {
       type: Number,
       required: false,
-      default: 360
-    }
+      default: 360,
+    },
   },
   data() {
-    return { 
-		imageList:[],
-		dialogVisible:false,
-		editorHtmlData:this.value, 
-      tinymceId: 'vue-tinymce-'+new Date().getTime() + ((Math.random() * 1000).toFixed(0) + ''),
+    return {
+      uploadAction: config.getArcImagePath()+"/arc/image/upload", 
+      uploadOptions:{branchId:'',categoryId:'uploadImm',fileName:'',remark:'',deptid:''},//当前选择上传图片的类型
+      imageList: [],
+      dialogVisible: false,
+      editorHtmlData: this.value,
+      tinymceId:
+        "vue-tinymce-" +
+        new Date().getTime() +
+        ((Math.random() * 1000).toFixed(0) + ""),
       fullscreen: false,
       languageTypeList: {
-        'en': 'en',
-        'zh': 'zh_CN'
-      }
-    }
+        en: "en",
+        zh: "zh_CN",
+      },
+    };
   },
   computed: {
     language() {
-      return this.languageTypeList[this.$store.getters.language]
-    }, 
-	...mapGetters([
-		'userInfo'
-	])
+      return this.languageTypeList[this.$store.getters.language];
+    },
+    ...mapGetters(["userInfo"]),
   },
   watch: {
-    value(val) { 
-		if(val==this.editorHtmlData){
-			return;
-		}
-		this.$nextTick(() =>  window.tinymce.get(this.tinymceId).setContent(val || '')) 
+    value(val) {
+      if (val == this.editorHtmlData) {
+        return;
+      }
+      this.$nextTick(() =>
+        window.tinymce.get(this.tinymceId).setContent(val || "")
+      );
     },
-	editorHtmlData(val) { 
-		this.$emit("input",val)
+    editorHtmlData(val) {
+      this.$emit("input", val);
     },
     language() {
-      this.destroyTinymce()
+      this.destroyTinymce();
       //this.$nextTick(() => this.initTinymce())
-    }
+    },
   },
   mounted() {
-	  this.$nextTick(() => this.initTinymce()) 
+    this.$nextTick(() => this.initTinymce());
   },
   /**
   activated() {
@@ -93,57 +119,63 @@ export default {
   },
    */
   methods: {
-    initTinymce() {
-      debugger
-      const _this = this
+    initTinymce() { 
+      const _this = this;
       window.tinymce.init({
         language: this.language,
         selector: `#${this.tinymceId}`,
         height: this.height,
-        body_class: 'panel-body ',
+        body_class: "panel-body ",
         object_resizing: false,
         toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
         menubar: this.menubar,
         plugins: plugins,
         end_container_on_empty_block: true,
-        powerpaste_word_import: 'clean',
+        powerpaste_word_import: "clean",
         code_dialog_height: 450,
         code_dialog_width: 1000,
-        advlist_bullet_styles: 'square',
-        advlist_number_styles: 'default',
-        imagetools_cors_hosts: ['www.qingqinkj.com', 'codepen.io'],
-        default_link_target: '_blank',
+        advlist_bullet_styles: "square",
+        advlist_number_styles: "default",
+        imagetools_cors_hosts: ["www.qingqinkj.com", "codepen.io"],
+        default_link_target: "_blank",
         link_title: false,
-        convert_urls:false,
-        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 20pt 24pt 28pt 30pt 36pt 38pt 40pt 42pt 46pt 48pt",
-        font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
+        convert_urls: false,
+        paste_data_images: true,
+        fontsize_formats:
+          "8pt 10pt 12pt 14pt 18pt 20pt 24pt 28pt 30pt 36pt 38pt 40pt 42pt 46pt 48pt",
+        font_formats:
+          "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
         nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
-        init_instance_callback: editor => { 
+        init_instance_callback: (editor) => {
           if (_this.value) {
-            editor.setContent(_this.value)
-          } 
-          editor.on('NodeChange Change KeyUp SetContent', () => { 
-			_this.editorHtmlData=editor.getContent() 
-          })
+            editor.setContent(_this.value);
+          }
+          editor.on("NodeChange Change KeyUp SetContent", () => {
+            _this.editorHtmlData = editor.getContent();
+          });
         },
         setup(editor) {
-			
-          editor.on('FullscreenStateChanged', (e) => {
-            _this.fullscreen = e.state
-          })
-		   
-		  editor.addButton('imageList',{
-			  text:'图片库',
-			  icon:false,
-			  onclick:function(){
-				 _this.dialogVisible=true;  
-          _this.$nextTick(()=>{ 
-            //document.getElementById("editor-dialog").style.zIndex="100000"
-          }) 
-           
-			  }
-		  })
-        }
+          editor.on("FullscreenStateChanged", (e) => {
+            _this.fullscreen = e.state;
+          });  
+          editor.addButton('insertImage', {
+            text: "插入图片",
+            icon: false,
+            onclick: function () {  
+                document.getElementById(_this.tinymceId+"-uploadImageBtn").click(); 
+            },
+          });
+          editor.addButton("imageList", {
+            text: "图片库",
+            icon: false,
+            onclick: function () {
+              _this.dialogVisible = true;
+              _this.$nextTick(() => {
+                //document.getElementById("editor-dialog").style.zIndex="100000"
+              });
+            },
+          });
+        },
         // 整合七牛上传
         // images_dataimg_filter(img) {
         //   setTimeout(() => {
@@ -159,67 +191,83 @@ export default {
         //   }, 0);
         //   return img
         // },
-        // images_upload_handler(blobInfo, success, failure, progress) {
-        //   progress(0);
-        //   const token = _this.$store.getters.token;
-        //   getToken(token).then(response => {
-        //     const url = response.data.qiniu_url;
-        //     const formData = new FormData();
-        //     formData.append('token', response.data.qiniu_token);
-        //     formData.append('key', response.data.qiniu_key);
+        // images_upload_handler(blobInfo, success, failure, progress) { 
+        //     const formData = new FormData();  
         //     formData.append('file', blobInfo.blob(), url);
-        //     upload(formData).then(() => {
-        //       success(url);
-        //       progress(100);
+        //     var params=this.uploadOptions;
+        //     params.storedb="0"
+        //     params.fileData=blobInfo.blob();
+        //     uploadBase64(formData).then((res) => {
+        //        handleConfirm([res.data])
         //     })
-        //   }).catch(err => {
-        //     failure('出现未知问题，刷新页面，或者联系程序员')
-        //     console.log(err);
-        //   });
+          
         // },
-      }) 
-	  this.setContent(this.value)
-    
+      });
+      this.setContent(this.value);
     },
     destroyTinymce() {
-      const tinymce = window.tinymce.get(this.tinymceId)
+      const tinymce = window.tinymce.get(this.tinymceId);
       if (this.fullscreen) {
-        tinymce.execCommand('mceFullScreen')
+        tinymce.execCommand("mceFullScreen");
       }
       if (tinymce) {
-        tinymce.destroy()
+        tinymce.destroy();
       }
     },
-    setContent(value) { 
-      window.tinymce.get(this.tinymceId).setContent(value)
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value);
     },
     getContent() {
-      window.tinymce.get(this.tinymceId).getContent()
+      window.tinymce.get(this.tinymceId).getContent();
+    },
+    insertImage() {
+      let imageList = this.imageList;
+      let imageHtml = "";
+      (imageList || []).map((item) => {
+        imageHtml =
+          imageHtml + "<p><img class='image' src='" + item.url + "'></p>";
+      });
+      if (imageHtml != "") {
+        window.tinymce.get(this.tinymceId).insertContent(`${imageHtml}`);
+      }
+      this.dialogVisible = false;
+    },
+
+    handleConfirm(imgs) {
+      this.imageList = imgs; //{url:xxx,remark:xxxx}
+      this.insertImage();
     },
-	insertImage () {  
-		let imageList = this.imageList;
-		let imageHtml = "";
-		(imageList || []).map(item => {
-			imageHtml = imageHtml + "<p><img class='image' src=\"" + item.url + "\"/></p>";
-		})
-		if (imageHtml != "") {
-			 window.tinymce.get(this.tinymceId).insertContent(`${imageHtml}`)
-		}
-		this.dialogVisible = false;
-	},
-	
-	handleConfirm(imgs){   
-		this.imageList=imgs//{url:xxx,remark:xxxx}
-		this.insertImage(); 
-	},
     imageSuccessCBK(arr) {
-      const _this = this
-      arr.forEach(v => {
-        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
-      })
-    }
-  }
-}
+      const _this = this;
+      arr.forEach((v) => {
+        window.tinymce
+          .get(_this.tinymceId)
+          .insertContent(`<img class="wscnph" src="${v.url}" >`);
+      });
+    },
+    handleSuccess(res,file) {
+       this.$nextTick(()=>{
+         this.handleConfirm([res.data])
+       })
+			 
+		
+		  }, 
+		  beforeupload(file){ 
+			  if(this.uploadOptions.categoryId=='' || this.uploadOptions.categoryId==null){
+				  	this.$message({ message: "请选择分类", type: "warning" }); 
+				  	return false;
+				  	}
+			    if(file.size<=1024*2024){//1M
+			    	return true;
+			    }else{
+			    	this.$message({ message: '为了良好的客户体验，大于2M的文件需经过裁剪压缩处理', type: 'warning' });
+			    	return false;
+			    }
+			  	
+				
+			  },
+  },
+};
 </script>
 
 <style scoped>
@@ -227,7 +275,7 @@ export default {
   position: relative;
   line-height: normal;
 }
-.tinymce-container>>>.mce-fullscreen {
+.tinymce-container >>> .mce-fullscreen {
   z-index: 10000;
 }
 .tinymce-textarea {
@@ -247,8 +295,7 @@ export default {
 .editor-upload-btn {
   display: inline-block;
 }
-#editor-dialog{
-  z-index:20000 !important;
+#editor-dialog {
+  z-index: 20000 !important;
 }
-
 </style> 

src/components/Tinymce/toolbar.js

@@ -1,6 +1,6 @@
 // Here is a list of the toolbar
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
 
-const toolbar = ['searchreplace fontselect fontsizeselect bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen imageList']
+const toolbar = ['searchreplace fontselect fontsizeselect bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen imageList insertImage']
 
 export default toolbar

src/router/index.js

@@ -71,12 +71,11 @@ export default new Router({
   routes: constantRouterMap
 })
 
-let allRoutes = []
-
-allRoutes = allRoutes.concat(routesWorkflow.routes).concat(routesForm.routes)
-allRoutes=allRoutes.concat(routesArc.routes);
-allRoutes=allRoutes.concat(routesIm.routes);
+let allRoutes = [] 
 allRoutes=allRoutes.concat(routesXm.routes); 
 allRoutes=allRoutes.concat(routesDatavXm.routes);
+allRoutes=allRoutes.concat(routesWorkflow.routes).concat(routesForm.routes)
+allRoutes=allRoutes.concat(routesArc.routes);
+allRoutes=allRoutes.concat(routesIm.routes);
 
 export const asyncRouterMap = allRoutes