A vue 2 component for TinyMCE

Downloads in past


0.0.56 years ago7 years agoMinified + gzip package size for tinymce-vue-2 in KB


A vue 2 component for TinyMCE.
npm install tinymce-vue-2
How to use
  • Make sure that window.tinymce is present or it will not work
  • Then in your code just import it like so : import TinyMCE from 'tinymce-vue-2';
  • Finally, added to your component as components. If you want it globally available
you can just to this : Vue.component('tiny-mce', TinyMCE);
  • Check the examples on how to use it in your template
Using the default options, you just need to pass an id and a model ``` ``` Check the binding by doing something like <div v-html="description"></div> anywhere in your template. Check bellow on how to configure and extend the editor.

Changing the menubar

Read the documentation first Pass a prop called menubar which is either a string or a string variable. It can either be a string or a boolean ``` v-model="descriptionLong"
:toolbar="'undo redo'"
> ```

Changing the toolbar

Read the documentation first Pass a prop called toolbar which is either a string or a string variable to set the toolbar ``` v-model="descriptionLong"
:toolbar="'undo redo'"
> ``` It can also be an array which will set multiple toolbars ```
'undo redo | styleselect | bold italic | link image',
'alignleft aligncenter alignright'
``` or even a boolean like false to disable it

Passing other configuration options

You can pass any of the documented options to the editor using the otherProps property like so Read the documentation first ``` v-model="descriptionLong"
:other-props="{min_height:500, elementpath: false, allow_conditional_comments: false}"
> ``` This allows you to freely configure the editor since all it does is merging your object with the tinymce one