mbouclas / tinymce-vue-2

A vue 2 component for TinyMCE

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

tinymce-vue-2's Issues

Can't get it to work with nuxt

I am getting this error NuxtServerError
render function or template not defined in component: anonymous

Tinymce.js plugin
`import Vue from 'vue'
import TinyMCE from 'tinymce-vue-2'
import Theme from 'tinymce/themes/modern/theme'

if (process.env.BROWSER) {
window.Theme = Theme
}
Vue.component('tinymce', TinyMCE)`

nuxt.config.js
loaders: [ { test: require.resolve('tinymce/tinymce'), loader: 'expose-loader?tinyMCE!expose-loader?$' } ], css: [ 'tinymce/skins/lightgray/skin.min.css', 'tinymce/skins/lightgray/content.min.css' ], plugins: [ { src: '~/plugins/tinymce.js', ssr: false } ], plugins: [ new webpack.ProvidePlugin({ 'tinymce': 'tinymce', }) ]

Latest version on yarn/npm is 0.0.4

As the title says, I think the new version hasn't been pushed to npm/yarn.

window.tinymce ?

Hi,

First, thanks for your plugin.

Reading your doc, i don't know what do you mean when you say : "Make sure that window.tinymce is present or it will not work" ?

Can you give a concret exemple of how can i use your pluginwith window.tinymce present ?

Thanks !

License

What license does this go under? LGPL?

Error: Couldn't find preset "es2015" relative to directory "E:\\sites\\vuejs-two\\Vue-Helper-Form\\node_modules\\tinymce-vue-2"

Hi Mbouclas,
Your module looks great, but i have this error below when i import your module
Error: Couldn't find preset "es2015" relative to directory "E:\sites\vuejs-two\Vue-Helper-Form\node_modules\tinymce-vue-2"

I'm sure we just have to add this lines to your package.json :
"devDependencies": {
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0"
}

How we can fix this issue ?
Many thanks

Text is being Inverted while writing like -- hat be tah

tinymce is not defined

try to install and test found that
tinymce is not defined
and its really not defined in code

Couldn't find preset "es2015" relative to directory .....

When i import your package: import TinyMCE from 'tinymce-vue-2' to main.js and add it to global component, i'm using Vue.component('tiny-mce', TinyMCE) but CI show me this error: Couldn't find preset "es2015" relative to directory .....

adding tinymce plugins

This is not an issue how do you pass plugins to the component to customize toolbar ie color picker and image upload

Thank ou in advance

Two way binding doesn't work?

If you have some thing as follows:

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

If you update description outside of tinymce editor, then tinymce editor does not reflect the changed value.

It only seems to work one way i.e. changes made inside tinymce will update the description but not the other way round.

When I reset description outside of tinymce how can I update tinymce to reflect the same?

How to change language?

How to change language?