update to 2.0

new building and docs
lpreterite · Apr 20, 2019 · ee972fb · ee972fb
1 parent bcdbd83
commit ee972fb
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+![vue-tinymce](docs/assets/vu-tinymce-logo.png)
+
 # vue-tinymce
 
 [![npm version](https://img.shields.io/npm/v/@packy-tang/vue-tinymce.svg)](https://www.npmjs.com/package/@packy-tang/vue-tinymce)
@@ -23,39 +25,38 @@ npm install @packy-tang/vue-tinymce
 
 ### use
 
-```js
-import Vue from 'vue';
-import { VueTinymce , TinymceSetting } from '@packy-tang/vue-tinymce';
-
-new Vue({
-    el: '#app',
-    data: function(){
-        return {
-            content: '<p>html content</p>',
-            setting: {
-                ...TinymceSetting,
-                height: 200,
-                language_url: "langs/zh_CN.js",
-                block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;"
+```html
+<template>
+    <script src="//cdn.bootcss.com/tinymce/4.9.4/tinymce.min.js"></script>
+    <div id="app">
+        <vue-tinymce
+            ref="tinymce"
+            v-model="content"
+            :setting="setting">
+        </vue-tinymce>
+    </div>
+</template>
+<script>
+    import Vue from 'vue';
+    import { default as VueTinymce, TinymceSetting } from '@packy-tang/vue-tinymce';
+
+    Vue.use(VueTinymce)
+
+    new Vue({
+        el: '#app',
+        data: function(){
+            return {
+                content: '<p>html content</p>',
+                setting: {
+                    ...TinymceSetting,
+                    height: 200,
+                    language_url: "langs/zh_CN.js",
+                    block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;"
+                }
             }
         }
-    }
-})
-
-```
-
-### template
-
-```html
-<div id="app">
-    <vue-tinymce
-        ref="tinymce"
-        v-model="content"
-        :setting="setting">
-    </vue-tinymce>
-</div>
-<!-- in last -->
-<script src="node_modules/tinymce/tinymce.min.js"></script>
+    })
+</script>
 ```
 
 ### Get Editor to do something
@@ -65,16 +66,13 @@ const bm = this.$refs.tinymce.editor.selection.getBookmark();
 console.log(bm);
 ```
 
-## Run Example
-
-```sh
-npm i
-npm run dev
-```
-
 ## Run build
 
 ```sh
+// install
 npm i
+
 npm run build
+//or
+npm run watch
 ```
diff --git a/docs/Example.md b/docs/Example.md
@@ -205,6 +205,18 @@ export default {
 
 <vuep template="#customstyle" :style="{height: '600px'}"></vuep>
 
+### Custom files
+
+```sh
+- docs/
+    - assets/
+        - tinymce/
+            - skins/
+                - custom/
+    - utils/
+        index.js
+```
+
 <script v-pre type="text/x-template" id="customstyle">
 <template>
     <div>

diff --git a/docs/README.md b/docs/README.md
@@ -25,39 +25,38 @@ npm install @packy-tang/vue-tinymce
 
 ### use
 
-```js
-import Vue from 'vue';
-import { VueTinymce , TinymceSetting } from '@packy-tang/vue-tinymce';
-
-new Vue({
-    el: '#app',
-    data: function(){
-        return {
-            content: '<p>html content</p>',
-            setting: {
-                ...TinymceSetting,
-                height: 200,
-                language_url: "langs/zh_CN.js",
-                block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;"
+```html
+<template>
+    <script src="//cdn.bootcss.com/tinymce/4.9.4/tinymce.min.js"></script>
+    <div id="app">
+        <vue-tinymce
+            ref="tinymce"
+            v-model="content"
+            :setting="setting">
+        </vue-tinymce>
+    </div>
+</template>
+<script>
+    import Vue from 'vue';
+    import { default as VueTinymce, TinymceSetting } from '@packy-tang/vue-tinymce';
+
+    Vue.use(VueTinymce)
+
+    new Vue({
+        el: '#app',
+        data: function(){
+            return {
+                content: '<p>html content</p>',
+                setting: {
+                    ...TinymceSetting,
+                    height: 200,
+                    language_url: "langs/zh_CN.js",
+                    block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;"
+                }
             }
         }
-    }
-})
-
-```
-
-### template
-
-```html
-<div id="app">
-    <vue-tinymce
-        ref="tinymce"
-        v-model="content"
-        :setting="setting">
-    </vue-tinymce>
-</div>
-<!-- in last -->
-<script src="node_modules/tinymce/tinymce.min.js"></script>
+    })
+</script>
 ```
 
 ### Get Editor to do something
@@ -67,16 +66,13 @@ const bm = this.$refs.tinymce.editor.selection.getBookmark();
 console.log(bm);
 ```
 
-## Run Example
-
-```sh
-npm i
-npm run dev
-```
-
 ## Run build
 
 ```sh
+// install
 npm i
+
 npm run build
+//or
+npm run watch
 ```
diff --git a/docs/main.js b/docs/main.js
@@ -1,6 +1,6 @@
 import Vue from "vue"
 import { default as VueTinymce, TinymceSetting } from ".."
 
-Vue.component('VueTinymce', VueTinymce)
+Vue.use(VueTinymce)
 
 window.VueTinymce = { TinymceSetting }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@packy-tang/vue-tinymce",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "A simple vue-based tinymce component",
   "main": "dist/vue-tinymce.cjs.js",
   "module": "dist/vue-tinymce.esm.js",

diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,20 @@
 import TinymceSetting from './setting'
-import component from './vue-tinymce.vue'
-export { TinymceSetting }
-export default component
+import VueTinymce from './vue-tinymce.vue'
+export { TinymceSetting, VueTinymce }
+class VuePlugin{
+    constructor(){
+        const { prefix } = { prefix: "" }
+        this.prefix = prefix;
+    }
+    install(Vue, options={}){
+        const prefix = options.prefix || this.prefix
+        const components = {
+            VueTinymce
+        }
+        Object.keys(components).forEach(key => {
+            const component = components[key];
+            Vue.component(prefix+component.name, component);
+        });
+    }
+}
+export default new VuePlugin()
diff --git a/src/vue-tinymce.vue b/src/vue-tinymce.vue
@@ -5,6 +5,7 @@ const INPUT = 1;
 const CHANGED = 2;
 
 export default {
+    name: "VueTinymce",
     props: {
         value: {
             type: String,