https://github.com/mbouclas/tinymce-vue-2

A vue 2 component for TinyMCE
https://github.com/mbouclas/tinymce-vue-2

component javascript tinymce vuejs2

Last synced: 13 days ago
JSON representation

A vue 2 component for TinyMCE

• Host: GitHub
• URL: https://github.com/mbouclas/tinymce-vue-2
• Owner: mbouclas
• Created: 2017-01-18T14:09:48.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-26T14:43:35.000Z (over 6 years ago)
• Last Synced: 2024-04-14T18:33:25.631Z (2 months ago)
• Topics: component, javascript, tinymce, vuejs2
• Language: Vue
• Size: 5.86 KB
• Stars: 47
• Watchers: 5
• Forks: 15
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vue-refactor - tinymce-vue-2

README

        
# 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](#examples) on how to use it in your template

# Examples

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

```

```

Check the binding by doing something like `
` anywhere in your

template.


Check bellow on how to configure and extend the editor.

### Changing the menubar

[Read the documentation first](https://www.tinymce.com/docs/configure/editor-appearance/#menubar)

Pass a prop called menubar which is either a string or a string variable. It can either be

a string or a boolean

```

```

### Changing the toolbar

[Read the documentation first](https://www.tinymce.com/docs/configure/editor-appearance/#toolbar)

Pass a prop called toolbar which is either a string or a string variable

to set the toolbar

```

```

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](https://www.tinymce.com/docs/configure/editor-appearance)

```

```

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

with the `tinymce` one