vue-easy-tinymce
A simple and powerful package for easy usage of tinymce in Vue.js project.
Features
- v-model Support
- Multiple instance editor support
- Configurable options
- Binding initial content (from v-model)
Installation
Run the command below to install this package:
npm install vue-easy-tinymce --save
Or
Download or clone this repository and copy dist/vue-easy-tinymce.min.js
file to your project.
Or
Use CDN provider:
Usage
In the first step, put vue-easy-tinymce
in your project.
Node.js Bundler (Webpack, Rollup, Browserify)
windowVue = ; // npm install vue --save//... etc data or package(s)var VueEasyTinyMCE = ;
Browser loading
<!-- TinyMCE core --><!-- Or CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script> --> <!-- Vue.js core --><!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> <!-- VueEasyTinyMCE module--><!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script> --> <!-- Your project js code -->
In the next step, use the VueEasyTinyMCE
in vue instance as a component
// ,... components: // <tinymce> tag available in parent's template 'tinymce': VueEasyTinyMCE data: /* Your data and models here */ myModel: '<p>initial value</p>' /* Config can be declare here */ myPlugins : myToolbar1: '' myToolbar2 : '' myOtherOptions : {} // ,...;
Or
Vue; // ...;
Config
The VueEasyTinyMCE configuration can be defined in:
- Inside Vue instance in data section. Example: Explained in above.
- Inside
<script></script>
tag in above of component. Example:
- Inside
<tinymce></tinymce>
By binding value directly. Example:
props
Prop | Type | Default | Required |
---|---|---|---|
:plugins |
Array | [ ] | No |
:toolbar1 |
String | ' ' | No |
:toolbar2 |
String | ' ' | No |
:other |
Object | { } | No |
Config value example:
var myPlugins = 'advlist autolink lists link image charmap print preview anchor textcolor' 'searchreplace visualblocks code fullscreen' 'insertdatetime media table contextmenu paste code directionality template colorpicker textpattern'; var myToolbar1 = 'undo redo | bold italic strikethrough | forecolor backcolor | template link | bullist numlist | ltr rtl | removeformat'; var myToolbar2 = ''; var myOtherOptions = height: 200 templates: title: 'Test template 1' content: 'Test 1' title: 'Test template 2' content: 'Test 2' //,content_css: 'css/tinymce-content.css' //,width:600, //directionality: 'rtl', //theme: 'modern', //menubar: false //, etc...;
Finally, you can easily use the <tinymce></tinymce>
in your own view.
Example
At first read the Usage section and then follow below code:
index.js
el: '#app' data: /* Your data and models here */ myModel: '<p><span style="color: #ff0000;">Initial Value</span></p>' /* Config can be declare here */ myPlugins : 'advlist autolink lists link image charmap print preview anchor textcolor' 'searchreplace visualblocks code fullscreen' 'insertdatetime media table contextmenu paste code directionality template colorpicker textpattern' myToolbar1: 'undo redo | bold italic strikethrough | forecolor backcolor | template link | bullist numlist | ltr rtl | removeformat' myToolbar2 : '' myOtherOptions : height: 200 templates: title: 'Test template 1' content: 'Test 1' title: 'Test template 2' content: 'Test 2' content_css: 'css/tinymce-content.css' //,width:600, //directionality: 'rtl', //theme: 'modern', //menubar: false //, etc... components: 'tinymce': VueEasyTinyMCE methods: { ; } { thismyModel = '<p>Change value programmability</p>'; } { thismyModel = ''; } ;
index.html
vue-easy-tinymce Get current model value Change model value programmability Clear model value vue-easy-tinymce <!-- TinyMCE core --><!-- Or CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script> --> <!-- Vue.js core --><!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> <!-- VueEasyTinyMCE module--><!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script> --> <!-- Your project js code -->
In the above example, you can use node package manager (npm) instead of scripts. it explained in the Usage section.
Demo
Download or clone this respository and open index.html
or index2.html
in examples directory.
Contribute
If you have a feature request, please add it as an issue or make a pull request.
Authors
Mehdi Esmaeili
License
Released under the MIT License.