Importing Node Packages in Vue without Composition API? - vue.js

Question

I've been trying for a while to learn how to use external Node Packages, but I keep getting frustrated.
I am currently trying to implement TinyMCE. I've installed the required packages and the example instructs me to do the following:
<script>
import Editor from '#tinymce/tinymce-vue'
export default {
name: 'app',
components: {
'editor': Editor
}
}
</script>
This is a pretty common pattern that I can never get to work, I'm guessing because I don't use the composition API. When I try to do something like this:
import Editor from '#tinymce/tinymce-vue'
const messageForm = workdesk.component('message-form', {
template: "#message-form",
delimiters: ["[[", "]]"],
props: ['project'],
components: {
'editor': Editor
},
data() {
return {
contacts: baseData.contacts,
proposed: {},
}
},
methods: {
}
})
it tells me Uncaught SyntaxError: Cannot use import statement outside a module
Does this mean that I need to learn Composition API to start using these external packages? Or am I doing something else wrong?

Answer 1

You do not need the Composition API in order to use TinyMCE. You can try something like this:
<template>
<Editor v-model="text" :init="editorConfig" />
</template>
<script>
// we must import TinyMCE locally, or tinymce-vue will try to load it from TinyCloud and complain about a missing API key
import 'tinymce/tinymce';
// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default';
// A theme is also required
import 'tinymce/themes/silver';
// Any plugins you want to use has to be imported
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/code';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/help';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/spellchecker';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/contextmenu';
import Editor from '#tinymce/tinymce-vue';
export default
{
name: 'RichEditor',
components:
{
Editor,
},
props:
{
value:
{
type: String,
default: ''
},
height:
{
type: [String, Number],
default: 400
}
},
data()
{
return {
text: this.value,
};
},
computed:
{
editorConfig()
{
return {
height: this.height,
content_css: process.env.BASE_URL + 'tinymce_skin/content/default/content.css',
skin_url: process.env.BASE_URL + 'tinymce_skin/ui/oxide',
menubar: 'file edit view insert format tools table tc help',
toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor casechange formatpainter removeformat | pagebreak | charmap emoticons | insertfile image media pageembed template link anchor codesample',
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
toolbar_mode: 'sliding',
contextmenu: 'link image imagetools table',
plugins:
[
'advlist autolink lists link image charmap anchor',
'searchreplace visualblocks code imagetools hr',
'insertdatetime media table paste code help wordcount'
],
image_advtab: true,
};
},
},
watch:
{
text(newVal)
{
this.$emit('input', newVal);
}
}
};
</script>
and also in vue.config.js
module.exports =
{
chainWebpack: config =>
{
// TinyMCE - copy skins from node_modules/tinymce to the /public folder
config.plugins.has('copy') && config.plugin('copy')
.tap(([pathConfigs]) =>
{
//const to = pathConfigs[0].to;
pathConfigs[0].force = true; // so the original `/public` folder keeps priority
// add other locations.
pathConfigs.unshift({
context: './node_modules/tinymce/skins',
from: './**/*',
to: './tinymce_skin',
});
return [pathConfigs];
});
return config;
},
}