tinymce-vue的深浅主题切换

tinymce-vue没有提供开箱即用的主题色切换的方法，这里探索了一条道路，思路如下:

1. 深浅主题加载的css不同，通过 skin_url 和 content_css 来设置。

const initOptions = computed(() => ({
    skin_url: "/tinymce/skins/ui/oxide" + (isDark.value ? "-dark" : ""),  
    content_css: isDark.value  
      ? "/tinymce/skins/content/dark/content.css"  
      : "/tinymce/skins/content/default/content.css",
    // ...
}));

2. 切换主题时，先销毁过去的编辑器实体，然后再重新配置新的编辑器。

为了销毁之前的实体，需要传递给tinymce-vue一个id, 然后借助 tinymce.get(id)方法获取实体，利用实体的 destroy 方法实现销毁。

tinymce-vue没有提供重新初始化的方法，为了重新配置新的编辑器，只好采用 v-if 和 nextTick 指令，强制组件重新加载。

<template>  
  <editor  
    tinymce-script-src="/tinymce/tinymce.min.js"  
    :init="initOptions"  
    v-model="content"  
    :id="uuid"  
    v-if="!switching"  
  />  
</template>

<script setup>  
// ...
import tinymce from "tinymce";  
import Editor from "@tinymce/tinymce-vue";
import { v4 } from "uuid";    
// ...


const uuid = v4();

const switching = ref(false);  
watch(isDark, () => {  
  const instance = tinymce.get(uuid);  
  instance?.destroy();  
  switching.value = true;  
  nextTick(() => {  
    switching.value = false;  
  });  
});

</script>

结果展示

通过上述方法，完成了深浅主题切换，实现了预期效果。