前端更新

src/components/Tinymce/components/EditorImage.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="upload-container">
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
+      上传图片
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible" :modal="false">
+      <el-upload
+        :multiple="true"
+        :file-list="fileList"
+        :show-file-list="true"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+        :before-upload="beforeUpload"
+        class="editor-slide-upload"
+        action="https://httpbin.org/post"
+        list-type="picture-card"
+      >
+        <el-button size="small" type="primary">
+          点击上传
+        </el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false">
+        取消
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        确认
+      </el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+import { Message } from 'element-ui'
+
+export default {
+  name: 'EditorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#1890ff'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: []
+    }
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      if (!this.checkAllSuccess()) {
+        this.$message('请等待所有图片上传成功。如有网络问题，请刷新页面重新上传!')
+        return
+      }
+      this.$emit('successCBK', arr)
+      this.listObj = {}
+      this.fileList = []
+      this.dialogVisible = false
+    },
+    handleSuccess(response, file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          this.listObj[objKeyArr[i]].url = response.files.file
+          this.listObj[objKeyArr[i]].hasSuccess = true
+          return
+        }
+      }
+    },
+    handleRemove(file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]]
+          return
+        }
+      }
+    },
+    beforeUpload(file) {
+      console.log(file)
+      if((file.size/1000) > 1024){
+        Message({
+          type:'warning',
+          message:'上传图片大小超过1M！'
+        })
+        return false
+      }
+      const _self = this
+      const _URL = window.URL || window.webkitURL
+      const fileName = file.uid
+      this.listObj[fileName] = {}
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        img.onload = function() {
+          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
+        }
+        resolve(true)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editor-slide-upload {
+  margin-bottom: 20px;
+  ::v-deep .el-upload--picture-card {
+    width: 100%;
+  }
+}
+</style>

src/components/Tinymce/dynamicLoadScript.js

@@ -0,0 +1,59 @@
+let callbacks = []
+
+function loadedTinymce() {
+  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
+  // check is successfully downloaded script
+  return window.tinymce
+}
+
+const dynamicLoadScript = (src, callback) => {
+  const existingScript = document.getElementById(src)
+  const cb = callback || function() {}
+
+  if (!existingScript) {
+    const script = document.createElement('script')
+    script.src = src // src url for the third-party library being loaded.
+    script.id = src
+    document.body.appendChild(script)
+    callbacks.push(cb)
+    const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
+    onEnd(script)
+  }
+
+  if (existingScript && cb) {
+    if (loadedTinymce()) {
+      cb(null, existingScript)
+    } else {
+      callbacks.push(cb)
+    }
+  }
+
+  function stdOnEnd(script) {
+    script.onload = function() {
+      // this.onload = null here is necessary
+      // because even IE9 works not like others
+      this.onerror = this.onload = null
+      for (const cb of callbacks) {
+        cb(null, script)
+      }
+      callbacks = null
+    }
+    script.onerror = function() {
+      this.onerror = this.onload = null
+      cb(new Error('Failed to load ' + src), script)
+    }
+  }
+
+  function ieOnEnd(script) {
+    script.onreadystatechange = function() {
+      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
+      this.onreadystatechange = null
+      for (const cb of callbacks) {
+        cb(null, script) // there is no way to catch loading errors in IE8
+      }
+      callbacks = null
+    }
+  }
+}
+
+export default dynamicLoadScript

src/components/Tinymce/index.vue

@@ -0,0 +1,727 @@
+<template>
+  <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
+    <textarea :id="tinymceId" class="tinymce-textarea" />
+    <div class="editor-custom-btn-container">
+      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * docs:
+ * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
+ */
+import editorImage from './components/EditorImage'
+import plugins from './plugins'
+import toolbar from './toolbar'
+import load from './dynamicLoadScript'
+
+// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
+const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
+const skinCdDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/skins/lightgray/skin.min.css'
+const contentCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/skins/lightgray/content.min.css'
+const prismCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/plugins/codesample/css/prism.css'
+
+let skin = document.createElement('link');
+skin.setAttribute('rel', 'stylesheet');
+skin.setAttribute('href', skinCdDN);
+document.body.appendChild(skin);
+let content = document.createElement('link')
+content.setAttribute('rel', 'stylesheet');
+content.setAttribute('href', contentCDN);
+document.body.appendChild(content);
+let prism = document.createElement('link')
+prism.setAttribute('rel', 'stylesheet');
+prism.setAttribute('href', prismCDN);
+document.body.appendChild(prism);
+export default {
+  name: 'Tinymce',
+  components: { editorImage },
+  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'
+    }
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      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.initTinymce()
+    }
+  },
+  deactivated() {
+    this.destroyTinymce()
+  },
+  destroyed() {
+    this.destroyTinymce()
+  },
+  methods: {
+    init() {
+      // dynamic load tinymce from cdn
+      load(tinymceCDN, (err) => {
+        if (err) {
+          this.$message.error(err.message)
+          return
+        }
+        this.initTinymce()
+      })
+
+    },
+    initTinymce() {
+      const _this = this
+      window.tinymce.init({
+        selector: `#${this.tinymceId}`,
+        language: this.languageTypeList['zh'],
+        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,
+        fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 28px 36px",
+        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
+        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);
+        //   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);
+        //   });
+        // },
+      })
+      window.tinymce.addI18n('zh_CN',{
+        "Redo": "\u91cd\u505a",
+        "Undo": "\u64a4\u9500",
+        "Cut": "\u526a\u5207",
+        "Copy": "\u590d\u5236",
+        "Paste": "\u7c98\u8d34",
+        "Select all": "\u5168\u9009",
+        "New document": "\u65b0\u6587\u4ef6",
+        "Ok": "\u786e\u5b9a",
+        "Cancel": "\u53d6\u6d88",
+        "Visual aids": "\u7f51\u683c\u7ebf",
+        "Bold": "\u7c97\u4f53",
+        "Italic": "\u659c\u4f53",
+        "Underline": "\u4e0b\u5212\u7ebf",
+        "Strikethrough": "\u5220\u9664\u7ebf",
+        "Superscript": "\u4e0a\u6807",
+        "Subscript": "\u4e0b\u6807",
+        "Clear formatting": "\u6e05\u9664\u683c\u5f0f",
+        "Align left": "\u5de6\u8fb9\u5bf9\u9f50",
+        "Align center": "\u4e2d\u95f4\u5bf9\u9f50",
+        "Align right": "\u53f3\u8fb9\u5bf9\u9f50",
+        "Justify": "\u4e24\u7aef\u5bf9\u9f50",
+        "Bullet list": "\u9879\u76ee\u7b26\u53f7",
+        "Numbered list": "\u7f16\u53f7\u5217\u8868",
+        "Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
+        "Increase indent": "\u589e\u52a0\u7f29\u8fdb",
+        "Close": "\u5173\u95ed",
+        "Formats": "\u683c\u5f0f",
+        "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
+        "Headers": "\u6807\u9898",
+        "Header 1": "\u6807\u98981",
+        "Header 2": "\u6807\u98982",
+        "Header 3": "\u6807\u98983",
+        "Header 4": "\u6807\u98984",
+        "Header 5": "\u6807\u98985",
+        "Header 6": "\u6807\u98986",
+        "Headings": "\u6807\u9898",
+        "Heading 1": "\u6807\u98981",
+        "Heading 2": "\u6807\u98982",
+        "Heading 3": "\u6807\u98983",
+        "Heading 4": "\u6807\u98984",
+        "Heading 5": "\u6807\u98985",
+        "Heading 6": "\u6807\u98986",
+        "Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
+        "Div": "Div",
+        "Pre": "Pre",
+        "Code": "\u4ee3\u7801",
+        "Paragraph": "\u6bb5\u843d",
+        "Blockquote": "\u5f15\u6587\u533a\u5757",
+        "Inline": "\u6587\u672c",
+        "Blocks": "\u57fa\u5757",
+        "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
+        "Fonts": "\u5b57\u4f53",
+        "Font Sizes": "\u5b57\u53f7",
+        "Class": "\u7c7b\u578b",
+        "Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
+        "OR": "\u6216",
+        "Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
+        "Upload": "\u4e0a\u4f20",
+        "Block": "\u5757",
+        "Align": "\u5bf9\u9f50",
+        "Default": "\u9ed8\u8ba4",
+        "Circle": "\u7a7a\u5fc3\u5706",
+        "Disc": "\u5b9e\u5fc3\u5706",
+        "Square": "\u65b9\u5757",
+        "Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
+        "Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
+        "Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
+        "Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
+        "Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
+        "Anchor...": "\u951a\u70b9...",
+        "Name": "\u540d\u79f0",
+        "Id": "\u6807\u8bc6\u7b26",
+        "Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
+        "You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
+        "Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
+        "Special character...": "\u7279\u6b8a\u5b57\u7b26...",
+        "Source code": "\u6e90\u4ee3\u7801",
+        "Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
+        "Language": "\u8bed\u8a00",
+        "Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
+        "Color Picker": "\u9009\u8272\u5668",
+        "R": "R",
+        "G": "G",
+        "B": "B",
+        "Left to right": "\u4ece\u5de6\u5230\u53f3",
+        "Right to left": "\u4ece\u53f3\u5230\u5de6",
+        "Emoticons": "\u8868\u60c5",
+        "Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
+        "Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
+        "Title": "\u6807\u9898",
+        "Keywords": "\u5173\u952e\u8bcd",
+        "Description": "\u63cf\u8ff0",
+        "Robots": "\u673a\u5668\u4eba",
+        "Author": "\u4f5c\u8005",
+        "Encoding": "\u7f16\u7801",
+        "Fullscreen": "\u5168\u5c4f",
+        "Action": "\u64cd\u4f5c",
+        "Shortcut": "\u5feb\u6377\u952e",
+        "Help": "\u5e2e\u52a9",
+        "Address": "\u5730\u5740",
+        "Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
+        "Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
+        "Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
+        "Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
+        "Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+        "Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+        "Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+        "Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
+        "Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
+        "Learn more...": "\u4e86\u89e3\u66f4\u591a...",
+        "You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
+        "Plugins": "\u63d2\u4ef6",
+        "Handy Shortcuts": "\u5feb\u6377\u952e",
+        "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
+        "Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
+        "Alternative description": "\u66ff\u4ee3\u63cf\u8ff0",
+        "Accessibility": "\u8f85\u52a9\u529f\u80fd",
+        "Image is decorative": "\u56fe\u50cf\u662f\u88c5\u9970\u6027\u7684",
+        "Source": "\u5730\u5740",
+        "Dimensions": "\u5927\u5c0f",
+        "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
+        "General": "\u666e\u901a",
+        "Advanced": "\u9ad8\u7ea7",
+        "Style": "\u6837\u5f0f",
+        "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
+        "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
+        "Border": "\u8fb9\u6846",
+        "Insert image": "\u63d2\u5165\u56fe\u7247",
+        "Image...": "\u56fe\u7247...",
+        "Image list": "\u56fe\u7247\u5217\u8868",
+        "Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
+        "Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
+        "Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
+        "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
+        "Edit image": "\u7f16\u8f91\u56fe\u7247",
+        "Image options": "\u56fe\u7247\u9009\u9879",
+        "Zoom in": "\u653e\u5927",
+        "Zoom out": "\u7f29\u5c0f",
+        "Crop": "\u88c1\u526a",
+        "Resize": "\u8c03\u6574\u5927\u5c0f",
+        "Orientation": "\u65b9\u5411",
+        "Brightness": "\u4eae\u5ea6",
+        "Sharpen": "\u9510\u5316",
+        "Contrast": "\u5bf9\u6bd4\u5ea6",
+        "Color levels": "\u989c\u8272\u5c42\u6b21",
+        "Gamma": "\u4f3d\u9a6c\u503c",
+        "Invert": "\u53cd\u8f6c",
+        "Apply": "\u5e94\u7528",
+        "Back": "\u540e\u9000",
+        "Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
+        "Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
+        "Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+        "Text to display": "\u663e\u793a\u6587\u5b57",
+        "Url": "\u5730\u5740",
+        "Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
+        "Current window": "\u5f53\u524d\u7a97\u53e3",
+        "None": "\u65e0",
+        "New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
+        "Open link": "\u6253\u5f00\u94fe\u63a5",
+        "Remove link": "\u5220\u9664\u94fe\u63a5",
+        "Anchors": "\u951a\u70b9",
+        "Link...": "\u94fe\u63a5...",
+        "Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
+        "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
+        "The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
+        "The URL you entered seems to be an external link. Do you want to add the required https:\/\/ prefix?": "\u60a8\u8f93\u5165\u7684 URL \u4f3c\u4e4e\u662f\u4e00\u4e2a\u5916\u90e8\u94fe\u63a5\u3002\u60a8\u60f3\u6dfb\u52a0\u6240\u9700\u7684 https:\/\/ \u524d\u7f00\u5417\uff1f",
+        "Link list": "\u94fe\u63a5\u5217\u8868",
+        "Insert video": "\u63d2\u5165\u89c6\u9891",
+        "Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
+        "Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
+        "Alternative source": "\u955c\u50cf",
+        "Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
+        "Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
+        "Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
+        "Embed": "\u5185\u5d4c",
+        "Media...": "\u591a\u5a92\u4f53...",
+        "Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
+        "Page break": "\u5206\u9875\u7b26",
+        "Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
+        "Preview": "\u9884\u89c8",
+        "Print...": "\u6253\u5370...",
+        "Save": "\u4fdd\u5b58",
+        "Find": "\u67e5\u627e",
+        "Replace with": "\u66ff\u6362\u4e3a",
+        "Replace": "\u66ff\u6362",
+        "Replace all": "\u5168\u90e8\u66ff\u6362",
+        "Previous": "\u4e0a\u4e00\u4e2a",
+        "Next": "\u4e0b\u4e00\u4e2a",
+        "Find and Replace": "\u67e5\u627e\u548c\u66ff\u6362",
+        "Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
+        "Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
+        "Match case": "\u533a\u5206\u5927\u5c0f\u5199",
+        "Find whole words only": "\u5168\u5b57\u5339\u914d",
+        "Find in selection": "\u5728\u9009\u533a\u4e2d\u67e5\u627e",
+        "Spellcheck": "\u62fc\u5199\u68c0\u67e5",
+        "Spellcheck Language": "\u62fc\u5199\u68c0\u67e5\u8bed\u8a00",
+        "No misspellings found.": "\u6ca1\u6709\u53d1\u73b0\u62fc\u5199\u9519\u8bef",
+        "Ignore": "\u5ffd\u7565",
+        "Ignore all": "\u5168\u90e8\u5ffd\u7565",
+        "Finish": "\u5b8c\u6210",
+        "Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
+        "Insert table": "\u63d2\u5165\u8868\u683c",
+        "Table properties": "\u8868\u683c\u5c5e\u6027",
+        "Delete table": "\u5220\u9664\u8868\u683c",
+        "Cell": "\u5355\u5143\u683c",
+        "Row": "\u884c",
+        "Column": "\u5217",
+        "Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
+        "Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
+        "Split cell": "\u62c6\u5206\u5355\u5143\u683c",
+        "Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
+        "Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
+        "Delete row": "\u5220\u9664\u884c",
+        "Row properties": "\u884c\u5c5e\u6027",
+        "Cut row": "\u526a\u5207\u884c",
+        "Copy row": "\u590d\u5236\u884c",
+        "Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
+        "Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
+        "Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
+        "Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
+        "Delete column": "\u5220\u9664\u5217",
+        "Cols": "\u5217",
+        "Rows": "\u884c",
+        "Width": "\u5bbd",
+        "Height": "\u9ad8",
+        "Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
+        "Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
+        "Caption": "\u6807\u9898",
+        "Show caption": "\u663e\u793a\u6807\u9898",
+        "Left": "\u5de6\u5bf9\u9f50",
+        "Center": "\u5c45\u4e2d",
+        "Right": "\u53f3\u5bf9\u9f50",
+        "Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
+        "Scope": "\u8303\u56f4",
+        "Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
+        "H Align": "\u6c34\u5e73\u5bf9\u9f50",
+        "V Align": "\u5782\u76f4\u5bf9\u9f50",
+        "Top": "\u9876\u90e8\u5bf9\u9f50",
+        "Middle": "\u5782\u76f4\u5c45\u4e2d",
+        "Bottom": "\u5e95\u90e8\u5bf9\u9f50",
+        "Header cell": "\u8868\u5934\u5355\u5143\u683c",
+        "Row group": "\u884c\u7ec4",
+        "Column group": "\u5217\u7ec4",
+        "Row type": "\u884c\u7c7b\u578b",
+        "Header": "\u8868\u5934",
+        "Body": "\u8868\u4f53",
+        "Footer": "\u8868\u5c3e",
+        "Border color": "\u8fb9\u6846\u989c\u8272",
+        "Insert template...": "\u63d2\u5165\u6a21\u677f...",
+        "Templates": "\u6a21\u677f",
+        "Template": "\u6a21\u677f",
+        "Text color": "\u6587\u5b57\u989c\u8272",
+        "Background color": "\u80cc\u666f\u8272",
+        "Custom...": "\u81ea\u5b9a\u4e49...",
+        "Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
+        "No color": "\u65e0",
+        "Remove color": "\u79fb\u9664\u989c\u8272",
+        "Table of Contents": "\u5185\u5bb9\u5217\u8868",
+        "Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
+        "Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
+        "Word count": "\u5b57\u6570",
+        "Count": "\u8ba1\u6570",
+        "Document": "\u6587\u6863",
+        "Selection": "\u9009\u62e9",
+        "Words": "\u5355\u8bcd",
+        "Words: {0}": "\u5b57\u6570\uff1a{0}",
+        "{0} words": "{0} \u5b57",
+        "File": "\u6587\u4ef6",
+        "Edit": "\u7f16\u8f91",
+        "Insert": "\u63d2\u5165",
+        "View": "\u89c6\u56fe",
+        "Format": "\u683c\u5f0f",
+        "Table": "\u8868\u683c",
+        "Tools": "\u5de5\u5177",
+        "Powered by {0}": "\u7531{0}\u9a71\u52a8",
+        "Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
+        "Image title": "\u56fe\u7247\u6807\u9898",
+        "Border width": "\u8fb9\u6846\u5bbd\u5ea6",
+        "Border style": "\u8fb9\u6846\u6837\u5f0f",
+        "Error": "\u9519\u8bef",
+        "Warn": "\u8b66\u544a",
+        "Valid": "\u6709\u6548",
+        "To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
+        "Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
+        "System Font": "\u7cfb\u7edf\u5b57\u4f53",
+        "Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
+        "Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
+        "Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
+        "Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
+        "example": "\u793a\u4f8b",
+        "Search": "\u641c\u7d22",
+        "All": "\u5168\u90e8",
+        "Currency": "\u8d27\u5e01",
+        "Text": "\u6587\u5b57",
+        "Quotations": "\u5f15\u7528",
+        "Mathematical": "\u6570\u5b66",
+        "Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
+        "Symbols": "\u7b26\u53f7",
+        "Arrows": "\u7bad\u5934",
+        "User Defined": "\u81ea\u5b9a\u4e49",
+        "dollar sign": "\u7f8e\u5143\u7b26\u53f7",
+        "currency sign": "\u8d27\u5e01\u7b26\u53f7",
+        "euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
+        "colon sign": "\u5192\u53f7",
+        "cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
+        "french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
+        "lira sign": "\u91cc\u62c9\u7b26\u53f7",
+        "mill sign": "\u5bc6\u5c14\u7b26\u53f7",
+        "naira sign": "\u5948\u62c9\u7b26\u53f7",
+        "peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
+        "rupee sign": "\u5362\u6bd4\u7b26\u53f7",
+        "won sign": "\u97e9\u5143\u7b26\u53f7",
+        "new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
+        "dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
+        "kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
+        "tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
+        "drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
+        "german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
+        "peso sign": "\u6bd4\u7d22\u7b26\u53f7",
+        "guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
+        "austral sign": "\u6fb3\u5143\u7b26\u53f7",
+        "hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
+        "cedi sign": "\u585e\u5730\u7b26\u53f7",
+        "livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
+        "spesmilo sign": "spesmilo\u7b26\u53f7",
+        "tenge sign": "\u575a\u6208\u7b26\u53f7",
+        "indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
+        "turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
+        "nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
+        "manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
+        "ruble sign": "\u5362\u5e03\u7b26\u53f7",
+        "yen character": "\u65e5\u5143\u5b57\u6837",
+        "yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
+        "yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
+        "yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
+        "Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
+        "Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
+        "People": "\u4eba\u7c7b",
+        "Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
+        "Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
+        "Activity": "\u6d3b\u52a8",
+        "Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
+        "Objects": "\u7269\u4ef6",
+        "Flags": "\u65d7\u5e1c",
+        "Characters": "\u5b57\u7b26",
+        "Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
+        "{0} characters": "{0} \u4e2a\u5b57\u7b26",
+        "Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
+        "Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
+        "Update": "\u66f4\u65b0",
+        "Color swatch": "\u989c\u8272\u6837\u672c",
+        "Turquoise": "\u9752\u7eff\u8272",
+        "Green": "\u7eff\u8272",
+        "Blue": "\u84dd\u8272",
+        "Purple": "\u7d2b\u8272",
+        "Navy Blue": "\u6d77\u519b\u84dd",
+        "Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
+        "Dark Green": "\u6df1\u7eff\u8272",
+        "Medium Blue": "\u4e2d\u84dd\u8272",
+        "Medium Purple": "\u4e2d\u7d2b\u8272",
+        "Midnight Blue": "\u6df1\u84dd\u8272",
+        "Yellow": "\u9ec4\u8272",
+        "Orange": "\u6a59\u8272",
+        "Red": "\u7ea2\u8272",
+        "Light Gray": "\u6d45\u7070\u8272",
+        "Gray": "\u7070\u8272",
+        "Dark Yellow": "\u6697\u9ec4\u8272",
+        "Dark Orange": "\u6df1\u6a59\u8272",
+        "Dark Red": "\u6df1\u7ea2\u8272",
+        "Medium Gray": "\u4e2d\u7070\u8272",
+        "Dark Gray": "\u6df1\u7070\u8272",
+        "Light Green": "\u6d45\u7eff\u8272",
+        "Light Yellow": "\u6d45\u9ec4\u8272",
+        "Light Red": "\u6d45\u7ea2\u8272",
+        "Light Purple": "\u6d45\u7d2b\u8272",
+        "Light Blue": "\u6d45\u84dd\u8272",
+        "Dark Purple": "\u6df1\u7d2b\u8272",
+        "Dark Blue": "\u6df1\u84dd\u8272",
+        "Black": "\u9ed1\u8272",
+        "White": "\u767d\u8272",
+        "Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
+        "Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
+        "history": "\u5386\u53f2",
+        "styles": "\u6837\u5f0f",
+        "formatting": "\u683c\u5f0f\u5316",
+        "alignment": "\u5bf9\u9f50",
+        "indentation": "\u7f29\u8fdb",
+        "Font": "\u5b57\u4f53",
+        "Size": "\u5b57\u53f7",
+        "More...": "\u66f4\u591a...",
+        "Select...": "\u9009\u62e9...",
+        "Preferences": "\u9996\u9009\u9879",
+        "Yes": "\u662f",
+        "No": "\u5426",
+        "Keyboard Navigation": "\u952e\u76d8\u6307\u5f15",
+        "Version": "\u7248\u672c",
+        "Code view": "\u4ee3\u7801\u89c6\u56fe",
+        "Open popup menu for split buttons": "\u6253\u5f00\u5f39\u51fa\u5f0f\u83dc\u5355\uff0c\u7528\u4e8e\u62c6\u5206\u6309\u94ae",
+        "List Properties": "\u5217\u8868\u5c5e\u6027",
+        "List properties...": "\u6807\u9898\u5b57\u4f53\u5c5e\u6027",
+        "Start list at number": "\u4ee5\u6570\u5b57\u5f00\u59cb\u5217\u8868",
+        "Line height": "\u884c\u9ad8",
+        "comments": "\u5907\u6ce8",
+        "Format Painter": "\u683c\u5f0f\u5237",
+        "Insert\/edit iframe": "\u63d2\u5165\/\u7f16\u8f91\u6846\u67b6",
+        "Capitalization": "\u5927\u5199",
+        "lowercase": "\u5c0f\u5199",
+        "UPPERCASE": "\u5927\u5199",
+        "Title Case": "\u9996\u5b57\u6bcd\u5927\u5199",
+        "permanent pen": "\u8bb0\u53f7\u7b14",
+        "Permanent Pen Properties": "\u6c38\u4e45\u7b14\u5c5e\u6027",
+        "Permanent pen properties...": "\u6c38\u4e45\u7b14\u5c5e\u6027...",
+        "case change": "\u6848\u4f8b\u66f4\u6539",
+        "page embed": "\u9875\u9762\u5d4c\u5165",
+        "Advanced sort...": "\u9ad8\u7ea7\u6392\u5e8f...",
+        "Advanced Sort": "\u9ad8\u7ea7\u6392\u5e8f",
+        "Sort table by column ascending": "\u6309\u5217\u5347\u5e8f\u8868",
+        "Sort table by column descending": "\u6309\u5217\u964d\u5e8f\u8868",
+        "Sort": "\u6392\u5e8f",
+        "Order": "\u6392\u5e8f",
+        "Sort by": "\u6392\u5e8f\u65b9\u5f0f",
+        "Ascending": "\u5347\u5e8f",
+        "Descending": "\u964d\u5e8f",
+        "Column {0}": "\u5217{0}",
+        "Row {0}": "\u884c{0}",
+        "Spellcheck...": "\u62fc\u5199\u68c0\u67e5...",
+        "Misspelled word": "\u62fc\u5199\u9519\u8bef\u7684\u5355\u8bcd",
+        "Suggestions": "\u5efa\u8bae",
+        "Change": "\u66f4\u6539",
+        "Finding word suggestions": "\u67e5\u627e\u5355\u8bcd\u5efa\u8bae",
+        "Success": "\u6210\u529f",
+        "Repair": "\u4fee\u590d",
+        "Issue {0} of {1}": "\u5171\u8ba1{1}\u95ee\u9898{0}",
+        "Images must be marked as decorative or have an alternative text description": "\u56fe\u50cf\u5fc5\u987b\u6807\u8bb0\u4e3a\u88c5\u9970\u6027\u6216\u5177\u6709\u66ff\u4ee3\u6587\u672c\u63cf\u8ff0",
+        "Images must have an alternative text description. Decorative images are not allowed.": "\u56fe\u50cf\u5fc5\u987b\u5177\u6709\u66ff\u4ee3\u6587\u672c\u63cf\u8ff0\u3002\u4e0d\u5141\u8bb8\u4f7f\u7528\u88c5\u9970\u56fe\u50cf\u3002",
+        "Or provide alternative text:": "\u6216\u63d0\u4f9b\u5907\u9009\u6587\u672c\uff1a",
+        "Make image decorative:": "\u4f7f\u56fe\u50cf\u88c5\u9970\uff1a",
+        "ID attribute must be unique": "ID \u5c5e\u6027\u5fc5\u987b\u662f\u552f\u4e00\u7684",
+        "Make ID unique": "\u4f7f ID \u72ec\u4e00\u65e0\u4e8c",
+        "Keep this ID and remove all others": "\u4fdd\u7559\u6b64 ID \u5e76\u5220\u9664\u6240\u6709\u5176\u4ed6",
+        "Remove this ID": "\u5220\u9664\u6b64 ID",
+        "Remove all IDs": "\u6e05\u9664\u5168\u90e8IDs",
+        "Checklist": "\u6e05\u5355",
+        "Anchor": "\u951a\u70b9",
+        "Special character": "\u7279\u6b8a\u7b26\u53f7",
+        "Code sample": "\u4ee3\u7801\u793a\u4f8b",
+        "Color": "\u989c\u8272",
+        "Document properties": "\u6587\u6863\u5c5e\u6027",
+        "Image description": "\u56fe\u7247\u63cf\u8ff0",
+        "Image": "\u56fe\u7247",
+        "Insert link": "\u63d2\u5165\u94fe\u63a5",
+        "Target": "\u6253\u5f00\u65b9\u5f0f",
+        "Link": "\u94fe\u63a5",
+        "Poster": "\u5c01\u9762",
+        "Media": "\u5a92\u4f53",
+        "Print": "\u6253\u5370",
+        "Prev": "\u4e0a\u4e00\u4e2a",
+        "Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
+        "Whole words": "\u5168\u5b57\u5339\u914d",
+        "Insert template": "\u63d2\u5165\u6a21\u677f"
+      });
+
+    },
+    destroyTinymce() {
+      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}" >`))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tinymce-container {
+  position: relative;
+  line-height: normal;
+}
+
+.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>

