Tinymce Editor Component for Vue.js

vue-tinymce-editor

A Vue.js TinyMCE Editor Component which provides easy use of the TinyMCE editor for Vue developers. TinyMCE is the world's #1 web-based HTML WYSIWYG editor control.

Live Demo

You can integrate the TinyMCE editor with ease and use the available options from the official editor docs along with the props that exist in the component.

Take a look at the example below.

Example

To start working with the TinyMCE Editor Component use the following command to install it.

npm install vue-tinymce-editor

OR

yarn add vue-tinymce-editor

If used as a global component

import tinymce from 'vue-tinymce-editor'

Vue.component('tinymce', tinymce)

Props

  • id : id of component's textarea
  • toolbar1 : Toolbar 1 of tinymce
  • toolbar2 : Toolbar 2 of tinymce
  • plugins : plugins of tinymce you need to load
  • other_options : other tinymce options. you can also override our initial options
<template>
    <tinymce id="d1" 
            :other_options="tinyOptions" 
            v-model="editorContent"
    ></tinymce>
</template>

<script>
export default {
data() {
    return {
            editorContent: '<h2 style="color: #339966;">Hi there from TinyMCE for Vue.js.</h2> <p>&nbsp;</p> <p><span>Hey y`all.</span></p>',
            tinyOptions: {
                    'height': 500
            }
    }
}
}
</script>

If you are interested in more or you have any bugs and suggestions, click here. That's it!