From 9c7f4023eb787468e74328bb8d5429ff91079a64 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 27 Apr 2020 18:05:31 +0800
Subject: [PATCH] ckeditor part1

---
 test_client/package-lock.json                 |  15 +-
 test_client/package.json                      |   1 +
 .../Tinymce/components/EditorImage.vue        | 111 ++++++++
 .../components/Tinymce/dynamicLoadScript.js   |  59 +++++
 test_client/src/components/Tinymce/index.vue  | 237 ++++++++++++++++++
 test_client/src/components/Tinymce/plugins.js |   7 +
 test_client/src/components/Tinymce/toolbar.js |   6 +
 test_client/src/router/index.js               |  23 ++
 test_client/src/views/news/news.vue           | 151 +++++++++++
 test_client/src/views/news/newscreate.vue     |  36 +++
 test_mini/app.js                              |   4 +-
 test_mini/pages/main/main.js                  |  19 +-
 12 files changed, 666 insertions(+), 3 deletions(-)
 create mode 100644 test_client/src/components/Tinymce/components/EditorImage.vue
 create mode 100644 test_client/src/components/Tinymce/dynamicLoadScript.js
 create mode 100644 test_client/src/components/Tinymce/index.vue
 create mode 100644 test_client/src/components/Tinymce/plugins.js
 create mode 100644 test_client/src/components/Tinymce/toolbar.js
 create mode 100644 test_client/src/views/news/news.vue
 create mode 100644 test_client/src/views/news/newscreate.vue

diff --git a/test_client/package-lock.json b/test_client/package-lock.json
index 51bdcc7..c9691af 100644
--- a/test_client/package-lock.json
+++ b/test_client/package-lock.json
@@ -3508,6 +3508,14 @@
       "dev": true,
       "optional": true
     },
+    "ckeditor4-vue": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npm.taobao.org/ckeditor4-vue/download/ckeditor4-vue-0.2.0.tgz",
+      "integrity": "sha1-blzFN9dsQEm31CPYapeqFBivUQA=",
+      "requires": {
+        "load-script": "^1.0.0"
+      }
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz",
@@ -4974,7 +4982,7 @@
     },
     "echarts": {
       "version": "4.7.0",
-      "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.7.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.7.0.tgz?cache=0&sync_timestamp=1584522755461&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.7.0.tgz",
       "integrity": "sha1-Wzh1pML5HjkpQl+rq56s5+QJiz8=",
       "requires": {
         "zrender": "4.3.0"
@@ -9783,6 +9791,11 @@
         }
       }
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/load-script/download/load-script-1.0.0.tgz",
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+    },
     "loader-fs-cache": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.2.tgz",
diff --git a/test_client/package.json b/test_client/package.json
index c47aa17..d19708d 100644
--- a/test_client/package.json
+++ b/test_client/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "axios": "0.18.1",
+    "ckeditor4-vue": "^0.2.0",
     "echarts": "^4.7.0",
     "element-ui": "2.13.0",
     "file-saver": "^2.0.2",
