Package Exports

atfx-tinymce
atfx-tinymce/dist/atfx-tinymce.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (atfx-tinymce) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ATFX TinyMCE Editor

A Vue 2 TinyMCE editor component compatible with Element UI.

Installation

npm install atfx-tinymce --save

Requirements

Vue 2.6+
Element UI 2.10+
TinyMCE (loaded from CDN or locally)

Usage

Global Registration

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Tinymce from 'atfx-tinymce';

Vue.use(ElementUI);
Vue.use(Tinymce);

Local Registration

import { Tinymce } from 'atfx-tinymce';

export default {
  components: {
    Tinymce
  }
}

Basic Usage

<template>
  <div>
    <tinymce v-model="content" :height="300" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '<p>Hello World!</p>'
    }
  }
}
</script>

TinyMCE Script

This component requires TinyMCE to be loaded. You can either:

Add TinyMCE script to your HTML:

<script src="/static/js/tinymce/tinymce.min.js"></script>

Or load it from a CDN:

<script src="https://cdn.tiny.cloud/1/YOUR_API_KEY/tinymce/5/tinymce.min.js"></script>

Props

Prop	Type	Default	Description
value / v-model	String	''	Editor content
id	String	Random ID	Editor instance ID
toolbar	Array	See below	Toolbar buttons
menubar	String	''	Menu bar items
height	Number/String	360	Editor height
width	Number/String	'auto'	Editor width
language	String	'us'	Editor language (cn, hk, us, etc.)
customUploadUrl	String	''	URL for file uploads
customHeaders	Object	{}	Headers for upload requests
uploadDialogTitle	String	'上传文件'	Upload dialog title
uploadText1	String	'单击或将文件拖到此处上传'	Upload text line 1
uploadText2	String	'(支持jpg、jpeg、png、gif、pdf格式)'	Upload text line 2

'forecolor backcolor bold italic underline strikethrough alignleft aligncenter alignright outdent indent fileUpload undo redo'

Methods

Method	Parameters	Description
setContent	(content: String)	Set editor content
getContent	() => String	Get editor content
getEditor	() => Editor Instance	Get TinyMCE editor instance

Events

Event	Parameters	Description
input	(content: String)	Triggered when content changes

File Upload

The component includes a built-in file upload feature that supports:

Images (jpg, jpeg, png, gif)
PDF files

The upload dialog appears when clicking the "fileUpload" button in the toolbar.

Language Support

The component supports the following languages:

Chinese (Simplified): 'cn'
Chinese (Traditional): 'hk'
English (US): 'us'
Arabic: 'ar'
Urdu: 'ur'
Indonesian: 'id'
Japanese: 'jp'
Korean: 'ko'
Malaysian: 'ms', 'my'
Thai: 'th'
Vietnamese: 'vn'
Russian: 'ru'
Hindi: 'hi'

License

MIT

atfx-tinymce