0.0.1 • Published 3 years ago

vue2-tinymce-editor v0.0.1

Weekly downloads
4
License
MIT
Repository
github
Last release
3 years ago

Vue2-TinyMCE-Editor

A TinyMCE WYSIWYG editor component for your Vue products

Vue2-TinyMCE-Editor

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

NameTypeDefaultDescription
idString-Editor container id
v-modelString-The content or data property you wish to bind with it
widthNumericautoWidth of the editor container
heightNumeric300pxHeight of the editor container
optionsObject-Configure object for advanced useSet v-model to the the content or data property you wish to bind it to

Events

NameParametersDescription
editorChangeEventEmitted on TinyMCE's onchange event
editorInitEventEmitted 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