testurl

package.json

@@ -24,7 +24,6 @@
     "@fullcalendar/list": "^4.4.0",
     "@fullcalendar/timegrid": "^4.4.0",
     "@fullcalendar/vue": "^4.4.0",
-    "@tinymce/tinymce-vue": "^3.2.2",
     "animate.css": "^3.7.2",
     "axios": "^0.19.2",
     "add-dom-event-listener": "^1.1.0",
@@ -51,7 +50,6 @@
     "sortablejs": "^1.10.2",
     "string_decoder": "^1.3.0",
     "swiper": "^5.3.6",
-    "tinymce": "^5.3.1",
     "v-jsoneditor": "^1.4.1",
     "vue": "2.6.10",
     "vue-awesome-swiper": "^4.1.0",
@@ -71,6 +69,7 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-es2015": "^7.0.0-beta.53",
     "@babel/register": "7.0.0",
+    "@tinymce/tinymce-vue": "^3.2.8",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "3.6.0",
     "@vue/cli-plugin-unit-jest": "^4.4.5",
@@ -96,6 +95,7 @@
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "svg-sprite-loader": "4.1.3",
+    "tinymce": "^5.8.0",
     "vue-template-compiler": "2.6.10"
   },
   "engines": {

src/api/common.js

@@ -8,3 +8,12 @@ export function feedback(data) {
     data
   })
 }
+
+export function uploadImage(data) {
+  return request({
+    url: 'http://star.xiaojukeji.com/upload/img.node',
+    method: 'post',
+    withCredentials: false,
+    data
+  })
+}

src/components/input/normalArea.vue

@@ -19,10 +19,12 @@
   </div>
 </template>
 <script>
+import axios from 'axios'
 import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'
 import 'tinymce/themes/silver/theme'
 import 'tinymce/icons/default/icons'
+// import { uploadImage } from '@/api/common.js'
 // import textEditor from './editor'
 export default {
   components: {
@@ -106,7 +108,9 @@ export default {
   watch: {
     value: {
       handler(newV, oldV) {
-        this.inputValue = newV
+        console.log('new', newV, 'old', oldV)
+        // resetImgSrc
+        this.inputValue = this.resetImgSrc(newV)
       },
       immediate: true
     }
@@ -115,6 +119,57 @@ export default {
     tinymce.init({ selector: `#tinymce_${this.id}` })
   },
   methods: {
+    async resetImgSrc(str) {
+      let newStr = str
+      const imgReg = /<img.*?(?:>|\/>)/gi
+      const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
+      const imgArr = newStr.match(imgReg)
+      console.log(imgArr)
+      imgArr && imgArr.map(async t => {
+        var src = t.match(srcReg)
+        console.log(src)
+        if (src[1]) {
+          // var t = src[0].replace(/src/i, "href");
+          // alert(t);
+          // const res = await uploadImage({
+          //   'imgData': src[1],
+          //   'innerPublic': true
+          // })
+          const newImgUrl = await this.uploadImg(src[1])
+          newStr = newStr.replace(src[1], newImgUrl)
+          console.log(newStr)
+          console.log(src[1])
+        }
+      })
+      console.log('newStr', newStr)
+      console.log('str', str)
+      return newStr
+    },
+    uploadImg(imgData) {
+      const config = {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        },
+        withCredentials: false
+      } // 添加请求头
+      return new Promise((resolve, reject) => {
+        axios.post(
+          'http://star.xiaojukeji.com/upload/img.node',
+          {
+            'imgData': imgData,
+            'innerPublic': true
+          },
+          config
+        )
+          .then(res => {
+            console.log(res)
+            // newStr = newStr.replace(imgData, res.url)
+            resolve(res.url)
+          }).catch(err => {
+            reject(err)
+          })
+      })
+    },
     changeText(e) { // 富文本内容改变
       this.inputValue = e
       this.$emit('update:value', this.inputValue)