vue使用tinymce本地加载方案2,更快加载tinymce

提下方案1:是改写tinymce-vue的script加载器,vue的tinymce-vue原来只是个script加载器, 改的地方略微多。

发现了另一个方法:
首先,不能再使用tinymce-vue,只用tinymce,好处是不需要api-key

npm install tinymce

同时将tinymce放到static目录用于引用css

js的部分用import
css的部分用tinymce.init

使用方式如下:

<script setup>
import {onMounted } from 'vue'
import tinymce from 'tinymce' //加载tinymce的js
import 'tinymce/themes/silver/theme' //加载theme
import 'tinymce/models/dom/model' //加载model
import 'tinymce/icons/default/icons' //加载icon

onMounted(() => {
    tinymce.init({
        selector: 'textarea#default', 
        skin_url: 'static/tinymce/skins/ui/oxide', 
        theme_url:'static/tinymce/themes/silver/theme',
        content_css:'static/tinymce/skins/ui/oxide/content.min.css'
    });
})
</script>

<template>
  <textarea id="default">Hello, World!</textarea>
</template>