Skip to content
A vue 2 component for TinyMCE
Vue JavaScript
Branch: master
Clone or download
Latest commit 0877bbe Sep 26, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc Initial commit Jan 19, 2017
.gitignore Initial commit Jan 19, 2017
README.md Initial commit Jan 19, 2017
TinyMce.vue Added baseURL config prop Sep 9, 2017
index.js Initial commit Jan 19, 2017
package.json Version bump Sep 26, 2017

README.md

tinymce-vue-2

A vue 2 component for TinyMCE.

Install

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

Examples

Using the default options, you just need to pass an id and a model

<tiny-mce id="description" v-model="description"></tiny-mce>

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

<tiny-mce id="descriptionLong"
        v-model="descriptionLong"
        :toolbar="'undo redo'"
></tiny-mce>

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

<tiny-mce id="descriptionLong"
        v-model="descriptionLong"
        :toolbar="'undo redo'"
></tiny-mce>

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

<tiny-mce id="descriptionLong"
        v-model="descriptionLong"
        :other-props="{min_height:500, elementpath: false, allow_conditional_comments: false}"
></tiny-mce>

This allows you to freely configure the editor since all it does is merging your object with the tinymce one

You can’t perform that action at this time.