@deveodk/vue-tinymce

An easy to use tinyMCE wrapper for vue.js, without use of jquery. Plug and play style with translation support.

Demo

See a functioning demo deveo demo site

Installation

npm install --save @deveodk/vue-tinymce

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import vueTinymce from '@deveodk/vue-tinymce'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import '@deveodk/vue-tinymce/dist/@deveodk/vue-tinymce.css'
Vue.use(vueTinymce)

Browser

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/@deveodk/vue-tinymce/dist/@deveodk/vue-tinymce.css"></link>
<script src="https://unpkg.com/@deveodk/vue-tinymce"></script>

Example

Using the tinyMCE wrapper is easy

# Include the tag in your html
<vue-tinymce v-model="editor"></vue-tinymce>

# The height can be set by a prop
<vue-tinymce v-model="editor" height="300"></vue-tinymce>

Events

The editor will emit an change event you can listen for

# You can listen and fire an custom method by doing
<vue-tinymce v-model="editor" @change="MyMethodHere()"></vue-tinymce>

Translations

You can add any language that tinyMCE supports.

# If you want to add localization
import tinyMCE from '@deveodk/vue-tinymce'
import '@deveodk/vue-tinymce/dist/@deveodk/vue-tinymce.css'

# Just add the language from the packages translation foler
# Example using danish
# List of available languages 
# https://www.tinymce.com/download/language-packages/

import '@deveodk/vue-tinymce/translations/da'
Vue.use(tinyMCE)

License

MIT