TinyMCE 未加载到 vue 组件中

Question

我正在尝试将 tinymce 集成到我的 vue 应用程序中。我不想使用云版本，我已经将它安装在我的应用程序中以起诉此推荐 npm i tinymce。

设置到我的组件后，我以这种方式导入了所需的文件，并在模板中创建了一个文本区域

<template>
    <Navbar></Navbar>
    <div class="container" id="editorWrapper">
        <div class="row mt-5 pt-5 m-0">
            <!--  -->
            <div class="col-sm-12 col-md-12 col-lg-12 p-0" id="">
                <h1>Write post</h1>
            </div>
            <!--  -->
            <div class="col-sm-12 col-md-12 col-lg-12 p-0" id="programEditorWrapper">
                <textarea ref="programEditor" id="programEditor"></textarea>
            </div>
        </div>
    </div>
</template>

<script>
import tinymce from 'tinymce'
import 'tinymce/themes/silver'
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/code'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/emoticons/js/emojis'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/table'
import contentUiCss from 'tinymce/skins/ui/oxide/content.css'
import contentCss from 'tinymce/skins/content/default/content.css'


export default {
    name: 'ProgramsEditor',
    components: {
        Navbar
    },
    data() {
        return {
            editor: null
        }
    },
    created() {

    },
    mounted() {
        this.initEditor()
    },
    methods: {
        initEditor() {
            this.editor = tinymce.init({
                selector: '#programEditor',
                plugins: 'advlist code emoticons link lists table',
                toolbar: 'bold italic | bullist numlist | link emoticons',
                skin: false,
                content_css: false,
                content_style: contentUiCss.toString() + '\n' + contentCss.toString()
            })
        }, 
    }
}
</script>

很遗憾，我无法看到编辑器，并且出现了两个错误

如何解决这个问题并让编辑器工作？

Answer 1

根据错误消息和提供的代码片段，您错过了导入 TinyMCE 使用的一些关键文件，因此它试图加载似乎不存在或被用作的外部 JS 文件HTML 个文件（可能是 404 页面）。

我建议进一步查看 TinyMCE 捆绑文档，其中包含答案：https://www.tiny.cloud/docs/tinymce/6/introduction-to-bundling-tinymce/。因此，在这种情况下，要解决您遇到的 2 个错误，应该可以通过在主题旁边导入模型和默认图标包来解决：

import tinymce from 'tinymce'
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

基本上，TinyMCE 至少需要核心、主题、皮肤、默认图标包和模型才能运行（注意：模型是 TinyMCE 6 中的新模型，之前不需要）。如果遗漏其中任何一个，它将无法初始化。

Answer 2

此外，您可以使用 official Vue integration guide。

安装后。
简单输入核心包：
您需要安装核心 tinymce 包和 tinymce-vue。

import "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/skins/ui/oxide/skin.css";
import <Your component name here> from "@tinymce/tinymce-vue";

并将其用作普通的 Vue 组件。

TinyMCE 未加载到 vue 组件中

TinyMCE not loaded in vue component

javascript

tinymce

vue.js