Tinymce (#214)

* Update README.md

* Update axios.js

* feat:富文本 Tinymce

* fix:去掉tinymce标识

* update:新增富文本部分内置插件

* fix:富文本上传图片加入token验证

* fix:自动化导入富文本插件

Author: gongjs

README.md

@@ -89,12 +89,16 @@ QQ群搜索：林间有风 或 643205479
 
 ## 版本日志
 
+<<<<<<< HEAD
 最新版本 `0.2.0`
 
 ### 0.2.0
 
 1. `A` 新增图像上传、图像预览、富文本等自定义组件
 2. `A` 新增 lin-cms-ui 多个基础组件
+=======
+最新版本 `0.1.0-beta.3`
+>>>>>>> 0b890cda57f1aaa11af9315d031ae15fae4def51
 
 ### 0.1.0-beta.3
 

package-lock.json

@@ -25,7 +25,7 @@
     "moment": "^2.24.0",
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",
-    "tinymce": "^5.0.9",
+    "tinymce": "^5.0.12",
     "vue": "^2.6.8",
     "vue-awesome-swiper": "^3.1.3",
     "vue-croppa": "^1.3.8",

package.json

@@ -0,0 +1,8 @@
+// eslint-disable-next-line
+const importAll = (requireContext) => requireContext.keys().forEach(requireContext)
+try {
+  // 导入所有插件
+  importAll(require.context('../../../../node_modules/tinymce/plugins', true))
+} catch (err) {
+  console.log(err)
+}

src/components/base/tinymce/importAll.js

@@ -3,22 +3,12 @@
     <editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"></editor>
   </div>
 </template>
-
 <script>
 // eslint-disable-next-line
 import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'
 import 'tinymce/themes/silver/theme'
-import 'tinymce/plugins/textcolor'
-import 'tinymce/plugins/advlist'
-import 'tinymce/plugins/table'
-import 'tinymce/plugins/lists'
-import 'tinymce/plugins/paste'
-import 'tinymce/plugins/preview'
-import 'tinymce/plugins/fullscreen'
-import 'tinymce/plugins/image'
-import 'tinymce/plugins/code'
-import 'tinymce/plugins/link'
+import './importAll'
 
 export default {
   name: 'TinymceEditor',
@@ -39,6 +29,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    toolbar: {
+      type: String,
+      // eslint-disable-next-line
+      default: ' undo redo |formatselect | bold italic strikethrough forecolor backcolor formatpainter | link image | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | preview fullscreen code',
+    },
   },
   components: {
     Editor,
@@ -64,32 +59,25 @@ export default {
       statusbar: false, // 隐藏编辑器底部的状态栏
       paste_data_images: true, // 允许粘贴图像
       menubar: this.showMenubar, // 隐藏最上方menu
-      plugins: 'advlist table lists paste preview fullscreen image code link',
       // eslint-disable-next-line
-      toolbar:' undo redo |fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | link image | h1 h2 h3 blockquote table numlist bullist | preview fullscreen code',
+      plugins: 'print fullpage searchreplace autolink directionality visualblocks visualchars template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime wordcount textpattern help advlist table lists paste preview fullscreen image imagetools code link',
+      toolbar: this.toolbar,
       // eslint-disable-next-line
       images_upload_handler: async function(blobInfo, success, failure) {
-        // eslint-disable-next-line
-        let json
-        const xhr = new XMLHttpRequest()
-        xhr.withCredentials = false
-        xhr.open('POST', `${_this.upload_url}`)
-        // eslint-disable-next-line
-        xhr.onload = function() {
-          if (xhr.status !== 200) {
-            failure(`HTTP Error: ${xhr.status}`)
-            return
-          }
-          json = JSON.parse(xhr.responseText)
-          if (json[0] && json[0].url) {
-            success(json[0].url)
-          } else {
-            failure(`Invalid JSON: ${xhr.responseText}`)
+        const file = new File([blobInfo.blob()], blobInfo.filename(), {
+          type: 'image/*',
+        })
+        _this.$axios({
+          method: 'post',
+          url: '/cms/file/',
+          data: {
+            file,
+          },
+        }).then((res) => {
+          if (res[0] && res[0].url) {
+            success(res[0].url)
           }
-        }
-        const formData = new FormData()
-        formData.append('file', blobInfo.blob(), blobInfo.filename())
-        xhr.send(formData)
+        }).catch(err => failure(err))
       },
     }
   },

src/components/base/tinymce/index.vue

@@ -1,5 +1,5 @@
 const Config = {
-  baseUrl: process.env.VUE_APP_BASE_URL,
+  baseUrl: 'http://dev.lin.colorful3.com/',
   stagnateTime: 1 * 60 * 60 * 1000, // 无操作停滞时间  默认1小时
   openAutoJumpOut: true, // 是否开启无操作跳出
   notLoginRoute: ['login'], // 无需登录即可访问的路由 name,

src/config/index.js

@@ -8,6 +8,7 @@
 </template>
 
 <script>
+
 import Tinymce from '@/components/base/tinymce'
 
 export default {