src/components/Tinymce/plugins.js

@@ -0,0 +1,7 @@
+// Any plugins you want to use has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+
+const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+
+export default plugins

src/components/Tinymce/toolbar.js

@@ -0,0 +1,6 @@
+// Here is a list of the toolbar
+// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen fontsizeselect fontselect']
+
+export default toolbar

src/layout/components/Sidebar/Logo.vue

@@ -1,20 +1,30 @@
 <template>
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-
-          <img src="../../../assets/logo-mini.png?v=1" class="sidebar-logo">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+
+
+        <img :src="min_logo" class="sidebar-logo" />
       </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img src="../../../assets/logo.png?v=2" class="sidebar-name-logo" />
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img :src="logo" class="sidebar-name-logo" />
+
       </router-link>
     </transition>
   </div>
 </template>
 
 <script>
+  import {
+    mapState,
+    mapGetters
+  } from "vuex"; //从 vuex 中按需导入 mapState 函数
   export default {
     name: 'SidebarLogo',
+    computed: {
+      // 映射 state 中的数据为计算属性
+      ...mapGetters(["name", "sys_info"]),
+    },
     props: {
       collapse: {
         type: Boolean,
@@ -24,8 +34,19 @@
     data() {
       return {
         title: '',
-        logo: false
+        logo: false,
+        logo: require("../../../assets/logo.png?v=2"),
+        min_logo: require("../../../assets/logo-mini.png?v=1")
       }
+    },
+    created() {
+      let sysInfo = sessionStorage.getItem('sys_info')
+      if (sysInfo && sysInfo != "") {
+        let _sys = JSON.parse(sysInfo);
+        this.logo = _sys.logo.url == "" ? require("../../../assets/logo.png?v=2") : _sys.logo.url;
+        this.min_logo = _sys.small_logo.url == "" ? require("../../../assets/logo-mini.png?v=1") : _sys.small_logo.url;
+      }
+      console.log(sysInfo)
     }
   }
 </script>
@@ -34,6 +55,7 @@
   .sidebarLogoFade-enter-active {
     transition: opacity 1.5s;
   }
+
   .sidebar-name-logo {
     width: 160px;
     height: 36px;

src/views/activity/components/addActivity.vue

@@ -27,6 +27,21 @@
       </template>
 
 
+
+      <template v-slot:type>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">活动的类型
+          </div>
+          <div class="xy-table-item-content">
+            <el-radio-group v-model="detail.type">
+              <el-radio-button label="1">公众号</el-radio-button>
+              <el-radio-button label="2">小程序</el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+      </template>
+
+
       <template v-slot:datetimerange>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
@@ -74,6 +89,51 @@
       </template>
 
 
+      <template v-slot:small_logo_id>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">小的LOGO
+          </div>
+          <div class="xy-table-item-content">
+
+            <div v-if="detail.small_logo" style="position: relative;">
+              <img :src="detail.small_logo" class="avatar">
+              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
+                @click="detail.small_logo = '',detail.small_logo_id=''"></Button>
+            </div>
+            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
+              :action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
+              :before-upload="uploadBefore">
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            尺寸要求：80*80
+          </div>
+
+        </div>
+      </template>
+
+
+      <template v-slot:logo_id>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">LOGO
+          </div>
+          <div class="xy-table-item-content">
+
+            <div v-if="detail.logo" style="position: relative;">
+              <img :src="detail.logo" class="avatar">
+              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
+                @click="detail.logo = '',detail.logo_id=''"></Button>
+            </div>
+            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
+              :action="action" :show-file-list="true" :on-error="uploadFailLogo" :on-success="uploadSuccessLogo"
+              :before-upload="uploadBeforeLogo">
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            尺寸要求：320*72
+          </div>
+
+        </div>
+      </template>
+
 
 
       <template v-slot:key>
@@ -95,20 +155,32 @@
             <el-input clearable placeholder="请填写活动的域名" v-model="detail.domain" style="width: 300px;" />
           </div>
         </div>
-      </template>
-      
-      
-      <template v-slot:sys_name>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">系统的名称
-          </div>
-          <div class="xy-table-item-content">
-            <el-input clearable placeholder="请填写系统的名称" v-model="detail.sys_name" style="width: 300px;" />
-          </div>
-        </div>
-      </template>
-      
-      
+      </template>
+
+
+      <template v-slot:sys_name>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">系统的名称
+          </div>
+          <div class="xy-table-item-content">
+            <el-input clearable placeholder="请填写系统的名称" v-model="detail.sys_name" style="width: 300px;" />
+          </div>
+        </div>
+      </template>
+
+
+
+      <template v-slot:admin_id>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">管理人员
+          </div>
+          <div class="xy-table-item-content">
+            <el-autocomplete class="inline-input" v-model="detail.admin_name" :fetch-suggestions="querySearch"
+              placeholder="请输入管理人员" :trigger-on-focus="false" @select="handleSelectUser"></el-autocomplete>
+          </div>
+        </div>
+      </template>
+
       <template v-slot:status>
         <div class="xy-table-item">
           <div class="xy-table-item-label">状态
@@ -132,6 +204,9 @@
     save,
     show
   } from "@/api/activity/index";
+  import {
+    listuser
+  } from "@/api/system/user.js";
 
   export default {
     data() {
@@ -167,9 +242,11 @@
             }
           }]
         },
