发布及图片上传功能

package-lock.json

@@ -5186,6 +5186,11 @@
       "integrity": "sha1-P7rwIL/XlIhAcuomsel5HUWmKfA=",
       "dev": true
     },
+    "dropzone": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npm.taobao.org/dropzone/download/dropzone-5.9.2.tgz",
+      "integrity": "sha1-CpDOP2sBHDkySE82j0vwYiNylFA="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fduplexer%2Fdownload%2Fduplexer-0.1.2.tgz",
@@ -13093,6 +13098,14 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vue2-dropzone": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npm.taobao.org/vue2-dropzone/download/vue2-dropzone-3.6.0.tgz",
+      "integrity": "sha1-tLtLZN4cu7O4jwSySHjgZ4ClFUY=",
+      "requires": {
+        "dropzone": "^5.5.1"
+      }
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz",

package.json

@@ -20,6 +20,7 @@
     "vue": "^2.6.11",
     "vue-fragment": "^1.5.2",
     "vue-router": "^3.2.0",
+    "vue2-dropzone": "^3.6.0",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/components/Editor/ImageModal.vue

+<template>
+  <div>
+    <a-modal
+      title="上传图片"
+      :visible="visible"
+      :editor="editor"
+      :confirm-loading="confirmLoading"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      okText="插入图片"
+      cancelText="取消"
+    >
+      <!-- Tab栏 -->
+      <button @click="tab = 1;" 
+              :class="{ active: tab == 1 }"
+              class="tab text-gray-800 hover:text-color-primary rounded px-2 py-1 mb-5 mr-5">
+              通过链接上传
+      </button>
+      <button @click="tab = 2;" 
+              :class="{ active: tab == 2 }"
+              class="tab text-gray-800 hover:text-color-primary rounded-sm px-2 py-1 mb-5">
+              拖动 / 选择文件上传图片
+      </button>
+      <!-- 上传区域 -->
+      <div v-if="tab == 1">
+        <a-input type="text" v-model="imageSrc" placeholder="请输入图片链接"/>
+      </div>
+      <div v-if="tab == 2">
+        <vue-dropzone
+          ref="myVueDropzone"
+          @vdropzone-success="vfileUploaded"
+          id="dropzone"
+          :options="dropzoneOptions"
+        >
+        </vue-dropzone>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import vue2Dropzone from "vue2-dropzone"
+import "vue2-dropzone/dist/vue2Dropzone.min.css"
+
+export default Vue.extend({
+  components:{ vueDropzone: vue2Dropzone },
+  props: ["editor"],
+  data(){
+    return{
+      visible:false,
+      confirmLoading:false,
+      imageSrc:"",
+      dropzoneOptions: {
+        url: "/api/upload",
+        thumbnailWidth: 200,
+        maxFilesize: 0.5,
+        dictDefaultMessage: "拖动/选择文件上传图片",
+      },
+      tab:1,
+    }
+  },
+  // computed: {
+  //   validImage() {
+  //     return (
+  //       this.imageSrc.match(/unsplash/) !== null ||this.imageSrc.match(/\.(jpeg|jpg|gif|png)$/) != null
+  //     );
+  //   },
+  // },
+  methods:{
+    showModal(){
+      this.visible = true
+    },
+    vfileUploaded(file:File|Blob) {
+      /** Here is where you get your URL/Base64 string or what ever.*/
+    },
+    handleOk(e:Event) {
+      if (this.imageSrc){ 
+        this.editor.chain().focus().setImage({ src:this.imageSrc }).run()
+      } else if( (this.$refs.myVueDropzone as any)){
+        (this.$refs.myVueDropzone as any).getAcceptedFiles().forEach( (file:any) => {
+          this.editor.chain().focus().setImage({ src: file.dataURL }).run()
+        })
+      } 
+      this.handleCancel(e)
+    },
+    handleCancel(e:Event) {
+      this.visible = false
+      this.imageSrc = ""
+      this.tab = 1
+    },
+  }
+})
+</script>
+
+<style scoped>
+.tab.active{
+  background: #E6F7FF;
+  color:#1890ff;
+  border: none;
+}
+
+</style>
\ No newline at end of file

