init

src/tinymce.config.json

@@ -0,0 +1,18 @@
+{
+    "selector": "#input",
+    "mode": "specific_textareas",
+    "height": 500,
+    "powerpaste_word_import": "clean",
+    "powerpaste_html_import": "merge",
+    "language": "zh_CN",
+    "plugins": [
+        "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
+        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
+        "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
+    ],
+    "toolbar_items_size": "small",
+    "menubar": false,
+    "block_formats": "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;",
+    "toolbar1": "insertfile undo redo | formatselect | bullist numlist | link unlink | image media | fullscreen",
+    "toolbar2": "styleselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat"
+}

src/tinymce.config.style_formats.json

@@ -0,0 +1,11 @@
+[
+    {"title": "Inline", "items": [
+        {"title": "Bold", "icon": "bold", "format": "bold"},
+        {"title": "Italic", "icon": "italic", "format": "italic"},
+        {"title": "Underline", "icon": "underline", "format": "underline"},
+        {"title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough"},
+        {"title": "Superscript", "icon": "superscript", "format": "superscript"},
+        {"title": "Subscript", "icon": "subscript", "format": "subscript"},
+        {"title": "Code", "icon": "code", "format": "code"}
+    ]}
+]

src/vue-tinymce.js

@@ -0,0 +1,42 @@
+var inChange = false
+module.exports = {
+    template: __inline('vue-tinymce.tpl'),
+    props: {
+        model: {
+            required: true,
+            type: String,
+            twoWay: true,
+            default: ""
+        }
+    },
+    ready: function(){
+
+        var self = this
+        var config = __inline('tinymce.config.json')
+        config.style_formats = __inline('tinymce.config.style_formats.json')
+        config.setup = function(editor){
+            editor.on('init', function(){
+                editor.setContent(self.model)
+                editor.on('change', function(){
+                    inChange = true
+                    self.model = tinymce.activeEditor.getContent()
+                    console.log(self.model)
+                    inChange = false
+                })
+            })
+        }
+        tinymce.init(config)
+    },
+    beforeDestroy: function(){
+        tinymce.remove()
+    },
+    watch: {
+        'model': function(val, oldVal){
+            if(!inChange) return
+            if(!!tinymce.activeEditor){
+                console.log('in watch')
+                tinymce.activeEditor.setContent(val)
+            }
+        }
+    }
+}

src/vue-tinymce.tpl

@@ -0,0 +1 @@
+<textarea class="textarea" id="input" v-el:input></textarea>