添加富文本提交

src/components/tinymce/TinymceEditor.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import axios from "axios";
+// import axios from "axios";
 import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
 import Editor from "@tinymce/tinymce-vue"; //编辑器引入
 import "tinymce/themes/silver/theme"; //编辑器主题
@@ -18,7 +18,7 @@ import "tinymce/plugins/lists"; //列表插件
 import "tinymce/plugins/charmap"; //特殊字符
 import "tinymce/plugins/media"; //插入编辑媒体
 import "tinymce/plugins/wordcount"; // 字数统计
-import Cookies from "js-cookie";
+// import Cookies from "js-cookie";
 
 const fonts = [
   "宋体=宋体",
@@ -72,7 +72,7 @@ export default {
     toolbar: {
       type: [String, Array],
       default:
-        "undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table"
+        "undo redo |  formatselect | colorpicker | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table"
     }
   },
   data() {
@@ -112,26 +112,27 @@ export default {
           } else if (blobInfo.blob().type == isAccord) {
             failure("图片格式错误");
           } else {
-            let formData = new FormData();
-            // 服务端接收文件的参数名，文件数据，文件名
-            formData.append("file", blobInfo.blob(), blobInfo.filename());
-            axios({
-              method: "POST",
-              headers: {
-                Authorization: "bearer " + Cookies.get("access_token")
-              },
-              // 这里是你的上传地址
-              url: window.SITE_CONFIG["apiURL"] + "/oss/file/upload",
-              data: formData
-            })
-              .then(res => {
-                console.log(res);
-                // 这里返回的是你图片的地址
-                success(res.data.data.url);
-              })
-              .catch(() => {
-                failure("上传失败");
-              });
+            // let formData = new FormData();
+            // // 服务端接收文件的参数名，文件数据，文件名
+            // formData.append("file", blobInfo.blob(), blobInfo.filename());
+            // axios({
+            //   method: "POST",
+            //   headers: {
+            //     Authorization: "bearer " + Cookies.get("access_token")
+            //   },
+            //   // 这里是你的上传地址
+            //   url: "",
+            //   data: formData
+            // })
+            //   .then(res => {
+            //     console.log(res);
+            //     // 这里返回的是你图片的地址
+            //     success(res.data.data.url);
+            //   })
+            //   .catch(() => {
+            //     failure("上传失败");
+            //   });
+            success("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3374430706,2610126421&fm=11&gp=0.jpg");
           }
         }
       }

src/views/articleManagement/articleCreate.vue

@@ -1,17 +1,33 @@
 <template>
   <div class="app-container">
-    <div class="common-card">
-      <div>这里是新建文章</div>
-    </div>
     <div class="common-card a-card-margin-top">
       <TinymceEditor v-model="content"></TinymceEditor>
     </div>
+    <div>
+      <a-button type="primary" html-type="submit" @click="submit">
+        提交
+      </a-button>
+      <a-button type="primary" html-type="submit" @click="preview">
+        预览
+      </a-button>
+    </div>
+    <!-- 预览弹出框 -->
+    <a-drawer
+      title=""
+      placement="top"
+      :closable="true"
+      :visible="previewVisible"
+      @close="onClose"
+      height="100%"
+    >
+      <p v-html="content">{{ content }}</p>
+    </a-drawer>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'articleCreate',
+  name: "articleCreate",
   props: {},
   components: {
     // components: (reslove) => {
@@ -20,7 +36,8 @@ export default {
   },
   data() {
     return {
-      content: 'aaaa',
+      content: "输入内容",
+      previewVisible: false
     };
   },
   created() {
@@ -33,7 +50,16 @@ export default {
   methods: {
     //初始化数据
     initDataFun() {},
-  },
+    submit() {
+      console.log(this.content);
+    },
+    preview() {
+      this.previewVisible = true;
+    },
+    onClose() {
+      this.previewVisible = false;
+    }
+  }
 };
 </script>