├── .babelrc
├── .gitignore
├── README.md
├── TinyMce.vue
├── index.js
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["es2015", "stage-2"],
 3 |   "plugins": ["transform-runtime"],
 4 |   "comments": false,
 5 |   "env": {
 6 |     "test": {
 7 |       "plugins": [ "istanbul" ]
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tinymce-vue-2
 2 | A vue 2 component for TinyMCE.
 3 | # Install
 4 | `npm install tinymce-vue-2`
 5 | 
 6 | # How to use
 7 | * Make sure that window.tinymce is present or it will not work
 8 | * Then in your code just import it like so : `import TinyMCE from 'tinymce-vue-2';`
 9 | * Finally, added to your component as components. If you want it globally available
10 | you can just to this : `Vue.component('tiny-mce', TinyMCE);`
11 | * Check the [examples](#examples) on how to use it in your template
12 | 
13 | # Examples
14 | Using the default options, you just need to pass an id and a model
15 | ```
16 | <tiny-mce id="description" v-model="description"></tiny-mce>
17 | ```
18 | 
19 | Check the binding by doing something like `<div v-html="description"></div>` anywhere in your
20 | template.
21 | 
22 | Check bellow on how to configure and extend the editor.
23 | 
24 | ### Changing the menubar
25 | [Read the documentation first](https://www.tinymce.com/docs/configure/editor-appearance/#menubar)
26 | 
27 | Pass a prop called menubar which is either a string or a string variable. It can either be
28 | a string or a boolean
29 | 
30 | ```
31 | <tiny-mce id="descriptionLong"
32 |         v-model="descriptionLong"
33 |         :toolbar="'undo redo'"
34 | ></tiny-mce>
35 | ```
36 | 
37 | ### Changing the toolbar
38 | [Read the documentation first](https://www.tinymce.com/docs/configure/editor-appearance/#toolbar)
39 | 
40 | Pass a prop called toolbar which is either a string or a string variable
41 | to set the toolbar
42 | ```
43 | <tiny-mce id="descriptionLong"
44 |         v-model="descriptionLong"
45 |         :toolbar="'undo redo'"
46 | ></tiny-mce>
47 | ```
48 | 
49 | It can also be an array which will set multiple toolbars
50 | ```
51 | [
52 |     'undo redo | styleselect | bold italic | link image',
53 |     'alignleft aligncenter alignright'
54 |   ]
55 | ```
56 | 
57 | or even a boolean like `false` to disable it
58 | 
59 | ### Passing other configuration options
60 | You can pass any of the documented options to the editor using the otherProps property like so
61 | 
62 | [Read the documentation first](https://www.tinymce.com/docs/configure/editor-appearance)
63 | 
64 | 
65 | ```
66 | <tiny-mce id="descriptionLong"
67 |         v-model="descriptionLong"
68 |         :other-props="{min_height:500, elementpath: false, allow_conditional_comments: false}"
69 | ></tiny-mce>
70 | ```
71 | 
72 | This allows you to freely configure the editor since all it does is merging your object
73 | with the `tinymce` one


--------------------------------------------------------------------------------
/TinyMce.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <textarea :id="id" :value="value"></textarea>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name : 'tiny-mce',
10 |   props : {
11 |      id: {
12 |         type: String,
13 |         default: 'editor'
14 |       },
15 |       value: {
16 |         type: String,
17 |         default : ''
18 |       },
19 |       toolbar: {
20 |         default: ''
21 |       },
22 |       menubar: {
23 |         default: ''
24 |       },
25 |       otherProps: {
26 |         default: ''
27 |       },
28 |       baseURL: {
29 |         type: String,
30 |         default: ''
31 |       },
32 |   },
33 |   mounted () {
34 |   tinymce.baseURL = this.baseURL;
35 |   tinymce.init({
36 |     selector: `#${this.id}`,
37 |     toolbar : this.toolbar,
38 |     menubar : this.menubar,
39 |     init_instance_callback: (editor) => {
40 |       editor.on('KeyUp', (e) => {
41 |         this.$emit('input', editor.getContent());
42 |       });
43 | 
44 |       editor.on('Change', (e) => {
45 |         this.$emit('input', editor.getContent());
46 |       });
47 |       
48 |       editor.setContent(this.value);
49 |     },
50 |     ...this.otherProps
51 |   })
52 | },
53 |   destroyed () {
54 |     tinymce.get(this.id).destroy();
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import TinyMce from './TinyMce.vue';
2 | 
3 | export default TinyMce;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tinymce-vue-2",
 3 |   "version": "0.0.5",
 4 |   "description": "A vue 2 component for TinyMCE",
 5 |   "keywords": [
 6 |     "vue 2",
 7 |     "vue component",
 8 |     "tinymce"
 9 |   ],
10 |   "devDependencies": {
11 |     "babel-plugin-transform-runtime": "^6.0.0",
12 |     "babel-preset-es2015": "^6.0.0",
13 |     "babel-preset-stage-2": "^6.0.0"
14 |   },
15 |   "author": "Michael Bouclas <mbouclas@gmail.com> (http://net-tomorrow.com/)",
16 |   "license": "MIT",
17 |   "homepage": "https://github.com/mbouclas/tinymce-vue-2",
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "https://github.com/mbouclas/tinymce-vue-2"
21 |   }
22 | }


--------------------------------------------------------------------------------