fix

src/components/Tinymce.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="my-tinymce">
+    <Editor v-model="contentValue" :init="myInit" />
+  </div>
+</template>
+
+<script setup>
+import axios from 'axios'
+import tinymce from 'tinymce/tinymce'
+import '@/plugins/tinymce/importTinymce'
+import Editor from '@tinymce/tinymce-vue'
+import { initTiny } from '@/plugins/tinymce/tinymce'
+import { onMounted, toRefs, ref, reactive, defineProps, defineEmits, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  // placeholder
+  placeholder: {
+    type: String,
+    default: 'Please enter content',
+  },
+  // Default style
+  style: {
+    type: Object,
+    default: () => {
+      return { width: '100%', heigth: '400' }
+    },
+  },
+  // image upload server address
+  imgUploadUrl: {
+    type: String,
+    default: '/api/v1/media',
+  },
+  batchId: {
+    type: String,
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+
+// Parameter custom initialization
+const customer = (init) => {
+  // Allow the outside world to pass in height and placeholder
+  init.height = props.style.heigth
+  init.placeholder = props.placeholder
+
+  // Paste pictures and automatically process base64
+  init.urlconverter_callback = (url, node, onSave, name) => {
+    if (node === 'img' && url.startsWith('blob:')) {
+      tinymce.activeEditor && tinymce.activeEditor.uploadImages()
+    }
+    return url
+  }
+  // upload picture
+  init.images_upload_handler = (blobInfo, success, failure) => {
+    imgUploadFn(blobInfo, success, failure)
+  }
+  return init
+}
+// const myInit = ref(customer(initTiny(props.batchId)));
+const state = reactive({
+  myInit: ref(customer(initTiny(props.batchId))),
+  contentValue: props.modelValue, // binding text
+  timeout: null,
+})
+
+onMounted(() => {
+  tinymce.init({})
+})
+
+// Listen for text changes and pass them to the outside world
+watch(
+  () => state.contentValue,
+  (n) => {
+    debounce(() => {
+      emit('update:modelValue', state.contentValue)
+    })
+  }
+)
+// Listen to the default value. The first time a v-model is passed in from the outside world, it is assigned to contentValue.
+watch(
+  () => props.modelValue,
+  (n) => {
+    if (n && n !== state.contentValue) {
+      state.contentValue = n
+    }
+  }
+)
+
+const debounce = (fn, wait = 400) => {
+  if (state.timeout !== null) {
+    clearTimeout(state.timeout)
+  }
+  state.timeout = setTimeout(fn, wait)
+}
+
+const imgUploadFn = async (blobInfo, success, failure) => {
+  // Can limit image size
+  // if (blobInfo.blob().size / 1024 / 1024 > 2) {
+  //   failure('Upload failed, please control the image size within 2M')
+  // } else {}
+  const formData = new FormData()
+  formData.append('file', blobInfo.blob(), blobInfo.filename())
+  formData.append('batch_id', props.batchId)
+  const response = await axios.post('https://api.madomotor.ir'.props.imgUploadUrl, formData)
+
+  if (response && response.status == 200) {
+    return success(response.data.data.url)
+  }
+  return failure(`HTTP Error: ${response.status}`)
+}
+
+const { myInit, contentValue, timeout } = toRefs(state)
+</script>
+
+<style></style>