vue2-tinymce-editor

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

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