内容管理表单功能--06202332

src/components/TinymceEditor/index.vue

@@ -9,6 +9,7 @@
 
 <script>
 import tinymce from 'tinymce/tinymce';
+import { file_picker_callback, images_upload_handler } from './option'
 import 'tinymce/icons/default';
 import 'tinymce/themes/silver';
 import 'tinymce/plugins/code';
@@ -123,12 +124,9 @@ const defaultConfig = {
     'rtl'
   ].join(' '),
   toolbar_drawer: 'sliding',
-  images_upload_handler: (blobInfo, success) => {
+  images_upload_handler: images_upload_handler,
-    success('data:image/jpeg;base64,' + blobInfo.base64());
-  },
   file_picker_types: 'media',
-  file_picker_callback: () => {
+  file_picker_callback: file_picker_callback
-  }
 };
 
 export default {

src/components/TinymceEditor/option.js

@@ -0,0 +1,88 @@
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+import setting from '@/config/setting';
+let token =  localStorage.getItem('access_token')
+
+
+const GLOB_UPLOAD_URL = setting.uploadImageUrl+'?upload_type=img'
+// @ts-ignore
+export const file_picker_callback = (callback, value, meta) => {
+  // 文件分类
+  var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'
+  // 后端接收上传文件的地址
+  var upurl = GLOB_UPLOAD_URL
+  // 为不同插件指定文件类型及后端地址
+  switch (meta.filetype) {
+    case 'image':
+      filetype = '.jpg, .jpeg, .png, .gif'
+      break
+    case 'media':
+      filetype = '.mp3, .mp4'
+      break
+    case 'file':
+    default:
+  }
+  // 模拟出一个input用于添加本地文件
+  var input = document.createElement('input')
+  input.setAttribute('type', 'file')
+  input.setAttribute('accept', filetype)
+  input.click()
+  input.onchange = () => {
+    // @ts-ignore
+    var file = this.files[0]
+
+    var xhr, formData
+    xhr = new XMLHttpRequest()
+    xhr.withCredentials = false
+    xhr.open('POST', upurl)
+    xhr.onload = () => {
+      var json
+      if (xhr.status !== 200) {
+        // failure('HTTP Error: ' + xhr.status)
+        return
+      }
+      json = JSON.parse(xhr.responseText)
+      if (!json || json.code !== '200') {
+        // failure('Invalid JSON: ' + xhr.responseText)
+        return
+      }
+      callback(json.message, { text: file.name })
+    }
+    formData = new FormData()
+    formData.append('file', file, file.name)
+    formData.append('token', token)
+    xhr.send(formData)
+  }
+}
+
+export const images_upload_handler = (blobInfo, succFun, failFun) => {
+  var xhr, formData
+  var file = blobInfo.blob() // 转化为易于理解的file对象
+  // console.log(file)
+  xhr = new XMLHttpRequest()
+  xhr.withCredentials = false
+  xhr.open('POST', GLOB_UPLOAD_URL)
+  xhr.onload = () => {
+    var json
+    if (xhr.status !== 200) {
+      failFun('HTTP Error: ' + xhr.status)
+      return
+    }
+    json = JSON.parse(xhr.responseText)
+    console.log(xhr.responseText)
+
+    if (!json || json.code !== 0) {
+      // failFun('Invalid JSON: ' + xhr.responseText)
+      return
+    }
+    console.log(json.url)
+    succFun(json.url)
+  }
+  formData = new FormData()
+  formData.append('file', file, file.name) // 此处与源文档不一样
+  formData.append('token', token)
+  xhr.send(formData)
+}

src/views/content/content-edit.vue

@@ -1,6 +1,6 @@
 <!-- 用户编辑弹窗 -->
 <template>
-  <el-dialog :title="isUpdate?'编辑':'添加'" :visible="visible" width="80%" :destroy-on-close="true" :lock-scroll="false"
+  <el-dialog :title="isUpdate?'编辑':'添加'" :visible="visible" width="80%" :destroy-on-close="true" :lock-scroll="false" :close-on-click-modal="false"
     custom-class="ele-dialog-form" @update:visible="updateVisible">
     <!-- <p>formData: {{dig_value}}</p> -->
     <form-create v-model="formApi" :rule="edit_rule" :option="dig_option"></form-create>

src/views/content/create_form.js

@@ -1,5 +1,6 @@
 
 import setting from '@/config/setting';
+let token =  localStorage.getItem('access_token')
 
 export function getForm(valNew) {
   const rule = []
@@ -51,30 +52,37 @@ export function getForm(valNew) {
     if (e.type === 'file') {
       eItem.type = 'upload'
       eItem.props = {
+        headers: { token },
         type: 'drag',
         uploadType: 'file',
-        action: setting.uploadImageUrl,
+        action: setting.uploadImageUrl+'?upload_type=file',
-        name: 'pic',
+        name: 'file',
         multiple: true, // 多选
         limit: 2,
         onSuccess: function(res, file) {
-          file.url = res.data.filePath;
+          if(res.code ==0){
+            file.url = res.url;
           }
         }
       }
-    if (e.type === 'image' || e.type === 'images') {
+    }
-      eItem.type = 'upload'
+    if (e.type === "image" || e.type === "images") {
+      eItem.type = "upload"
       eItem.props = {
-        type: 'select',
+        headers: { token },
-        uploadType: 'image',
+        type: "select",
-        action: setting.uploadImageUrl,
+        uploadType: "image",
-        name: 'pic',
+        action: setting.uploadImageUrl+'?upload_type=img',
+        name: "file",
         multiple: true,
-        accept: 'image',
+        // accept: "image\/*",
-        limit: 1, //可上传文件数量 (limit: 2,)
+        maxLength: 1, //可上传文件数量 (limit: 2,)
         allowRemove: true, //是否可删除,设置为false是不显示删除按钮
         onSuccess: function(res, file) {
-          file.url = res.data.filePath;
+          if(res.code ==0){
+            file.url = res.url;
+          }
+
         }
       }
     }