解决Tiny只有第一次打开有效的问题

问题复现条件：

框架：

VUECLI+VUE3；

Tiny:

没用官方提供的第三方集成vue的版本，我使用的是原生js的版本。

问题表现为下图：

只有第一次能正确加载第二次就如上图，无法加载出编辑器和文章内容。

解决方法：

在onMounted钩子中，每次加载组件时都创建一个不同id的元素并将它插入组件中，然后再渲染tiny。

注意：

用函数生成的uuid作为id（这里需要修改下getUuid方法，因为生成的uuid可能是数字开头的，id不能是数字开头，所以我再开头加了个'a'）

function getUuid() {  
  var uuidValue = "", k, randomValue;  
  for (k = 0; k < 16;k++) {  
    randomValue = Math.random() * 16 | 0;  
  
    if (k == 8 || k == 12 || k == 16 || k == 20) {  
      uuidValue += "-"  
    }  
    uuidValue += (k == 12 ? 4 : (k == 16 ? (randomValue & 3 | 8) : randomValue)).toString(16);  
  }  
  uuidValue = 'a'+uuidValue;
  return uuidValue;  
}

完整代码如下：

<template>
    <div id="editorBox">
        <el-button id="savebotton" @click="saveArticle">保存文章</el-button>
    </div>
</template>
<script lang="ts" setup>
import { onActivated, onMounted, onUnmounted, ref } from 'vue';
import request from '@/axios/AxiosConfig';
import { getUserName } from '../../auth/auth';

onMounted(() => {
    let randomStr = getUuid();
    let elem = document.createElement("div");
    elem.setAttribute('id','tinyDom'+randomStr);
    document.getElementById('editorBox')?.insertBefore(elem,document.getElementById('savebotton'));
    tinymce.init({
        selector: '#tinyDom'+randomStr,
        language: 'zh-Hans',
        branding: false,
        plugins: 'link lists image code table wordcount media preview fullscreen help',
        toolbar: 'bold italic underline strikethrough | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | undo redo | link unlink code lists table image media | removeformat | fullscreen preview',
        images_upload_url: '/api/file/uploadImage',
        setup: function (editor) {
                editor.on('init', function (e) {
                    console.log('初始化完成');
                    setArticle();
                    // tinymce.activeEditor.setContent(data);
                });
            }
    });
    
});



async function setArticle() {
    await getArticle(2, 'test');
}

async function getArticle(articleId, kind) {
    const param = {
        id: articleId,
        author: getUserName(),
        kind: kind
    };
    return await request({
        url: '/api/article/getArticle',
        method: 'POST',
        data: param,
        timeout: 60 * 60 * 1000
    })
        .then(response => {
            console.log(response);
            tinymce.activeEditor.setContent(response.data.content);
        })
        .catch(err => {});
}

async function saveArticle() {
    let content = tinymce.activeEditor.getContent(); //这里拿到了编辑器编辑后的html代码
    await postArticle(content);
    console.log(content);
}

async function postArticle(content) {
    const param = {
        content: content,
        author: getUserName(),
        kind: 'test'
    };
    return await request({
        url: '/api/article',
        method: 'POST',
        data: param,
        timeout: 60 * 60 * 1000
    })
        .then(response => {
            console.log(response);
        })
        .catch(err => {});
}

function getUuid() {  
  var uuidValue = "", k, randomValue;  
  for (k = 0; k < 16;k++) {  
    randomValue = Math.random() * 16 | 0;  
  
    if (k == 8 || k == 12 || k == 16 || k == 20) {  
      uuidValue += "-"  
    }  
    uuidValue += (k == 12 ? 4 : (k == 16 ? (randomValue & 3 | 8) : randomValue)).toString(16);  
  }  
  uuidValue = 'a'+uuidValue;
  return uuidValue;  
}  
</script>