0
308
ViewsTinyMCE not loaded in vue component
I'm trying to integrate tinymce in my vue app. I don't want to use the cloud version and I've installed it inside my app suing this commend npm i tinymce.
After the setup into my component I've imported the needed files in this way and I created a textarea into the template
<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>
Unfortunately I'm not able to see the editor and I get two errors
How I can fix this problem and let the editor work?
2 answers
Answer question0
Based on the error message and the code snippet provided, you've missed importing some critical files that TinyMCE uses, as such its trying to load the external JS files which don't appear to exist or are being served as HTML files (potentially a 404 page).
I'd suggest reviewing the TinyMCE bundling docs further, which hold the answer here: https://www.tiny.cloud/docs/tinymce/6/introduction-to-bundling-tinymce/. So in this case, to solve the 2 errors you're getting that should be able to be resolved by importing the model and default icon pack alongside the theme:
import tinymce from 'tinymce'
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/models/dom';
Basically, TinyMCE at the very minimum needs the core, theme, skin, default icon pack and model to be able to operate (Note: the model is new in TinyMCE 6 and wasn't needed before that). If any of those are missed then it will fail to initialize.
0
Additionally, you could use the official Vue integration guide.
After installation.
Simple input the core packages:
You need both the core tinymce package and tinymce-vue installed.
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";
And use it as a normal Vue component.