- Notifications
You must be signed in to change notification settings - Fork4
A simple and powerful package for easy usage of tinymce in Vue.js project.
License
NotificationsYou must be signed in to change notification settings
m3esma/vue-easy-tinymce
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple and powerful package for easy usage of tinymce inVue.js project.
- v-model Support
- Multiple instance editor support
- Configurable options
- Binding initial content (from v-model)
Run the command below to install this package:
npm install vue-easy-tinymce --save
Or
Download or clone this repository and copydist/vue-easy-tinymce.min.js file to your project.
Or
Use CDN provider:
<scriptsrc="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script>
In the first step, putvue-easy-tinymce in your project.
window.Vue=require('vue');// npm install vue --save//... etc data or package(s)varVueEasyTinyMCE=require('vue-easy-tinymce');
<scriptsrc="examples/tinymce/tinymce.min.js"></script><!-- TinyMCE core --><!-- Or CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script> --><scriptsrc="examples/vue/vue.min.js"></script><!-- Vue.js core --><!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue"></script> --><scriptsrc="dist/vue-easy-tinymce.min.js"></script><!-- VueEasyTinyMCE module--><!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script> --><scriptsrc="examples/index.js"></script><!-- Your project js code -->
In the next step, use theVueEasyTinyMCE in vue instance as a component
newVue({// ,...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.component('tinymce',VueEasyTinyMCE);newVue({// ...});
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:
<script>varconfigToolbar1='undo redo | bold';</script><tinymce:toolbar1="configToolbar1"></tinymce>
- Inside
<tinymce></tinymce>By binding value directly.Example:
<tinymce:toolbar1="'undo redo | bold'"></tinymce>
| Prop | Type | Default | Required |
|---|---|---|---|
:plugins | Array | [ ] | No |
:toolbar1 | String | ' ' | No |
:toolbar2 | String | ' ' | No |
:other | Object | { } | No |
Config value example:
varmyPlugins=['advlist autolink lists link image charmap print preview anchor textcolor','searchreplace visualblocks code fullscreen','insertdatetime media table contextmenu paste code directionality template colorpicker textpattern'];varmyToolbar1='undo redo | bold italic strikethrough | forecolor backcolor | template link | bullist numlist | ltr rtl | removeformat';varmyToolbar2='';varmyOtherOptions={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.
<tinymcev-model="myModel":plugins="myPlugins":toolbar1="myToolbar1":toolbar2="myToolbar2":other="myOtherOptions"></tinymce>
At first read theUsage section and then follow below code:
newVue({el:'#app',data:{/* Your data and models here */myModel:'<p><span>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:{getModelValue:function(){alert(this.myModel);},changeModelValue:function(){this.myModel='<p>Change value programmability</p>';},clearModelValue:function(){this.myModel='';}}});
<!doctype html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>vue-easy-tinymce</title><linkrel="stylesheet"href="css/style.css"></head><body><divid="app"><imgsrc="logo.png"><tinymcev-model="myModel":plugins="myPlugins":toolbar1="myToolbar1":toolbar2="myToolbar2":other="myOtherOptions"></tinymce><br><button@click="getModelValue()">Get current model value</button><button@click="changeModelValue()">Change model value programmability</button><button@click="clearModelValue()">Clear model value</button><br><br><atarget="_blank"href="https://github.com/m3esma/vue-easy-tinymce">vue-easy-tinymce</a></div><scriptsrc="tinymce/tinymce.min.js"></script><!-- TinyMCE core --><!-- Or CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script> --><scriptsrc="vue/vue.min.js"></script><!-- Vue.js core --><!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue"></script> --><scriptsrc="../dist/vue-easy-tinymce.min.js"></script><!-- VueEasyTinyMCE module--><!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script> --><scriptsrc="index.js"></script><!-- Your project js code --></body></html>
In the above example, you can use node package manager (npm) instead of scripts. it explained in theUsage section.
Download or clone this respository and openindex.html orindex2.html in examples directory.
If you have a feature request, please add it as an issue or make a pull request.
Mehdi Esmaeili
Released under theMIT License.
About
A simple and powerful package for easy usage of tinymce in Vue.js project.
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published