feat: ✨ 商家端富文本改为本地引入

manager/src/components/editor/upload-image.vue

@@ -88,6 +88,9 @@ export default {
     };
   },
   methods: {
+    confirmUrl(){
+
+    },
     handleClickUploadImage(){
       this.show = true
     },
@@ -100,7 +103,6 @@ export default {
     // 移除商品图片
     handleRemoveGoodsPicture(__index) {
       this.images.splice(__index, 1);
-      // this.images = this.images.filter((i) => i.url !== file.url);
     },
     // 图片大小不正确
     handleMaxSize(file) {

seller/package.json

@@ -13,7 +13,6 @@
     "-": "0.0.1",
     "@amap/amap-jsapi-loader": "0.0.7",
     "@antv/g2": "^4.1.14",
-    "@tinymce/tinymce-vue": "^3.2.0",
     "axios": "^0.21.1",
     "dplayer": "^1.27.1",
     "js-cookie": "^2.2.1",

seller/public/index.html

@@ -14,6 +14,9 @@
     <link rel="stylesheet" href="<%=css%>" />
     <% } %>
     <style>
+      .tox-promotion {
+        display: none;
+      }
       .page-loading-wrap {
         padding: 120px;
         display: flex;
@@ -69,6 +72,7 @@
     <script src="<%=js%>"></script>
     <% } %>
     <script src="/config.js"></script>
+    <script src="./tinymce/tinymce.min.js"></script>
     <noscript>
       <strong
         >We're sorry  doesn't work properly without JavaScript

seller/src/views/goods/goods-seller/goodsOperationSec.vue

@@ -312,9 +312,12 @@
               </FormItem>
             </div>
             <FormItem class="form-item-view-el" label="PC商品描述" prop="intro" style="width: 100%">
-              <Alert class='editor-alert' type="warning">将文件夹下的图片进行拖拽到文本框内，即可完成单/多图片上传。</Alert>
+              <editor
-              <editor ref="editor" v-model="baseInfoForm.intro" :init="{ ...initEditor, height: '800px' }" openXss>
+                ref="editor"
-              </editor>
+                v-model="baseInfoForm.intro"
+                height="800px"
+                openXss
+              ></editor>
               <div class="promise-intro-btn">
                 <Button type="primary" @click="promiseIntroEditor">将PC商品描述同步到移动端描述
                 </Button>
@@ -322,8 +325,12 @@
             </FormItem>
 
             <FormItem class="form-item-view-el" label="移动端描述" prop="skuList" style="width: 100%">
-              <editor ref="editor" v-model="baseInfoForm.mobileIntro" :init="{ ...initEditor, height: '800px' }" openXss>
+              <editor
-              </editor>
+                ref="introEditor"
+                v-model="baseInfoForm.mobileIntro"
+                height="800px"
+                openXss
+              ></editor>
             </FormItem>
           </div>
           <div v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'">
@@ -416,8 +423,8 @@ import * as API_GOODS from "@/api/goods";
 import * as API_Shop from "@/api/shops";
 import cloneObj from "@/utils/index";
 import vuedraggable from "vuedraggable";
-import Editor from "@tinymce/tinymce-vue";
+import tinymec from "@/views/lili-components/editor/index.vue";
-import { initEditor } from "@/views/lili-components/editor/config";
+
 import { uploadFile } from "@/libs/axios";
 import { regular } from "@/utils";
 import DPlayer from 'dplayer';
@@ -425,7 +432,7 @@ import DPlayer from 'dplayer';
 export default {
   name: "goodsOperationSec",
   components: {
-    editor: Editor,
+    editor: tinymec,
     vuedraggable,
   },
   props: {
@@ -452,7 +459,7 @@ export default {
     };
     return {
       regular,
-      initEditor,
+
       total: 0,
       goodsVideo: "",
       showContent: false,
@@ -1035,7 +1042,13 @@ export default {
     },
     // 将pc商品描述同步给移动端
     promiseIntroEditor() {
+      this.$nextTick(() => {
+        this.$refs.introEditor.setContent(this.baseInfoForm.intro);
+      })
+
       this.baseInfoForm.mobileIntro = this.baseInfoForm.intro;
+
+      this.$forceUpdate();
     },
 
     /** 根据当前分类id查询商品应包含的参数 */

seller/src/views/lili-components/editor/config.js

@@ -1,33 +1,24 @@
 import plugins from "./plugins";
 import toobar from "./toolbar";
-import { upLoadFileMethods } from "@/api/common";
+const localCDN = window.location.origin + "/tinymce"; //本地引入
-
 export const initEditor = {
+  base_url: localCDN,
   height: "400px",
-  language: "zh_CN",
+  language: "zh-Hans",
   menubar: "file edit  view format table", // 菜单:指定应该出现哪些菜单
   toolbar: toobar, // 分组工具栏控件
-  plugins: plugins, // 插件(比如: advlist | link | image | preview等)
+  plugins:plugins, // 插件(比如: advlist | link | image | preview等)
   object_resizing: false, // 是否禁用表格图片大小调整
   end_container_on_empty_block: true, // enter键 分块
   powerpaste_word_import: "merge", // 是否保留word粘贴样式  clean | merge
   advlist_bullet_styles: "square", // 无序列表 有序列表
   maxSize: "2097152", // 设置图片大小
   accept: "image/jpeg, image/png", // 设置图片上传规则
-  images_upload_handler: async function (blobInfo, success, failure) {
+  paste_data_images:false,
-    const formData = new FormData();
+  browser_spellcheck: true, // 拼写检查
-    formData.append("file", blobInfo.blob());
+  branding: false, // 去水印
-    try {
+  elementpath: false, // 禁用编辑器底部的状态栏
-      const res = await upLoadFileMethods(formData);
+  statusbar: false, // 隐藏编辑器底部的状态栏
-      if (res.result) {
-        success(res.result)
-      } else {
-        failure("上传文件有误请稍后重试");
-      }
-    } catch (e) {
-      failure('上传出错')
-    }
-  },
   // init_instance_callback: function (editor) {
   //   var freeTiny = document.querySelector(".tox .tox-notification--in .tox-notification .tox-notification--warning .tox .tox-notification--warning .tox-notifications-container");
   //   freeTiny.style.display = "none";
@@ -51,7 +42,4 @@ export const initEditor = {
 
     ul,ol{ list-style-position:inside; }
     `, // 设置样式
-  statusbar: false, // 隐藏编辑器底部的状态栏
-  elementpath: false, // 禁用编辑器底部的状态栏
-  paste_data_images: true, // 允许粘贴图像
 };

seller/src/views/lili-components/editor/plugins.js

@@ -1,4 +1,4 @@
 const plugins = [
-  'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
+  'advlist', 'anchor', 'autolink', 'autosave', 'code', 'codesample', 'directionality', 'emoticons', 'fullscreen', 'image', 'importcss', 'insertdatetime', 'link', 'lists', 'media', 'nonbreaking', 'pagebreak', 'preview', 'save', 'searchreplace', 'table', 'template', 'visualblocks', 'visualchars', 'wordcount'
 ]
 export default plugins

seller/src/views/sys/oss-manage/ossManage.vue

@@ -804,6 +804,7 @@ export default {
         size += item.fileSize * 1.0;
       });
       this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+      this.$emit('selected',e)
     },
   },
   mounted() {