cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

package/src/components/Tinymce/index.vue

@@ -1,336 +1,382 @@
-<template>
-  <div
-    :class="[fullscreen ? 'fullscreen' : null, readonly ? 'readonly' : null]"
-    class="tinymce-container"
-    :style="{ width: containerWidth }"
-  >
-    <textarea :id="tinymceId" class="tinymce-textarea" v-if="isActivated" />
-    <!-- <div class="editor-custom-btn-container">
-      <editorImage color="#ED6C44 " class="editor-upload-btn" @successCBK="imageSuccessCBK" />
-    </div> -->
-    <template v-if="!readonly">
-      <div class="editor-custom-btn-container">
-        <div class="upload-container">
-          <el-button
-            icon="el-icon-upload"
-            size="mini"
-            type="primary"
-            @click="handleShow({ key: 'value' })"
-          >
-            {{ $t2("上传", "components.Tinymce.uploadButton") }}
-          </el-button>
-        </div>
-      </div>
-      <vab-upload
-        ref="vabUpload"
-        accept="image/png, image/jpeg"
-        @callback="fileConfirm"
-      ></vab-upload>
-    </template>
-  </div>
-</template>
-
-<script>
-/**
- * docs:
- * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
- */
-import plugins from "./plugins";
-import toolbar from "./toolbar";
-import load from "./dynamicLoadScript";
-// import EditorImage from './components/EditorImage.vue'
-
-// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
-const tinymceCDN = window.WEB_PREFIX + "/base/tinymce/tinymce.min.js";
-
-export default {
-  name: "Tinymce",
-  components: { VabUpload: () => import("../../components/VabUpload/index.vue") },
-  props: {
-    id: {
-      type: String,
-      default: function () {
-        return "vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "");
-      },
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    toolbar: {
-      type: Array,
-      required: false,
-      default() {
-        return [];
-      },
-    },
-    menubar: {
-      type: String,
-      default: "file edit insert view format table",
-    },
-    height: {
-      type: [Number, String],
-      required: false,
-      default: 360,
-    },
-    width: {
-      type: [Number, String],
-      required: false,
-      default: "auto",
-    },
-    color: {
-      type: String,
-      default: "#1890ff",
-    },
-    readonly: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  data() {
-    return {
-      hasChange: false,
-      hasInit: false,
-      isActivated: true,
-      tinymceId: this.id,
-      fullscreen: false,
-      languageTypeList: {
-        en: "en",
-        zh: "zh_CN",
-        es: "es_MX",
-        ja: "ja",
-      },
-    };
-  },
-  computed: {
-    containerWidth() {
-      const width = this.width;
-      if (/^[\d]+(\.[\d]+)?$/.test(width)) {
-        // matches `100`, `'100'`
-        return `${width}px`;
-      }
-      return width;
-    },
-  },
-  watch: {
-    value(val) {
-      if (!this.hasChange && this.hasInit) {
-        this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ""));
-      }
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  activated() {
-    if (window.tinymce) {
-      this.isActivated = true;
-      this.$nextTick(() => {
-        this.initTinymce();
-      });
-    }
-  },
-  deactivated() {
-    this.destroyTinymce();
-    this.isActivated = false;
-  },
-  destroyed() {
-    this.destroyTinymce();
-  },
-  methods: {
-    handleShow(data) {
-      this.$baseUpload.open({
-        accept: "image/png, image/jpeg",
-        callback: this.fileConfirm,
-        // pickPrivateProfile:this.pickPrivateProfile,
-        // confirmUpload: this.confirmUpload,
-        // otherParams: this.$attrs,
-      });
-      // this.$refs['vabUpload'].handleShow(data);
-    },
-    init() {
-      // dynamic load tinymce from cdn
-      load(tinymceCDN, (err) => {
-        if (err) {
-          this.$message.error(err.message);
-          return;
-        }
-        this.initTinymce();
-      });
-      // this.initTinymce()
-    },
-    initTinymce() {
-      const _this = this;
-      let locale = this.$i18n && this.$i18n.locale ? this.$i18n.locale : "zh";
-      window.tinymce.init({
-        selector: `#${this.tinymceId}`,
-        language: this.languageTypeList[locale],
-        height: this.height,
-        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",
-        code_dialog_height: 450,
-        code_dialog_width: 1000,
-        advlist_bullet_styles: "square",
-        advlist_number_styles: "default",
-        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
-        default_link_target: "_blank",
-        link_title: false,
-        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
-        paste_data_images: true, // 允许粘贴图像
-        readonly: this.readonly,
-        init_instance_callback: (editor) => {
-          if (_this.value) {
-            editor.setContent(_this.value);
-          }
-          _this.hasInit = true;
-          editor.on("NodeChange Change KeyUp SetContent", () => {
-            this.hasChange = true;
-            this.$emit("input", editor.getContent());
-          });
-        },
-        setup(editor) {
-          editor.on("FullscreenStateChanged", (e) => {
-            _this.fullscreen = e.state;
-          });
-        },
-        // it will try to keep these URLs intact
-        // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
-        // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
-        convert_urls: false,
-        // 整合七牛上传
-        // images_dataimg_filter(img) {
-        //   setTimeout(() => {
-        //     const $image = $(img);
-        //     $image.removeAttr('width');
-        //     $image.removeAttr('height');
-        //     if ($image[0].height && $image[0].width) {
-        //       $image.attr('data-wscntype', 'image');
-        //       $image.attr('data-wscnh', $image[0].height);
-        //       $image.attr('data-wscnw', $image[0].width);
-        //       $image.addClass('wscnph');
-        //     }
-        //   }, 0);
-        //   return img
-        // },
-        images_upload_handler(blobInfo, success, failure, progress) {
-          /* progress(0);
-          _this.$baseUpload.upload({
-            file:blobInfo.blob(),
-            onProgress:(e)=>{
-              progress(e.percent)
-            },
-            callback:(res)=>{
-              if(res.type=="success"){
-                let url =  res.objx.domain + res.objx.url;
-                success(url);
-                progress(100);
-              }else{
-                failure(res.content)
-              }
-            },
-            error:(e)=>{
-              failure(e.message)
-            }
-          }) */
-          /* 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);
-            formData.append('file', blobInfo.blob(), url);
-            upload(formData).then(() => {
-              success(url);
-              progress(100);
-            })
-          }).catch(err => {
-            failure('出现未知问题，刷新页面，或者联系程序员')
-            console.log(err);
-          }); */
-        },
-      });
-    },
-    destroyTinymce() {
-      if (window.tinymce && window.tinymce.get) {
-        const tinymce = window.tinymce.get(this.tinymceId);
-        if (this.fullscreen) {
-          tinymce.execCommand("mceFullScreen");
-        }
-
-        if (tinymce) {
-          tinymce.destroy();
-        }
-      }
-    },
-    setContent(value) {
-      window.tinymce.get(this.tinymceId).setContent(value);
-    },
-    getContent() {
-      window.tinymce.get(this.tinymceId).getContent();
-    },
-    imageSuccessCBK(arr) {
-      arr.forEach((v) =>
-        window.tinymce
-          .get(this.tinymceId)
-          .insertContent(`<img class="wscnph" src="${v.url}" >`)
-      );
-    },
-    fileConfirm(arr) {
-      let txt = "";
-      arr.forEach((v) => {
-        let realUrl = v.domain + v.url;
-        txt = txt + '<img class="wscnph" src="' + realUrl + '" >';
-      });
-      window.tinymce.get(this.tinymceId).insertContent(`<p>${txt}</p>`);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.tinymce-container {
-  position: relative;
-  line-height: normal;
-
-  &.readonly {
-    ::v-deep .mce-top-part {
-      display: none !important;
-    }
-  }
-}
-
-.tinymce-container {
-  ::v-deep {
-    .mce-fullscreen {
-      z-index: 10000;
-    }
-  }
-}
-
-.tinymce-textarea {
-  visibility: hidden;
-  z-index: -1;
-}
-
-.editor-custom-btn-container {
-  position: absolute;
-  right: 4px;
-  top: 4px;
-  /*z-index: 2005;*/
-}
-
-.fullscreen .editor-custom-btn-container {
-  z-index: 10000;
-  position: fixed;
-}
-
-.editor-upload-btn {
-  display: inline-block;
-}
-</style>
+<template>
+  <div
+    :class="[fullscreen ? 'fullscreen' : null, readonly ? 'readonly' : null]"
+    class="tinymce-container"
+    :style="{ width: containerWidth }"
+  >
+    <div v-if="resourceError" role="alert">
+      {{ resourceError }}
+      <button type="button" @click="init">重试</button>
+    </div>
+    <textarea :id="tinymceId" class="tinymce-textarea" v-if="isActivated" />
+    <!-- <div class="editor-custom-btn-container">
+      <editorImage color="#ED6C44 " class="editor-upload-btn" @successCBK="imageSuccessCBK" />
+    </div> -->
+    <template v-if="!readonly">
+      <div class="editor-custom-btn-container">
+        <div class="upload-container">
+          <el-button
+            icon="el-icon-upload"
+            size="mini"
+            type="primary"
+            @click="handleShow({ key: 'value' })"
+          >
+            {{ $t2("上传", "components.Tinymce.uploadButton") }}
+          </el-button>
+        </div>
+      </div>
+      <vab-upload
+        ref="vabUpload"
+        accept="image/png, image/jpeg"
+        @callback="fileConfirm"
+      ></vab-upload>
+    </template>
+  </div>
+</template>
+
+<script>
+/**
+ * docs:
+ * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
+ */
+import plugins from "./plugins";
+import toolbar from "./toolbar";
+import load from "./dynamicLoadScript";
+import { richTextResourcePath } from "../../utils/featureResources";
+// import EditorImage from './components/EditorImage.vue'
+
+// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
+
+export default {
+  name: "Tinymce",
+  components: { VabUpload: () => import("../../components/VabUpload/index.vue") },
+  props: {
+    id: {
+      type: String,
+      default: function () {
+        return "vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "");
+      },
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return [];
+      },
+    },
+    menubar: {
+      type: String,
+      default: "file edit insert view format table",
+    },
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 360,
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: "auto",
+    },
+    color: {
+      type: String,
+      default: "#1890ff",
+    },
+    readonly: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  data() {
+    return {
+      resourceError: "",
+      resourceBase: "",
+      initializing: false,
+      initGeneration: 0,
+      hasChange: false,
+      hasInit: false,
+      isActivated: true,
+      tinymceId: this.id,
+      fullscreen: false,
+      languageTypeList: {
+        en: "en",
+        zh: "zh_CN",
+        es: "es_MX",
+        ja: "ja",
+      },
+    };
+  },
+  computed: {
+    containerWidth() {
+      const width = this.width;
+      if (/^[\d]+(\.[\d]+)?$/.test(width)) {
+        // matches `100`, `'100'`
+        return `${width}px`;
+      }
+      return width;
+    },
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() => {
+          const editor = window.tinymce && window.tinymce.get(this.tinymceId);
+          if (editor) editor.setContent(val || "");
+        });
+      }
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  activated() {
+    this.isActivated = true;
+    this.$nextTick(() => this.init());
+  },
+  deactivated() {
+    this.destroyTinymce();
+    this.isActivated = false;
+  },
+  beforeDestroy() {
+    this.isActivated = false;
+    this.destroyTinymce();
+  },
+  methods: {
+    handleShow(data) {
+      this.$baseUpload.open({
+        accept: "image/png, image/jpeg",
+        callback: this.fileConfirm,
+        // pickPrivateProfile:this.pickPrivateProfile,
+        // confirmUpload: this.confirmUpload,
+        // otherParams: this.$attrs,
+      });
+      // this.$refs['vabUpload'].handleShow(data);
+    },
+    init() {
+      if (!this.isActivated || this.hasInit || this.initializing) return;
+      const generation = ++this.initGeneration;
+      this.initializing = true;
+      this.resourceError = "";
+      try {
+        const locale = this.$i18n && this.$i18n.locale || "zh";
+        this.resourceBase = richTextResourcePath(this.languageTypeList[locale] || "en");
+      } catch (error) {
+        this.resourceFailed(error);
+        return;
+      }
+      load(this.resourceBase + "tinymce.min.js", (err) => {
+        if (generation !== this.initGeneration || !this.isActivated) return;
+        if (err) {
+          this.resourceFailed(err);
+          return;
+        }
+        try { this.initTinymce(generation); } catch (error) { this.resourceFailed(error); }
+      });
+      // this.initTinymce()
+    },
+    resourceFailed(error) {
+      this.initializing = false;
+      this.resourceError = error.message;
+      this.$emit("resource-error", error);
+    },
+    initTinymce(generation) {
+      const _this = this;
+      let locale = this.$i18n && this.$i18n.locale ? this.$i18n.locale : "zh";
+      const language = this.languageTypeList[locale] || "en";
+      window.tinymce.overrideDefaults({ ...window.tinymce.defaultSettings,
+        base_url: this.resourceBase, suffix: ".min" });
+      const initialization = window.tinymce.init({
+        target: this.$el.querySelector("textarea"),
+        language,
+        language_url: language === "en" ? undefined : this.resourceBase + "langs/" + language + ".js",
+        skin_url: this.resourceBase + "skins/lightgray",
+        height: this.height,
+        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",
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: "square",
+        advlist_number_styles: "default",
+        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
+        default_link_target: "_blank",
+        link_title: false,
+        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
+        paste_data_images: true, // 允许粘贴图像
+        readonly: this.readonly,
+        init_instance_callback: (editor) => {
+          if (generation !== this.initGeneration || !this.isActivated) {
+            editor.remove();
+            return;
+          }
+          if (_this.value) {
+            editor.setContent(_this.value);
+          }
+          _this.hasInit = true;
+          _this.initializing = false;
+          editor.on("NodeChange Change KeyUp SetContent", () => {
+            this.hasChange = true;
+            this.$emit("input", editor.getContent());
+          });
+        },
+        setup(editor) {
+          editor.on("FullscreenStateChanged", (e) => {
+            _this.fullscreen = e.state;
+          });
+        },
+        // it will try to keep these URLs intact
+        // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
+        // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
+        convert_urls: false,
+        // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img
+        // },
+        images_upload_handler(blobInfo, success, failure, progress) {
+          /* progress(0);
+          _this.$baseUpload.upload({
+            file:blobInfo.blob(),
+            onProgress:(e)=>{
+              progress(e.percent)
+            },
+            callback:(res)=>{
+              if(res.type=="success"){
+                let url =  res.objx.domain + res.objx.url;
+                success(url);
+                progress(100);
+              }else{
+                failure(res.content)
+              }
+            },
+            error:(e)=>{
+              failure(e.message)
+            }
+          }) */
+          /* 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);
+            formData.append('file', blobInfo.blob(), url);
+            upload(formData).then(() => {
+              success(url);
+              progress(100);
+            })
+          }).catch(err => {
+            failure('出现未知问题，刷新页面，或者联系程序员')
+            console.log(err);
+          }); */
+        },
+      });
+      if (initialization && initialization.catch) initialization.catch(error => {
+        if (generation === this.initGeneration) this.resourceFailed(error);
+      });
+    },
+    destroyTinymce() {
+      this.initGeneration++;
+      this.initializing = false;
+      this.hasInit = false;
+      this.hasChange = false;
+      if (window.tinymce && window.tinymce.get) {
+        const tinymce = window.tinymce.get(this.tinymceId);
+        if (tinymce && this.fullscreen) {
+          tinymce.execCommand("mceFullScreen");
+        }
+
+        if (tinymce) {
+          tinymce.remove();
+        }
+      }
+    },
+    setContent(value) {
+      const editor = window.tinymce && window.tinymce.get(this.tinymceId);
+      if (editor) editor.setContent(value);
+    },
+    getContent() {
+      const editor = window.tinymce && window.tinymce.get(this.tinymceId);
+      return editor ? editor.getContent() : "";
+    },
+    imageSuccessCBK(arr) {
+      arr.forEach((v) =>
+        window.tinymce
+          .get(this.tinymceId)
+          .insertContent(`<img class="wscnph" src="${v.url}" >`)
+      );
+    },
+    fileConfirm(arr) {
+      let txt = "";
+      arr.forEach((v) => {
+        let realUrl = v.domain + v.url;
+        txt = txt + '<img class="wscnph" src="' + realUrl + '" >';
+      });
+      window.tinymce.get(this.tinymceId).insertContent(`<p>${txt}</p>`);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./mce-chrome.scss";
+</style>
+<style lang="scss" scoped>
+.tinymce-container {
+  position: relative;
+  line-height: normal;
+
+  &.readonly {
+    ::v-deep .mce-top-part {
+      display: none !important;
+    }
+  }
+}
+
+.tinymce-container {
+  ::v-deep {
+    .mce-fullscreen {
+      z-index: 10000;
+    }
+  }
+}
+
+.tinymce-textarea {
+  visibility: hidden;
+  z-index: -1;
+}
+
+.editor-custom-btn-container {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  /*z-index: 2005;*/
+}
+
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
+
+.editor-upload-btn {
+  display: inline-block;
+}
+</style>