diff --git a/test_client/src/components/Tinymce/components/EditorImage.vue b/test_client/src/components/Tinymce/components/EditorImage.vue
new file mode 100644
index 0000000..d4a98e8
--- /dev/null
+++ b/test_client/src/components/Tinymce/components/EditorImage.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="upload-container">
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
+      upload
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <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">
+          Click upload
+        </el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false">
+        Cancel
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        Confirm
+      </el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+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('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
+        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) {
+      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;
+  /deep/ .el-upload--picture-card {
+    width: 100%;
+  }
+}
+</style>
diff --git a/test_client/src/components/Tinymce/dynamicLoadScript.js b/test_client/src/components/Tinymce/dynamicLoadScript.js
new file mode 100644
index 0000000..185f58d
--- /dev/null
+++ b/test_client/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
diff --git a/test_client/src/components/Tinymce/index.vue b/test_client/src/components/Tinymce/index.vue
new file mode 100644
index 0000000..0c6174c
--- /dev/null
+++ b/test_client/src/components/Tinymce/index.vue
@@ -0,0 +1,237 @@
+<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'
+
+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['en'],
+        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
+        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
+          })
+        }
+        // 整合七牛上传
+        // 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);
+        //   });
+        // },
+      })
+    },
+    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) {
+      const _this = this
+      arr.forEach(v => {
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tinymce-container {
+  position: relative;
+  line-height: normal;
+}
+.tinymce-container>>>.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>
diff --git a/test_client/src/components/Tinymce/plugins.js b/test_client/src/components/Tinymce/plugins.js
new file mode 100644
index 0000000..058d2ae
--- /dev/null
+++ b/test_client/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 emoticons 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
diff --git a/test_client/src/components/Tinymce/toolbar.js b/test_client/src/components/Tinymce/toolbar.js
new file mode 100644
index 0000000..4f8a545
--- /dev/null
+++ b/test_client/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']
+
+export default toolbar
diff --git a/test_client/src/router/index.js b/test_client/src/router/index.js
index b9cce84..39713c2 100644
--- a/test_client/src/router/index.js
+++ b/test_client/src/router/index.js
@@ -63,6 +63,28 @@ export const constantRoutes = [
  * the routes that need to be dynamically loaded based on user perms
  */
 export const asyncRoutes = [
+  {
+    path: '/news',
+    component: Layout,
+    redirect: '/news/',
+    name: 'News',
+    meta: { title: '资讯文章', icon: 'peoples', perms: ['news_view'] },
+    children: [
+      {
+        path: 'news',
+        name: 'News',
+        component: () => import('@/views/news/news.vue'),
+        meta: { title: '文章列表', icon: 'documentation', perms: ['news_view'] }
+      },
+      {
+        path: 'create',
+        name: 'NewsCreate',
+        component: () => import('@/views/news/newscreate.vue'),
+        meta: { title: '新建文章', noCache: true, icon: '', perms: ['news_create']},
+        hidden: true
+      },
+    ]
+  },
   {
     path: '/crm',
     component: Layout,
@@ -84,6 +106,7 @@ export const asyncRoutes = [
       },
     ]
   },
+
   {
     path: '/Qmanage',
     component: Layout,
diff --git a/test_client/src/views/news/news.vue b/test_client/src/views/news/news.vue
new file mode 100644
index 0000000..7f51f3d
--- /dev/null
+++ b/test_client/src/views/news/news.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="app-container">
+    <div style="margin-top:10px">
+      <el-input
+        v-model="listQuery.search"
+        placeholder="名称"
+        style="width: 200px;"
+        class="filter-item"
+        @keyup.enter.native="handleSearch"
+      />
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+      <el-button
+        class="filter-item"
+        type="primary"
+        icon="el-icon-refresh-left"
+        @click="resetFilter"
+      >刷新重置</el-button>
+    </div>
+    <div style="margin-top:10px">
+    <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button>
+    </div>
+<el-table
+      :data="tableData.results"
+      style="width: 100%;margin-top:10px;"
+      border
+      stripe
+      fit
+      v-loading="listLoading"
+      highlight-current-row
+      max-height="600"
+    >
+      <el-table-column type="index" width="50"></el-table-column>
+      <el-table-column align="left" label="名称">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column align="left" label="工作类别">
+        <template slot-scope="scope">{{ scope.row.workscope_name }}</template>
+      </el-table-column>
+      <el-table-column align="left" label="总分">
+        <template slot-scope="scope">{{ scope.row.total_score }}</template>
+      </el-table-column>
+      <el-table-column align="left" label="通过分">
+        <template slot-scope="scope">{{ scope.row.pass_score }}</template>
+      </el-table-column>
+      <el-table-column align="left" label="限时(分钟)">
+        <template slot-scope="scope">{{ scope.row.limit }}</template>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="small"
+            @click="handleEdit(scope)"
+            icon="el-icon-edit"
+            :disabled="!checkPermission(['paper_update'])"
+          ></el-button>
+          <el-button
+            type="danger"
+            size="small"
+            @click="handleDelete(scope)"
+            icon="el-icon-delete"
+            :disabled="!checkPermission(['paper_delete'])"
+          ></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="tableData.count>0"
+      :total="tableData.count"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { getPaperList, deletePaper } from "@/api/examtest";
+import checkPermission from "@/utils/permission";
+import Pagination from "@/components/Pagination";
+
+const listQuery = {
+  page: 1,
+  limit: 20,
+  search:''
+};
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      listQuery: Object.assign({}, listQuery),
+      tableData: {
+          count:0,
+          results:[],
+      },
+      listLoading: true,
+    };
+  },
+  computed: {},
+  created() {
+    this.getList();
+  },
+  methods: {
+    checkPermission,
+    getList(query = this.listQuery) {
+      this.listLoading = true;
+      getPaperList(query).then(response => {
+        if(response.data.results){
+            this.tableData = response.data;
+        }
+        this.listLoading = false;
+      });
+    },
+    resetFilter() {
+      this.listQuery = {
+        page: 1,
+        limit: 20,
+        search:''
+      };
+      this.getList();
+    },
+    handleSearch() {
+      this.listQuery.page = 1;
+      this.getList();
+    },
+    handleAdd() {
+      this.$router.push({path:"/news/create"})
+    },
+    handleEdit(scope) {
+    this.$router.push({path:"/sjmanage/paper/update",query:{id:scope.row.id}})
+    },
+    handleDelete(scope) {
+      this.$confirm('确认删除?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deletePaper(scope.row.id).then(response => {
+            this.$message({
+                type: 'success',
+                message: '删除成功!'
+              });
+          this.getList()
+      });
+          
+        }).catch(() => {      
+        });
+    },
+  }
+};
+</script>
diff --git a/test_client/src/views/news/newscreate.vue b/test_client/src/views/news/newscreate.vue
new file mode 100644
index 0000000..d42cabf
--- /dev/null
+++ b/test_client/src/views/news/newscreate.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="app-container">
+    <aside>
+      Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html">Documentation</a>
+    </aside>
+    <div>
+      <tinymce v-model="content" :height="300" />
+    </div>
+    <div class="editor-content" v-html="content" />
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+
+export default {
+  name: 'TinymceDemo',
+  components: { Tinymce },
+  data() {
+    return {
+      content:
+      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
+        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
+      </ul>`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.editor-content{
+  margin-top: 20px;
+}
+</style>
+
diff --git a/test_mini/app.js b/test_mini/app.js
index 1ca2a22..d9d5af7 100644
--- a/test_mini/app.js
+++ b/test_mini/app.js
@@ -20,7 +20,9 @@ App({
           if(res.code==200){
             this.globalData.token = res.data.token
             this.globalData.userinfo = res.data.userinfo
-            console.log(res.data.userinfo)
+            var pages = getCurrentPages() //获取加载的页面
+            var currentPage = pages[pages.length - 1] //获取当前页面的对象
+            currentPage.showExp()
             if(res.data.userinfo.username == null){
               //匿名用户
               wx.reLaunch({
diff --git a/test_mini/pages/main/main.js b/test_mini/pages/main/main.js
index 29b755b..91f2aba 100644
--- a/test_mini/pages/main/main.js
+++ b/test_mini/pages/main/main.js
@@ -114,6 +114,23 @@ Page({
       })
     }
   },
+  showExp: function (){
+    var that = this
+    const workscope = getApp().globalData.userinfo.workscope
+    const remain_count = getApp().globalData.userinfo.remain_count
+    if (!workscope && remain_count){
+      wx.showModal({
+        title: '暂未开通权限!',
+        content: '您有' + remain_count + '次体验次数.',
+        confirmText: '体验一下',
+        success(res) {
+          if (res.confirm) {
+            that.genPaper2()
+          }
+        }
+      })
+    }
+  },
   goMoni: function () {
     var that = this
     const workscope = getApp().globalData.userinfo.workscope
@@ -125,7 +142,7 @@ Page({
       let confirmText, showCancel
       if(remain_count>0){
         wx.showModal({
-          title: '未开通权限!',
+          title: '暂未开通权限!',
           content: '您有' + remain_count + '次体验次数.',
           confirmText: '体验一下',
           success(res) {