Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

tinymce-vue-2

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Issues
File Explorer

Advanced tools

tinymce-vue-2

A vue 2 component for TinyMCE

    0.0.5latest

Version published
Maintainers
1
Yearly downloads
8,148
increased by22.27%

Weekly downloads

Readme

Source

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

Keywords

FAQs

What is tinymce-vue-2?

A vue 2 component for TinyMCE

Is tinymce-vue-2 popular?

The npm package tinymce-vue-2 receives a total of 156 weekly downloads. As such, tinymce-vue-2 popularity was classified as not popular.

Is tinymce-vue-2 well maintained?

We found that tinymce-vue-2 demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 06 Oct 2017
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc