tinymce/tinymce-vue

Official TinyMCE Vue component

Official TinyMCE Vue component

About

This package is a thin wrapper around TinyMCE to make it easier to use in a Vue application.

• If you need detailed documentation on TinyMCE, see: TinyMCE Documentation.
• For the TinyMCE Vue Quick Start, see: TinyMCE Documentation - Vue Integration.
• For the TinyMCE Vue Technical Reference, see: TinyMCE Documentation - TinyMCE Vue Technical Reference.

Support

Version 4.0 is intended to support Vue 3. For Vue 2.x and below please use previous versions of the wrapper.

Issues

Have you found an issue with tinymce-vue or do you have a feature request? Open up an issue and let us know or submit a pull request. Note: for issues related to TinyMCE please visit the TinyMCE repository.

tinymce-vue's Issues

The initial value cannot be displayed when routing is switched with vue-route.

vue V2.5.16
chrome V68

Use as Example

<edit :init="init" v-model="content"></edit>

data(){
       return {
             content: '123';
       }
}

Then switch vue-route.

import Wikis from './views/Wikis.vue';
import AddWiki from './views/AddWiki.vue';

export default {
    routes: [      
        {
            name: 'wikis',
            path: '/Wikis/',
            component: Wikis
        },
        {
            name: 'addwiki',
            path: '/AddWiki/',
            component: AddWiki
        }
    ]
};

Content can be displayed at AddWiki initialization, after switching to Wikis and then to AddWiki, Content is not displayed

Output plain text in v-model using init

Hi! How do I tell the editor to output plain text to the v-model variable? Thanks!

About import other lang packages in this vue component.

How can I import other language packages in tinymce-vue, such as Chinese language packages.

Could not find a declaration file for module '@tinymce/tinymce-vue'

not work with vue3.0+typescript

Add button after load

I know with tinymce you can add a button after load, can this be done with this plugin as well and if so any tips to getting access to the editor post lost so I can do this? Thanks!

Cannot convert blob

After I initialized component i receive the message. Cannot convert blob:http://localhost:8080/1025c3a4-b849-4a20-b0ae-5598e2383a64 to Blob. Resource might not exist or is inaccessible. How can I resolve this?

how to remove "↵" when get v-model?

because i want to store db for this data.and the symbol make the "TEXT" type bigger, so what can i do? thx

Needed to export as default key.

For my purposes in order to get this component to work I needed to do this.

var Editor = require('@tinymce/tinymce-vue').default

Unless I missed something that is the only way I could get this to work right. Otherwise received this error.
Failed to mount component: template or render function not defined.

Readme file says 'you' instead of 'your'

Resource reference error

https://cloud.tinymce.com/stable/skins/lightgray/src/skins/lightgray/main/less/desktop/Icons.less

Cannot read property 'init' of null

Hi,
I've imported the Editor in my app and registered it as a global component :

import Editor from '@tinymce/tinymce-vue';
Vue.component('tinymce', Editor);

Then I have :

<tinymce inline v-model="content">
    Hello !
</tinymce>

But Chrome display the error below :

Editor.js?f88d:46 Uncaught TypeError: Cannot read property 'init' of null
at eval (Editor.js?f88d:46)
at eval (ScriptLoader.js?0fea:34)
at Array.forEach ()
at HTMLScriptElement.eval (ScriptLoader.js?0fea:34)

I'm sure I missed something, but what ?

thanks !!

Release 1.1.0 `disabled` mode breaks `readonly` functionality.

Since the release of the disabled prop in 1.1.0 we've encountered the follow issues:

• :disabled="true" means that a user can not edit OR select the text (Allowing the user to select and copy text is a requirement for us.)
• Passing readonly: 1 into init() no longer works as expected (the user cannot edit BUT should be able to select/copy content)

For now, we reverted to 1.0.8 since 1.1.0 is unusable.

What are the possible solutions?

Link and Image both don't work and throw Error

I am trying since days now to get it to work, but both Link and Image throw the below Error when I click on the icon.