src/components/Editor/editorMenuBar.vue

 <template>
   <div v-if="editor" class="menubar" :editor="editor">
+    <!-- 文件上传弹窗 -->
+    <ModalComponent ref="uploadModal" :editor="editor"/>
+    <!-- 菜单 -->
     <button @click="addImage"
             class="menubar__button">
       <icon name="image" />
@@ -74,25 +77,26 @@
   </div>
 </template>
 
-<script>
-import Icon from "@/components/Icon/index.vue";
 
-export default {
+<script lang="ts">
+import Vue from 'vue'
+import Icon from "@/components/Icon/index.vue"
+import ModalComponent from "./ImageModal.vue"
+
+export default Vue.extend({
   props: ["editor"],
   components: {
     Icon,
+    ModalComponent,
   },
   methods: {
     addImage() {
-      const url = window.prompt('请输入图片链接')
-      if (url) {
-        this.editor.chain().focus().setImage({ src: url }).run()
-      }
+       (this.$refs.uploadModal as any).showModal()
     },
   },
-};
+})
 </script>
 
-<style lang="scss">
+<style scoped>
 
-</style>
+</style>
\ No newline at end of file

src/components/Editor/editorUpload.vue

@@ -22,13 +22,16 @@
 </template>
 
 <script lang="ts">
+import Vue from 'vue'
+import { message } from 'ant-design-vue'
 
 function getBase64(img: Blob, callback: (any: any) => void) {
   const reader = new FileReader();
   reader.addEventListener("load", () => callback(reader.result));
   reader.readAsDataURL(img);
 }
