我正在嘗試將 tinymce 集成到我的 vue 應用程式中。我不想使用云版本，并且我已將其安裝在我的應用程式中以起訴此表揚npm i tinymce。
設定到我的組件后，我以這種方式匯入了所需的檔案，并在模板中創建了一個 textarea
<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>
不幸的是，我看不到編輯器，并且出現兩個錯誤
我該如何解決這個問題并讓編輯器作業？
uj5u.com熱心網友回復：
根據錯誤訊息和提供的代碼片段，您錯過了匯入 TinyMCE 使用的一些關鍵檔案，因此它試圖加載似乎不存在或作為 HTML 檔案提供的外部 JS 檔案（可能是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 中的新模型，在此之前不需要）。如果其中任何一個被遺漏，那么它將無法初始化。
uj5u.com熱心網友回復：
此外，您可以使用官方的 Vue 集成指南。
安裝后。
簡單輸入核心包：
您需要安裝核心 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 組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484198.html
標籤：javascript Vue.js 微小的
下一篇：完成其他請求后呼叫api請求