Vue2-TinyMCE-Editor

A TinyMCE WYSIWYG editor component for your Vue products

This project is an upgrade version of vue-tinymce-editor.

I updated version to vue(2.6.11) and tinymce(5.6.2) and added new features.

Install

You can use Yarn or NPM

npm install vue2-tinymce-editor

OR

yarn add vue2-tinymce-editor

Usage

<template>
  <div id="app">
    <vue2-tinymce-editor v-model="content"></vue2-tinymce-editor>
  </div>
</template>

<script>
import { Vue2TinymceEditor } from "vue2-tinymce-editor";

export default {
  components: {
    Vue2TinymceEditor
  },

  data() {
    return {
      content: "<h1>Some initial content</h1>"
    };
  }
};

Props

| Name | Type | Default | Description | | --------------------- | --------- | ----------------- | ------------------------------------------------------------- | | id | String | - | Editor container id | | v-model | String | - | The content or data property you wish to bind with it | | width | Numeric | auto | Width of the editor container | | height | Numeric | 300px | Height of the editor container | | options | Object | - | Configure object for advanced use | | Set v-model to the the content or data property you wish to bind it to |

Events

| Name | Parameters | Description | | --------------------- | ---------------------------- | ---------------------------------------------------------------| | editorChange | Event | Emitted on TinyMCE's onchange event | | editorInit | Event | Emitted when editor is initialized |

Advanced Usage

<template>
    <div id="app">
        <vue2-tinymce-editor :id="your-id" v-model="content" :width:="500" :height="300" :options="options"></vue2-tinymce-editor>
    </div>
</template>

<script>
import { Vue2TinymceEditor } from "vue2-tinymce-editor";

export default {
    components: {
        Vue2TinymceEditor
    },

    data() {
        return {
            content: "<h1>Some initial content</h1>",
            options:{
                    menubar:false,
                    plugins: 'advlist autolink charmap code codesample directionality emoticons',
                    toolbar1:'fontselect | fontsizeselect | formatselect | bold italic underline strikethrough forecolor backcolor',
                    toolbar2:'alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link table removeformat code',
                    ......
                    // any other tinymce options
                  }
            };
    }
};

TinyMCE

Supported Plugins

• Advanced List
• Anchor
• Autolink
• Autoresize
• Autosave
• BBCode
• Character Map
• Code
• Code Sample
• Directionality
• Emoticons
• Full Page
• Full Screen
• Help
• Horizontal Rule
• Image
• Image Tools
• Import CSS
• Insert Date/Time
• Legacy Output
• Link
• Lists
• Media
• Nonbreaking Space
• Noneditable
• Page Break
• Paste
• Preview
• Print
• Quick Toolbars
• Save
• Search and Replace
• Spell Checker
• Tab Focus
• Table
• Template
• Text Pattern
• Table of Contents
• Visual Blocks
• Visual Characters
• Word Count

Access to the editor

You can access the editor by add a ref:

<vue2-tinymce-editor id="d1" v-model="data" ref="te"></vue2-tinymce-editor>

Then access the editor like this:

this.$refs.te.editor

License

MIT