+        action: `${process.env.VUE_APP_BASE_API}/api/admin/upload-file`,
         detail: {
           name: "",
           tag: "",
+          type: "1",
           datetimerange: [],
           start_time: "",
           end_time: "",
@@ -183,8 +260,11 @@
           domain: "",
           sys_name: "",
           admin_id: "",
+          admin_name: "",
           logo_id: "",
-          small_logo_id: ""
+          logo: "",
+          small_logo_id: "",
+          small_logo: ""
         },
         rules: {
           name: [{
@@ -226,11 +306,64 @@
       }
     },
     methods: {
+
+      //上传
+      uploadFailLogo(err) {
+        console.log(err)
+      },
+      uploadSuccessLogo(response) {
+        this.detail.logo = response.url
+        this.detail.logo_id = response.id
+      },
+      uploadBeforeLogo(file) {
+        if ((file.size / 1000) > 2024) {
+          Message({
+            type: 'warning',
+            message: '上传图片大小超过2M！'
+          })
+          return false
+        }
+      },
+      //上传
+      uploadFail(err) {
+        console.log(err)
+      },
+      uploadSuccess(response) {
+        this.detail.small_logo = response.url
+        this.detail.small_logo_id = response.id
+      },
+      uploadBefore(file) {
+        if ((file.size / 1000) > 2024) {
+          Message({
+            type: 'warning',
+            message: '上传图片大小超过2M！'
+          })
+          return false
+        }
+      },
+      querySearch(queryString, cb) {
+        listuser().then(response => {
+          var data = response.data;
+          for (var m of data) {
+            m.value = m.name;
+          }
+          cb(data)
+        }).catch(error => {
+          //reject(error)
+        })
+      },
+      handleSelectUser(item) {
+        this.detail.admin_id = item.id;
+        this.detail.admin_name = item.value;
+
+      },
       async getDetail() {
         let res = await show({
           id: this.id
         })
-        Object.assign(this.detail, res);
+        Object.assign(this.detail, res);
+        this.detail.logo=res.logo?res.logo.url:"";
+        this.detail.small_logo=res.small_logo?res.small_logo.url:"";
         this.detail.datetimerange.push(this.$moment(res.start_time).format("YYYY-MM-DD HH:mm:ss"));
         this.detail.datetimerange.push(this.$moment(res.end_time).format("YYYY-MM-DD HH:mm:ss"));
       },

src/views/login/index.vue

@@ -98,7 +98,8 @@
       this.title = defaultSettings.title;
       console.log(domain)
       this.$store.dispatch('sys/getSysInfo', domain).then((res) => {
-        console.log(res)
+        console.log(res)
+        sessionStorage.setItem('sys_info', JSON.stringify(res))
         this.title = res.sys_name;
       }).catch(() => {
 

src/views/party/components/addBranch.vue

@@ -10,8 +10,8 @@
             上级名称
           </div>
           <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择党支部" v-model="detail.pid" style="width: 300px;">
-              <el-option  value="" label="根目录">
+            <el-select clearable placeholder="请选择党支部" v-model="detail.pid" style="width: 300px;">
+              <el-option value="" label="根目录">
               </el-option>
               <el-option v-for="(item,index) of listParty" :key="item.id" :value="item.id" :label="item.name">
               </el-option>
@@ -98,19 +98,19 @@
           pid: "",
           name: "",
           type: "",
-          myindex: 1,
-          id:""
+          myindex: 1,
+          id: ""
         },
         rules: {
           name: [{
             required: true,
-            message: "支部名称必填",
-            tigger:"blur"
+            message: "支部名称必填",
+            tigger: "blur"
           }],
           type: [{
             required: true,
-            message: "选择类型",
-            tigger:"change"
+            message: "选择类型",
+            tigger: "change"
           }],
           activity_list_id: [{
             required: true,
@@ -128,15 +128,15 @@
           }
         } else {
           this.id = ''
-          this.form.id = ''
+          this.detail.id = ''
           this.type = ''
           this.$refs['addActivity'].reset()
         }
       }
     },
-    methods: {
-      changeActivity(e){
-        this.load(e);
+    methods: {
+      changeActivity(e) {
+        this.load(e);
       },
       load(e) {
         index({
@@ -151,7 +151,15 @@
         let res = await show({
           id: this.id
         })
-        Object.assign(this.detail, res);
+
+        this.detail.activity_list_id = res.activity_list_id;
+        this.load(res.activity_list_id);
+        this.detail.pid = res.pid;
+        this.detail.name = res.name;
+        this.detail.type = res.type;
+        this.detail.myindex = res.myindex;
+        this.detail.id = res.id;
+
       },
       editor() {
         save(this.detail).then(res => {

src/views/party/components/addStudyResource.vue

@@ -1,8 +1,323 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>
+<template>
+  <div>
+    <!--    编辑-->
+    <xy-dialog :is-show.sync="isShow" width="60%" title="学习资料编辑" type="form" :form="detail" :rules="rules"
+      @submit="editor" ref="addActivity">
+
+
+      <template v-slot:title>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>标题
+          </div>
+          <div class="xy-table-item-content">
+            <el-input clearable placeholder="请填写标题" v-model="detail.title" style="width: 300px;" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:text>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>内容:
+          </div>
+          <div class="xy-table-item-content">
+            <tinymce ref="tinymce" :height="200" v-model="detail.text" id='tinymce'></tinymce>
+          </div>
+        </div>
+      </template>
+
+
+      <template v-slot:source>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            来源
+          </div>
+          <div class="xy-table-item-content">
+            <el-input clearable placeholder="请填写来源" v-model="detail.source" style="width: 150px;" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:reader>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            作者
+          </div>
+          <div class="xy-table-item-content">
+            <el-input clearable placeholder="请填写作者" v-model="detail.reader" style="width: 150px;" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:duration>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            时长
+          </div>
+          <div class="xy-table-item-content">
+            <el-input clearable placeholder="请填写时长" v-model="detail.duration" style="width: 150px;" />
+          </div>
+        </div>
+      </template>
+
+
+
+      <template v-slot:poster>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">封面图
+          </div>
+          <div class="xy-table-item-content">
+
+            <div v-if="detail.poster" style="position: relative;">
+              <img :src="detail.poster" class="avatar">
+              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
+                @click="detail.poster = ''"></Button>
+            </div>
+            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
+              :action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
+              :before-upload="uploadBefore">
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            尺寸要求：80*80
+          </div>
+
+        </div>
+      </template>
+
+      <template v-slot:audio_file>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">音频文件
+          </div>
+          <div class="xy-table-item-content">
+
+            <el-upload :file-list="fileList" accept="picture" :limit="1" class="avatar-uploader" :action="action"
+              :show-file-list="true" :on-error="uploadFailAuto" :on-success="uploadSuccessAuto"
+              :before-upload="uploadBeforeAuto">
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </div>
+
+        </div>
+      </template>
+
+      <template v-slot:myindex>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">排序
+          </div>
+          <div class="xy-table-item-content">
+            <el-input clearable placeholder="请填写排序" v-model="detail.myindex" style="width: 150px;" />
+          </div>
+        </div>
+      </template>
+
+    </xy-dialog>
+
+  </div>
+</template>
+
+<script>
+  import {
+    save,
+    show,
+    index
+  } from "@/api/party/studyResource";
+
+  import tinymce from "@/components/Tinymce"
+  export default {
+    components: {
+      tinymce
+    },
+    props: {
+      listActivity: Array
+    },
+    data() {
+
+      return {
+        fileList: [],
+        action: `${process.env.VUE_APP_BASE_API}/api/admin/upload-file`,
+        listParty: [],
+        isShow: false,
+        id: "",
+        type: "add",
+        detail: {
+          activity_list_id: "",
+          title: "",
+          text: "",
+          myindex: 1,
+          duration: 0,
+          source: "",
+          reader: "",
+          poster: "",
+          audio_file: "",
+          id: ""
+        },
+        rules: {
+          title: [{
+            required: true,
+            message: "标题名称必填",
+            tigger: "blur"
+          }],
+          text: [{
+            required: true,
+            message: "填写内容",
+            tigger: "blur"
+          }],
+          activity_list_id: [{
+            required: true,
+            message: "选择类型"
+          }]
+        }
+
+      }
+    },
+    watch: {
+      isShow(newVal) {
+        if (newVal) {
+          if (this.type === 'editor') {
+            this.getDetail()
+          }
+        } else {
+          this.id = ''
+          this.detail.id = ''
+          this.type = ''
+          this.$refs['tinymce'].setContent(' ')
+          this.$refs['addActivity'].reset()
+        }
+      }
+    },
+    methods: {
+      //上传
+      uploadFailAuto(err) {
+        console.log(err)
+      },
+      uploadSuccessAuto(response) {
+        this.detail.audio_file = response.url
+      },
+      uploadBeforeAuto(file) {
+        if ((file.size / 1000) > 20240) {
+          Message({
+            type: 'warning',
+            message: '上传图片大小超过20M！'
+          })
+          return false
+        }
+      },
+      //上传
+      uploadFail(err) {
+        console.log(err)
+      },
+      uploadSuccess(response) {
+        this.detail.poster = response.url
+      },
+      uploadBefore(file) {
+        if ((file.size / 1000) > 2024) {
+          Message({
+            type: 'warning',
+            message: '上传图片大小超过2M！'
+          })
+          return false
+        }
+      },
+      changeActivity(e) {
+        this.load(e);
+      },
+      load(e) {
+        index({
+          page_size: 999,
+          activity_list_id: e,
+          page: 1
+        }).then(res => {
+          this.listParty = res.data;
+        })
+      },
+      async getDetail() {
+        let res = await show({
+          id: this.id
+        })
+        Object.assign(this.detail, res);
+
+        this.$refs['tinymce'].setContent(res.text ?? ' ')
+      },
+      editor() {
+        save(this.detail).then(res => {
+          this.isShow = false
+          this.$Message.success("操作成功");
+          this.$emit('refresh')
+        })
+      },
+
+    },
+    computed: {
+
+    },
+    mounted() {
+      let that = this;
+      let sysInfo = sessionStorage.getItem('sys_info')
+      console.log(sysInfo)
+      if (sysInfo && sysInfo != "") {
+        let _sys = JSON.parse(sysInfo);
+        that.detail.activity_list_id = _sys.id;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .contract-add-plan {
+    min-height: 30px;
+    border: 1px solid #dcdee2;
+    border-radius: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: center;
+
+    padding: 0 8px;
+
+    &-no-plan {
+      height: 30px;
+      line-height: 30px;
+      color: #CDD0D5;
+    }
+  }
+
+  .xy-table-item-label {
+    width: 140px;
+  }
+
+  .xy-table-item-price {
+    position: relative;
+
+    &::after {
+      z-index: 1;
+      position: absolute;
+      right: 0;
+      top: 0;
+      content: '（元）'
+    }
+
+    ::v-deep .el-input__clear {
+      position: relative;
+      right: 30px;
+      z-index: 2;
+    }
+  }
+
+  .xy-table-item-price-wan {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      right: 0;
+      top: 0;
+      content: '（万元）'
+    }
+
+    ::v-deep .el-input__clear {
+      position: relative;
+      right: 46px;
+      z-index: 2;
+    }
+  }
+</style>

src/views/party/studyResource.vue

@@ -30,12 +30,13 @@
 
 
     <xy-table :list="list" :total="total" :table-item="table" @delete="deleteitem"
-      @editor="(row)=>{$refs['addActivityUser'].id = row.id;$refs['addActivityUser'].isShow = true;$refs['addActivityUser'].type = 'editor'}">
+      @editor="(row)=>{$refs['addStudyResource'].id = row.id;$refs['addStudyResource'].isShow = true;$refs['addStudyResource'].type = 'editor'}" @pageSizeChange="e => {select.page_size = e;doSearch()}"
+      @pageIndexChange="pageChange"  :pageSize="select.page_size">
       <template v-slot:btns v-if="type==0 ">
 
       </template>
     </xy-table>
-    <addActivityUser ref="addActivityUser" :listActivity="listActivity" @refresh="load()"></addActivityUser>
+    <addStudyResource ref="addStudyResource" :listActivity="listActivity" @refresh="load()"></addStudyResource>
   </div>
 </template>
 
@@ -44,16 +45,16 @@
     index,
     destroy,
     show
-  } from "@/api/activity/activityOrder";
+  } from "@/api/party/studyResource";
   import {
     index as activityIndex
   } from "@/api/activity/index";
 
 
-  import addActivityUser from '@/views/activity/components/addActivityUser'
+  import addStudyResource from '@/views/party/components/addStudyResource'
   export default {
     components: {
-      addActivityUser
+      addStudyResource
     },
     data() {
       return {
@@ -67,23 +68,20 @@
         total: 0,
         list: [],
         table: [{
-            prop: 'activity_list.name',
-            label: '活动名称',
-            fixed: 'left',
-            align: 'left'
-          }, {
-            prop: 'name',
-            label: '用户名称',
+            prop: 'title',
+            label: '标题',
             align: 'left',
-
-
           }, {
-            prop: 'username',
-            label: '登录账号',
+            prop: 'source',
+            label: '来源',
             align: 'center'
           }, {
-            prop: 'mobile',
-            label: '手机号',
+            prop: 'reader',
+            label: '作者',
+            align: 'center'
+          },{
+            prop: 'duration',
+            label: '预计阅读时间',
             align: 'center'
           },
           {
@@ -111,7 +109,7 @@
         this.load();
       },
       add() {
-        this.$refs['addActivityUser'].isShow = true
+        this.$refs['addStudyResource'].isShow = true
       },
       pageSizeChange(e) {
         this.select.page_size = e;

src/views/system/user.vue

@@ -113,24 +113,12 @@
               required: true,
               message: '请输入姓名',
               trigger: 'blur'
-            },
-            {
-              min: 3,
-              max: 5,
-              message: '长度在 3 到 5 个字符',
-              trigger: 'blur'
             }
           ],
           username: [{
               required: true,
               message: '请输入用户名',
               trigger: 'blur'
-            },
-            {
-              min: 3,
-              max: 5,
-              message: '长度在 3 到 5 个字符',
-              trigger: 'blur'
             }
           ],
           password: [{