TypeError: c is null theme.min.js 1:91433

I have done a npm so the files are in the node folder. I have downloaded tinymce and saved that in my js folder. I than added below line to load the js files.

<script src="{{ asset('js/tinymce/themes/modern/theme.min.js')}}"></script>
<script src="{{ asset('js/tinymce/tinymce.min.js')}}"></script>

After that I created my component with the form and the Editor. I only use the data() section nothing in mounted or computed. What is missing that it throws the error?

<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">
       <editor v-model="post.body"
             :plugins="myPlugins" 
             :toolbar ="myToolbar1"
        ></editor>
</form> 
</div>
</template>

import Editor from '@tinymce/tinymce-vue';
import editorinymce from 'tinymce';
import 'tinymce/themes/modern/theme';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/code';
import 'tinymce/plugins/preview';

   export default{
        components: {
               'tinymce': Editor
        },

        data () { 
                return { 
                name: 'app',
                myToolbar1: 'undo redo | bold italic underline preview | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                myPlugins: "link image code preview",

Add some css libraries.

How can i add some css libraries to inject in the editor?

link超链接无法使用

the @onInit-function don't fire

Hi
Since version 1.0.1 the @onInit-function don't fire anymore. @onFocus-function fire as expected.

<template>
   <tinymceeditor @onInit="init" @focus="focus" ...></tinymceditor>
</template>
<script>
.......
export default {
.......
methods: {
            focus: function (e) {
                console.log("editor focus")
            },
            init: function (e) {
                console.log("editor init")
            }
        }
    }
</script>

Is this an known issue?
Regards
Jonas

Tinymce-vue Denial Of Service (DoS) Vulnerability

I scanned the tinymce-vue library on SourceClear and found that it is using out dated mem library, that version of mem is vulnerable to Denial Of Service (DoS), please upgrade to mem version 4.0.0 to fix the issue.

Unable to paste image

paste_data_image attribute doesn't work and I'm unable to make it work even passing the same property as a part of the init object.

I'm trying the above in Chrome.

TinyMCE from npm invisible

When I use this component with a local install of tinymce from npm, the editor doesn't show up.

My custom vue component, using tinymce-vue looks like this:

<template>
    <editor :init="{ plugin: ['paste', 'link']}"></editor>
</template>

<script type="text/javascript">
    import tinymce from 'tinymce/tinymce';
    import 'tinymce/themes/modern/theme';
    import 'tinymce/plugins/paste';
    import 'tinymce/plugins/link';

    require.context('file-loader?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/skins', true, /.*/);

    import Editor from '@tinymce/tinymce-vue';

    export default {
        components: { Editor },
    }
</script>

This component is globally registered and used in a Laravel 5.5 view.

When not using the npm installed version, the cloud version shows up correctly.

When inspecting the html, I can see elements from TinyMCE, but they are hidden, e.g. the div has style="visibility: hidden" and beneath the textarea has style="display: none". Making them manually visible doesn't help, as it's not properly shown. There are no errors in the javascript console nor in the apache2 log.

What am I missing?

Html tags showing

I just added tinymace in my Vue template. I can see the editor when I load the page, however, after I save the records from the text area, I visit the which shows those records and I notice that the html code is ignored. Meaning that I will see the paragraph tags,strongs and etc.

I imported exactly as per the docummentation and in the vue component the field looks like this:

<editor :init="TinyMceInit" v-model="post.description"></editor>
Anything I did not do properly?
Hope someone can help

v-model issue

Hey everyone - Hopefully this is something simple. I can't seem to get v-model working. In the vuejs dev tools if I update the bound model, the 'value' property in the Editor component is updated, however nothing changes in the actual editor. Using Vuejs 2.4.4.

Editor tag:

<editor id="message" name="message" class="wysiwyg-editor" :init="config" v-model="content"></editor>

Vue instance:

new Vue({
    el: '#send-message',
    data: {
        config: tinyMceConfig, 
        content: ''
    },
    components: {
        'editor': Editor,
    }, 
});

If I manually edit the 'content' property on the vue instance, the value property in the Editor component updates, but not the content in the editor. That doesn't seem to be bound to anything.

Thanks,
Ben

TypeError: ctx.$listeners is undefined

<template>
    <div>
        <div @click="editData()" class="form-group">
            <div class="col-sm-3 control-label"><b>Categorie id</b></div>
            <div class="col-sm-9"><input readonly type="text" v-model="categoryDetails.id" class="form-control">
            </div>
        </div>
        <div @click="editData()" class="form-group">
            <div class="col-sm-3 control-label"><b>Categorie naam</b></div>
            <div class="col-sm-9">
                <input v-bind:readonly="!edit" type="text" v-model="categoryDetails.name" class="form-control">
            </div>
        </div>
        <div @click="editData()" class="form-group">
            <div class="col-sm-3 control-label"><b>Meta Titel</b></div>
            <div class="col-sm-9">
                <input v-bind:readonly="!edit" type="text" v-model="categoryDetails.metaTitle" class="form-control">
            </div>
        </div>
        <div @click="editData()" class="form-group">
            <div class="col-sm-3 control-label"><b>Meta Description</b></div>
            <div class="col-sm-9">
                <input v-bind:readonly="!edit" type="text" v-model="categoryDetails.metaDescription"
                       class="form-control"></div>
        </div>
        <div @click="editData()" class="form-group">
            <div class="col-sm-3 control-label"><b>Google Categorie</b></div>
            <div class="col-sm-9">
                <input v-bind:readonly="!edit" type="text" v-model="categoryDetails.google" class="form-control">
            </div>
        </div>
        <div @click="editData()" class="form-group">
            <div class="col-sm-3 control-label"><b>Categorie slug</b></div>
            <div class="col-sm-9">
                <input v-bind:readonly="!edit" type="text" v-model="categoryDetails.slug" class="form-control">
            </div>
        </div>
        <div @click="editData()" class="form-group">
            <div class="col-sm-3 control-label"><b>Categorie Tekst</b></div>
            <div class="col-sm-9">
                <editor v-model="categoryDetails.categoryText" :init="{
                skin_url: '/bundles/backOfficeBundle/style/tinymce',
                content_css: '/css/styles.css',
                content_style: 'body {padding: 5px !important;}',
                width: 650,
                min_height: 400,

                }">

                </editor>
            </div>
        </div>

        <template v-if="edit">
            <button @click="undo()" class="btn btn-danger ">Annuleren</button>
            <button @click="save()" class="btn btn-primary pull-right">Opslaan</button>
        </template>
    </div>
</template>
<script>
    import Editor from '@tinymce/tinymce-vue'
    export default {
        props: {
            categoryDetails: Object,
        },
        data: function() {
            return {
                backupObject: null,
                edit : this.$store.state.edit
            }
        },
        mounted() {
            this.$store.watch(this.$store.getters.getEditValue, value => {
                this.edit = value;
            })
        },
        components : {
            'editor' : Editor
        },
        methods: {
            init() {
                this.backupObject = _.clone(this.categoryDetails)
            },
            save() {
                $.post(Routing.generate('update_category_data', {id: this.categoryDetails.id}),
                    {'updated_category': this.categoryDetails});
                this.backupObject = _.clone(this.categoryDetails);
                this.edit = false;
            },
            undo() {
                this.categoryDetails = _.clone(this.backupObject);
            },
            editData() {
                this.$store.commit('setEdit', {mode: true});
            },
        }
    }
</script>

What could be the prolem ?

Empty p tag inserted when shown initially disabled

I have a page where a user can drag a "text block" element into an editor area and it will create a new instance of the tinymce editor so the user can easily edit the text there. I'm using the editor in the inline mode, and when the component the editor is in is added, the editor is initially set to disabled until the user clicks on the text block, then disabled gets set to false.

When I do it this way, a <p>&nbsp;</p> gets prepended to my value I'm sending to the editor. If I don't disable the editor initially, that empty p tag does not get inserted into the value. Below is some code from the component that is holding the editor:

<template>
<div class="module-text position-relative">
     <editor
           inline
           v-model="module.text"
           :toolbar1="toolbar1"
           :disabled="! isModuleSelected(module.id)"
      >
     </editor>
</div>
</template>

<script>
import 'tinymce';
import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue';
import { mapGetters } from 'vuex';

export default {
       components: {
              Editor
       },

       props: ['module'],

       computed: {
           ...mapGetters('editor', [
                 'isModuleSelected'
           ])
       },

       data () {
             return {
                   toolbar1: 'fontselect | bold italic underline | removeformat | alignleft aligncenter alignright alignjustify'
             }
       }
}
</script>

Initially, the value of module.text is set to <p>I'm a new textblock ready for your content</p>, so I'm just confused as to why the editor is inserting that empty p tag at the beginning of the string when I initially set the editor to be disabled.

This domain is not registered with TinyMCE Cloud. Start a free trial to discover our premium cloud services and pro support.

can some one show me step by step on how to remove this error? i dont want to use tinymce cloud or register anything, all i want is to use tinymce community version.

package-lock.json file should not be in repo

Hi,
I am facing issue with mem library, after checking package.json I found no mem but it is in package-lock.json that is creating issue from SourceClear.

It is always recommended to not push package-lock.json files on github because these -lock files are auto generated on machine when we run npm install.

Owner can you please remove package-lock.json so that many of the issue will be auto resolved.

file_picker_callback

How can I use the file_picker_callback, I could not find it under the Event Binding list.

Editor blank when list DOM changes

The editor seems to just turn blank and uneditable if it's part of a component that is in a v-for statement, and the order of the array changes.

for example:

<my-component v-for="{idx, item} in items"
    v-bind:item="item"
    v-bind:index="idx"
    v-bind:key="idx" />

my-component contains within it an <editor/> instance somewhere, binding with v-model to an item property.

export default {
	components: ['MyComponent'],
	data() {
		return {
			allItems: [...],
		};
	},
	computed: {
		items() {
			return this.allItems.sort((a, b) => a.someCount > b.someCount);
		}
	}
}

If someCount of a given item changes, and thus the order of records changes, whichever tinymce instance's DOM moved, shows a blank area where the text should be, and it cannot be edited.

If I recall correctly, in plain JavaScript Tinymce did this if its DOM was moved, and refresh had to be called manually to fix it. This doesn't seem to happen in Vue.

where langs/zh_CN.js should place?

I had downloaded the folder of Chinese, but I don't know the place of langs. There is my file:

@spocke @fyrkant @jayarjo

Which media manager for Vue integration ?

Hi,

I have a Vue application and I want to integrate a media library into tinymce, when I click on the insert file/image/link buttons. On my non-vue projects I'm using MoxieManager and it's great.
Is it possible and straightforward to use MediaManager in tinymce-vue ? Is there a better alternative ?

thanks.

beforeDestroy hook: "TypeError: a.replace is not a function"

I change the route in the vue-router, and the component is automatically destroyed with this error:

Error in beforeDestroy hook: "TypeError: a.replace is not a function"
found in
--->

I use component:
<editor api-key="..." :init="config" v-model="content" @input="updateData">

how to set base url for tinymce-vue

I use tinymce-vue component Editor like below:
<editor v-model="article.content" api-key="***" :init="editorConfig"></editor>
and it auto download tinymce.min.js from https://cloud.tinymce.com/stable/tinymce.min.js.
But sometime it may download fail.(In China, you know...).
So, how to set my own base url to download the script and other related js file.

I try to add the baseURI in my editorConfig, but it can not work:
editorConfig: { baseURI: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.3/', height: 330, plugins: "image link", // some other settings }

on the mounted set also can not work:
window.tinymce.baseURL = 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.3/';

Trying to load TinyMCE as a standalone (non-cloud) free installation but still get the This domain is not registered message

I have wrapped the call to the tinyMCE inside another VUE component (warapper) called Wysiwyg as below:

   import editor from '@tinymce/tinymce-vue';

    export default {

        name: 'Wysiwyg',

        components: { editor },

    }

This works but show the dreaded message:
This domain is not registered with TinyMCE Cloud. Start a free trial to discover our premium cloud services and pro support.

I don't want to use cloud but want to run the tinyMCE as a standalone editor for my project.

What should I do?

image upload plugin handles Source incorrectly

While I use image upload plugin with images_upload_handler , the returned json.location from backend is like "/Files/xxxx.jpg", and this URL get displayed in the Source item of the plugin window. After I close the image upload plugin window and click the click the plugin button again (with the image selected in the working area) , the Source item becomes "Files/xxxx.jpg", which is incorrect and surely the image will not be displayed in frontend.

How can I self host this?

How can I host the tinymce-vue ?

Multi-word component name

Using as the component name breaks a VueJs styleguide's Priority A (Essential for Error Prevention) rule: https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential

This rule was created by the VueJS core team to follow the W3C Web Components specification for valid custom element names: http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name

This would obviously be a breaking change, but it is extremely important especially since the W3C will not add any new HTML, SVG, or XML elements with hyphens in them in the future.

`contextmenu` prop

Hi 👋

Given that you already support passing plugins and toolbar as props, it would be great if you could add contextmenu.

Cheers,
Markus

Unable to load tinymce myself vs. cloud

I've got tinymce loading outside of a vue component via the tinymce npm package, ie.

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';

import 'tinymce/plugins/paste';
import 'tinymce/plugins/media';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/lists';
import 'tinymce-line-height-plugin/lineheight/plugin';
import 'tinymce/plugins/link';
import 'tinymce/plugins/table';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/print';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/image';

tinymce.init({
    selector: '.tinymce',
    theme: 'modern',
    menubar: false,
    plugins: ['paste', 'image', 'media', 'textcolor', 'lists', 'lineheight', 'link', 'table', 'hr', 'print', 'autosave', 'fullscreen', 'image'],
    skin_url: '/tinymce/skins/lightgray',
    branding: false,
    toolbar: [
        'bold italic underline removeformat | strikethrough superscript subscript | fontsizeselect | backcolor | bullist numlist | styleselect | lineheightselect',
        'link image media table hr | fullscreen undo redo print restoredraft'
    ]
});

but when I try to use <editor> with a Vue component with something like:

<editor id="evidence-editor" class="tinymce">

tinymce-vue isn't detecting that I'm attaching tinymce myself via the class. Also tried changing the selector to use the evidence-editor ID instead, but regardless it'll attached tinymce twice with one displaying the This domain is not registered with TinyMCE Cloud" error. I even tried setting window.tinymce = tinymce to satisfy the getTinymce function within tinymce-vue.js.

Is there something I'm missing to be able to load tinymce myself via the npm package?

Editor becomes unusable with keep-alive

The editor body becomes white (No text) and uneditable when navigating to another keep-alive page and then back to the original keep-alive page with the editor. The source code popup shows the original HTML code.

Example: https://codesandbox.io/s/qq0zw6o5q

tinymce opens with empty head and body tags

I'm loading the tinymce vue component in a modal. The first time the modal is opened tinymce works fine. If the modal is then closed (removed from the DOM) and re-opened (added to the DOM), tinymce appears to load, but I can't click in the iframe. Upon inspection, the iframe's <head> and <body> tags are empty.

I found similar issues (#10, #32) which suggest that there are problems when the iframe is removed from the DOM.

The parent component's created, mounted and destroyed lifecycle hooks are being fired correctly when the modal is opened/closed. And the tinymce component's @onInit event is firing each time the modal is loaded.

I tried using the suggested code in #10 in the mounted and destroyed lifecycle hooks to no avail:

mounted () {
	tinymce.EditorManager.execCommand('mceAddEditor', false, this.controlId);
},
destroyed () {
	tinymce.EditorManager.execCommand('mceRemoveEditor', false, this.controlId);
},

Is this a bug or expected behaviour? If it's the latter, is there a recommended approach for tearing down the tinymce control when the vue component is removed from the DOM?

Plugin assets not found

Hello!

I use tinymce without cloud support the recommended way:

/* core */
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
/* some plugins */
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/emoticons';
/* tinymce-vue */
import Editor from '@tinymce/tinymce-vue';

I use the following configuration:

{
skin_url: '/_assets/tinymce/skins/lightgray',
language_url: '/_assets/tinymce/langs/de.js',
language: 'de',
plugins: ['emoticons'],
menubar: 'file edit view',
toolbar: 'emoticons'
}

I also copied the skins folder as described in the official documentation.

The problem now is that all assets of plugins are NOT found, because I have to place the skin and the language file inside a subfolder.

In order to get the assets of the plugins (e.g. plugins/emoticons/img/smiley-tongue-out.gif) to work, I have to copy the whole plugins folder to _assets/tinymce/plugins, correct?

Then how do I specifiy a custom plugin url path like I did for language_url and skin_url?

Tinymce custom dialog with Vue component

this is the doc for Create Custom Dialogs.
I am using custom dialog on my editor, Can I want to use Vue component as the body of the dialog,
like this:
editor.windowManager.open({ title: "Dialog title", url: "<vue-component><vue-component>", // or body: "<vue-component><vue-component>" });

setting images_upload_url doesn't show upload tab on image dialog

https://www.tiny.cloud/docs/demo/local-upload/

Editor(:init="{ images_upload_url: 'upload.php' }")

the init images_upload_url setting doesn't work as expected.
there should be a Upload tab on insert/edit image dialog, but actually not

Can't input after switch child route with Tinymce in iview Modal

Hello , I put the tinymce in the sub page，and put it in iview modal , every time I refresh the whole page, tinymce can work normally.
But if I switch to another child router, then switch back. I will not be able to enter anything in tinymce and tinymce body content will become blank.
And there is no any error information.
And all element id in the tinymce of the modal will change

This is my simple demo source code：
https://github.com/zorc/iview-modal-and-tinymce

This is my environment:

"@tinymce/tinymce-vue": "^1.0.8",
"@types/tinymce": "^4.5.16",
"tinymce": "^4.8.2",
"vue": "^2.5.16",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^6.0.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
"typescript": "^3.0.1"
"iview": "^2.13.1",

This is my code:

<template>
    <div>
        <Modal
                :value="value"
                @on-visible-change="visibleChange"
        >
            <editor v-model="text" :init="tinymceInit"></editor>
        </Modal>
    </div>
</template>
<script lang="ts">
    import {Component, Vue, Inject, Prop, Watch} from 'vue-property-decorator';
    import Util from '../../../lib/util'
    import AbpBase from '../../../lib/abpbase'
    import BlogContent from '@/store/entities/blogContent';
    import tinymce from 'tinymce'
    import 'tinymce/themes/modern/theme'
    import Editor from '@tinymce/tinymce-vue'

    @Component({
        components: {'editor': Editor}
    })
    export default class EditBlogContent extends AbpBase {
        @Prop({type: Boolean, default: false}) value: boolean;

        visibleChange(value: boolean) {
            if (!value) {
                this.$emit('input', value);
            }
        }

        text = 'This is text';

        blogContent: BlogContent = new BlogContent();

        tinymceInit = {
            skin_url: '/dist/tinymce/skins/lightgray',
            height: 300
        };

        mounted() {
            tinymce.init(this.tinymceInit);
        }

    }
</script>

Event binding case-sensitivity

I'm having trouble getting event binding to work properly. When I dig in deeper, I am seeing that the event handler is not being bound properly due to a case sensitivity issue. I'm using Vue.js 2.5.17, tinymce 4.8.5, testing in Chrome Version 70.0.3538.77 on MacOS High Sierra. I am hosting the tinymce-vue .js code within my application.

Template:

<editor v-model="audience"
    :init="{branding: false, menubar: false}"
     plugins="image, link, lists, wordcount"
     @onBlur="blur"></editor>

App:

components: {
    'editor': Editor
},
methods: {
    'blur': function(evt) {
        console.log('blur');
    }
}

Detail:
In my setup, the component is working as expected from a UI and model perspective. The tinymce editor is instantiated. And, the model values are correct. But, event binding does not work. The blur function is never invoked.

Tracing through the code, I see a problem in the isValidKey function

const isValidKey = (key: string) => validEvents.indexOf(key) !== -1;

The passed key parameter is lowercase and fails the test validEvents.indexOf(key) !== -1.

Manually lowercasing the validEvents array entry to onblur from onBlur fixes the issue.

Has anyone else experienced this issue?

Custom Toolbar Button

how to add a custom button to the toolbar like https://www.tiny.cloud/docs/demo/custom-toolbar-button ?

webpack build bale error

        import tinymce from 'tinymce/tinymce';
        import 'tinymce/themes/modern/theme';
        import 'tinymce/plugins/link';
        import 'tinymce/plugins/image';
        import 'tinymce/plugins/media';
        import 'tinymce/plugins/code';
        import 'tinymce/plugins/table';
        import 'tinymce/plugins/lists';
        import 'tinymce/plugins/contextmenu';
        import 'tinymce/plugins/wordcount';
        import 'tinymce/plugins/colorpicker';
       import 'tinymce/plugins/textcolor';
       import '../tinymce/plugin';
       // import TinymceEditor from '@tinymce/tinymce-vue';
      // console.log(TinymceEditor);
     const TinymceEditor = require('@tinymce/tinymce-vue').default;
      console.log(TinymceEditor);

don't import @tinymce/tinymce-vue this projec run well,
import @tinymce/tinymce-vue this projec can't run.
error log: vendor.bundle.js?v=1.7805:36 Uncaught Error: Wrong number of arguments to struct. Expected "[0]", got 2 arguments
at vendor.bundle.js?v=1.7805:36
at bm (vendor.bundle.js?v=1.7805:36)
at Om (vendor.bundle.js?v=1.7805:36)
at Nm (vendor.bundle.js?v=1.7805:36)
at new rA (vendor.bundle.js?v=1.7805:36)
at d (vendor.bundle.js?v=1.7805:36)
at Array. (vendor.bundle.js?v=1.7805:36)
at qn (vendor.bundle.js?v=1.7805:36)
at Object.c (vendor.bundle.js?v=1.7805:36)
at s (vendor.bundle.js?v=1.7805:36)

Specify Version

I need to support Internet Explorer 10. How do I specify that I need the 4.5.X branch version?

setting images_upload_url doesn't show upload tab on image dialog

This is related to #37 but it is closed

When I set images_upload_url the upload tab isn't showing. Anyone any idea's why?

tinymce is not defined

I need to create a custom plugin as the doc here,
but I can't access the tinymce object.
I tried
require("tinymce");
but there is error occurred: Uncaught SyntaxError: Unexpected token <

Request to support a disabled prop

Hello,

Thanks for the official tinymce-vue wrapper. Would it be possible to add support for a disabled prop?

We have developed our own wrapper a while ago and we are considering migrating to this wrapper, but we need a disabled prop like this.

<editor :disabled="isDisabled" v-model="myData" :init="tinyMceConfig"></editor>

Here's are some snippets on how we have implemented the disabled prop in our wrapper:

mounted: function () {
      var component = this
      tinymce.init({
          // ....config
      })
      this.handleDisabledProp(this.disabled)
    },
methods: {
       handleDisabledProp: function (disabled) {
        if (disabled) {
          tinymce.get(this.$el.id).setMode('readonly')
          tinymce.activeEditor.getBody().setAttribute('contenteditable', false)
        } else {
          tinymce.get(this.$el.id).setMode('design')
        }
      }
},
watch: {
      disabled() {
        this.handleDisabledProp(this.disabled)
      }
    },