Integrate Tinymce in my Form Component


#1

I am trying to integrate TinyMce into a Form which is a vuejs Component. I am not using an API Key so I tried to install it locally and I somehow managed to get the Message removed about the Key. Anyway, I am now trying to configure the toolbar, I will need tables, lists and most important the ability to add Images. I have looked through the internet and found that you can put it in the data()

I than used

        <editor v-model="post.body"
         toolbar="myToolbar1"
        plugins="image link"
         ></editor>

But that did not work so I figured out that I get the toolbar changed if I add it straight in my template like below, but this is not great. I also got the problem that if I add link or image and click on it than I get the Error

c is null in theme.min.js

How can I configure it correctly and how do i get it to work? I have also tried tinymce.init in mounted, but that was also ignored, so I must miss something and can not figure out what.

<template>
<div>
<form method="post" action="" @submit.prevent="onSubmit" @keydown="errors.clear()">
        <fieldset class="add-form"><legend class="add-form">
        <h3>Article Details</h3></legend>
       <label class="required" for="fname">Headline</label>
       <input class="form-control"  v-model="post.title" id="fname" placeholder="Headline">
       <span class="invalid-feedback" v-text="errors.get('title')"></span>
       <editor v-model="post.body"
            toolbar="image italic link"
           plugins="image link"
        ></editor>

</form> 
</div>

</template>

import Editor from '@tinymce/tinymce-vue';
import editorinymce from 'tinymce';
import 'tinymce/themes/modern/theme';
import 'tinymce/plugins/image';

export default{
    components: {
           'editor': Editor // <- Important part
    },

    data () { 
            return { 
               name: 'app',
	       myToolbar1: 'undo redo | italic strikethrough | forecolor backcolor | template link | bullist numlist',
               myToolbar2 : '',
               result:[],
               "post": {     
                    title: '',
                    body: '',
                }, 
            
                errors: new Errors(),
     }},

#2
<editor v-model="post.body"
            toolbar="myToolbar1"
           plugins="image link"
        ></editor>

should be

<editor v-model="post.body"
            :toolbar="myToolbar1"
           plugins="image link"
        ></editor>

you can also use :init = "initObject" as an attribute, and define the initObject in your data()

not sure about the pics and links sorry


#3

Thank you very much. You were right, :toolbar was the issue and I can now set the Toolbar in the data part. The same is with the Plugins, so when I use :plugins than I can move all the settings.

Unfortunately I still have the issue

c is null in theme.min.js

So neither Link nor Image works and I only get the Error message shown. I don’t know what I am doing wrong here and have not found any solution yet. Anyone else has seen this happening and knows the solution?