-export default {
+
+export default Vue.extend({
   data(){
     return{
       imageUrl: "", 
@@ -52,16 +55,16 @@ export default {
   beforeUpload(file:File) {
     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
     if (!isJpgOrPng) {
-      this.$message.error('You can only upload JPG file!');
+      message.error('You can only upload JPG file!');
     }
     const isLt2M = file.size / 1024 / 1024 < 2;
     if (!isLt2M) {
-      this.$message.error('Image must smaller than 2MB!');
+      message.error('Image must smaller than 2MB!');
     }
     return isJpgOrPng && isLt2M;
   },
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/Editor/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { Editor, EditorContent,Image } from '@tiptap/vue-2'
+import { Editor, EditorContent } from '@tiptap/vue-2'
 import StarterKit from '@tiptap/starter-kit'
 import {Image as Timage} from '@tiptap/extension-image'
 import EditorMenuBar from './editorMenuBar.vue'
@@ -23,14 +23,20 @@ async function handleUpload(file) {
 export default {
   components: {
     EditorContent,
-    EditorMenuBar
+    EditorMenuBar,
+  },
+  props:{
+    visible:{
+      type:Boolean,
+      default:true
+    }
   },
   data() {
     return {
       editor: null,
     }
   },
-   mounted() {
+  mounted() {
     this.editor = new Editor({
       extensions: [
         StarterKit,
@@ -38,7 +44,9 @@ export default {
       ],
       autofocus: 'start',
     })
-   },
+  },
+  methods:{
+  },
   beforeDestroy() {
     this.editor.destroy();
   },

src/views/Root/Activity/publish.vue

 <template>
   <div class=" editor">
-    <p class=" text-2xl font-bold mb-5">发布资讯</p>
+    <p class=" text-2xl font-bold mb-5">发布活动</p>
     <editor-title class=" mb-5"/>
     <!-- 上传概要图片 -->
     <editor-upload/>
     <!-- 编辑器 -->
     <editor class="edit-news text-left"/>
     <!-- 发布操作 -->
-    <a-button type="primary" @click="onSubmit">确定发布</a-button>
+    <a-button type="primary" @click="onSubmit" class=" mt-5">确定发布</a-button>
   </div>
 </template>
 
@@ -20,7 +20,6 @@ import EditorUpload from '@/components/Editor/editorUpload.vue'
 export default Vue.extend({
   components:{ Editor,EditorTitle,EditorUpload },
   data(){
-    let editor: any = undefined
     return{
     }
   },

src/views/Root/News/publish.vue

 <template>
-  <div>
+  <div class=" editor">
     <p class=" text-2xl font-bold mb-5">发布资讯</p>
-    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" ref="ruleForm" :rules="rules">
-      <a-form-model-item label="标题" prop="title">
-        <a-input v-model="form.title" placeholder="请输入标题" style="width: 200px"/>
-      </a-form-model-item>
-      <a-form-model-item label="作者名称" prop="author">
-        <a-input v-model="form.author" placeholder="请输入作者名称" style="width: 200px"/>
-      </a-form-model-item>
-      <a-form-model-item label="文章分类" prop="type">
-        <a-select :default-value="articalType[0]" style="width: 200px" v-model="form.type"> 
-          <a-select-option v-for="(type,i) in articalType" :key="i">{{type}}</a-select-option>
-        </a-select>
-      </a-form-model-item>
-      <a-form-model-item label="上传概要图片" :required="true" prop="file" >
-        <a-upload
-            name="file"
-            action="#"
-            accept="image/*"
-            @change="handleChange"
-            required
-          >
-          <a-button style="width:200px"> <a-icon type="upload" /> 点击上传 </a-button>
-        </a-upload>
-      </a-form-model-item>
-      <!-- 编辑器 -->
-      <!-- 发布操作 -->
-      <a-form-model-item :wrapper-col="{ span: 11 }">
-        <a-button type="primary" @click="onSubmit">确定发布</a-button>
-      </a-form-model-item>
-    </a-form-model>
+    <div class=" flex content-between justify-between">
+      <!-- 标题 -->
+      <a-input v-model="title" placeholder="请输入标题" style="width: 40%"/>
+      <!-- 作者 -->
+      <a-input v-model="author" placeholder="请输入作者名称" style="width: 35%" />
+      <!-- 文章分类 -->
+      <a-select placeholder="资讯类别" style="width: 15%" v-model="type"> 
+        <a-select-option v-for="(type,i) in articalType" :key="i">{{type}}</a-select-option>
+      </a-select>
+    </div>
+    <!-- 上传概要图片 -->
+    <editor-upload class=" mt-5"/>
+    <!-- 编辑器 -->
+    <editor class="edit-news text-left"/>
+    <!-- 发布操作 -->
+    <a-button type="primary" @click="onSubmit" class=" mt-5">确定发布</a-button>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { FormModel } from 'ant-design-vue';
+import Editor from '@/components/Editor/index.vue'
+import EditorTitle from '@/components/Editor/editorTitle.vue'
+import EditorUpload from '@/components/Editor/editorUpload.vue'
 
 export default Vue.extend({
+  components:{ Editor,EditorTitle,EditorUpload },
   props:{
     articalType:{
       type:Array,
@@ -48,41 +38,14 @@ export default Vue.extend({
   },
   data(){
     return{
-      form:{
-        title:'',
-        author:'',
-        type:'',
-      },
-      labelCol: { span: 5 },
-      wrapperCol: { span:4},
-      rules:{
-        title: [{ required: true, message: '请输入标题', trigger: 'change' }],
-        type: [{ required: true, message: '请选择文章分类', trigger: 'change' }],
-        author: [{ required: true, message: '请输入作者名称', trigger: 'change' }],
-        file: [{ required: true, message: '请上传概要图片', trigger: 'change' }],
-      }
+      title:'',
+      author:'',
+      type:''
     }
   },
   methods:{
-    handleChange(info:any) {
-      if (info.file.status !== 'uploading') {
-        console.log(info.file, info.fileList);
-      }
-      if (info.file.status === 'done') {
-        console.log(`${info.file.name} file uploaded successfully`);
-      } else if (info.file.status === 'error') {
-        console.log(`${info.file.name} file upload failed.`);
-      }
-    },
     onSubmit() {
-      (this.$refs.ruleForm as FormModel).validate(valid => {
-        if (valid) {
-          
-        } else {
-          console.log('error submit!!');
-          return false;
-        }
-      });
+      
     },
   }
 })

tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
     extend:{
       colors:{
         // 主题色
-        'color-primary':'#0099CC',
+        'color-primary':'#1890ff',
         // 登录按钮
         'btn-login':'#03CDFF'
       }