包详细信息

vue2-tinymce-editor

alex31n1.6kMIT0.0.1

A TinyMCE WYSIWYG editor component for your Vue products

vue, vue-component, vue2, html editor

自述文件

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

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