├── README.MD
├── demo
    └── Demo.vue
├── package.json
└── src
    └── Editor.vue


/README.MD:
--------------------------------------------------------------------------------
 1 | # vue-editor
 2 | 
 3 | Editor for Vue2.0 , Base on wangEditor v2.x
 4 | 
 5 | #### notice
 6 | 
 7 |     I don't suggest you use wangeditor v3.0 in your production now
 8 |     because it's not very stable, such as the user interface, the upload image and so on.
 9 |     choose wangeditor v2.0 first, if you do not want to trouble 
10 | 
11 | #### install 
12 | 
13 | npm 
14 | 
15 |     npm install tt-vue-editor
16 | 
17 | yarn
18 | 
19 |     yarn add tt-vue-editor
20 | 
21 | #### how to use
22 | 
23 | 
24 | template
25 | 
26 |     <v-editor
27 |     :content="content"
28 |     :path="path"
29 |     v-model="result"></v-editor>
30 | 
31 | 
32 | script
33 | 
34 |     import Editor from 'tt-vue-editor'
35 |     export default {
36 |         data() {
37 |             return {
38 |                 // input content to editor
39 |                 content: 'base on wangeditor',
40 |                 // output content from editor
41 |                 result: '',
42 |                 // set image upload api url
43 |                 path: '/api/v1/help/upload/wangEditorH5File'
44 |             }
45 |         },
46 |         methods: {
47 |             submit() {
48 |                 console.log(this.result)
49 |             }
50 |         },
51 |         components: {
52 |             'v-editor': Editor
53 |         }
54 |     }
55 | 
56 | remark
57 | 
58 |     check the demo or create a issues
59 | 


--------------------------------------------------------------------------------
/demo/Demo.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |     <div class="">
 3 |         <v-editor
 4 |         :content="content"
 5 |         :path="path"
 6 |         v-model="result"></v-editor>
 7 |         <input type="button" name="name" value="submit" @click="submit">
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | import Editor from './Editor'
13 | export default {
14 |     data() {
15 |         return {
16 |             // input content to editor
17 |             content: 'base on wangeditor',
18 |             // output content from editor
19 |             result: '',
20 |             // set image upload api url
21 |             path: '/api/v1/help/upload/wangEditorH5File'
22 |         }
23 |     },
24 |     methods: {
25 |         submit() {
26 |             console.log(this.result)
27 |         }
28 |     },
29 |     components: {
30 |         'v-editor': Editor
31 |     }
32 | }
33 | </script>
34 | 
35 | <style lang="css">
36 | </style>
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tt-vue-editor",
 3 |   "version": "2.1.26",
 4 |   "description": "a vue componet base on wangEditor",
 5 |   "main": "./src/Editor.vue",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/jiangyoucai/vue-editor.git"
12 |   },
13 |   "keywords": [
14 |     "vue-editor",
15 |     "editor",
16 |     "wangeditor"
17 |   ],
18 |   "author": "https://github.com/jiangyoucai",
19 |   "license": "ISC",
20 |   "bugs": {
21 |     "url": "https://github.com/jiangyoucai/vue-editor/issues"
22 |   },
23 |   "homepage": "https://github.com/jiangyoucai/vue-editor#readme"
24 | }


--------------------------------------------------------------------------------
/src/Editor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-html="content" @input="result" id="editor">
 3 |     </div>
 4 | </template>
 5 | 
 6 | <script>
 7 | import WangEditor from 'wangeditor'
 8 | export default {
 9 |     props: ['content', 'path'],
10 |     data() {
11 |         return {
12 |             editor: ''
13 |         }
14 |     },
15 |     mounted() {
16 |         const editor = new WangEditor('editor')
17 |         editor.config.menus = ['source', '|', 'bold', 'underline', 'italic', 'strikethrough', 'eraser', 'forecolor', 'bgcolor', '|', 'quote', 'fontfamily', 'fontsize', 'head', 'unorderlist', 'orderlist', 'alignleft', 'aligncenter', 'alignright',
18 |             '|', 'link', 'unlink', 'table', 'img', 'video', 'insertcode', '|', 'undo', 'redo', 'fullscreen'
19 |         ]
20 |         editor.config.uploadImgUrl = this.path
21 |         editor.create()
22 |         this.editor = editor
23 |     },
24 |     methods: {
25 |         result() {
26 |             this.$emit('input', this.editor.$txt.html())
27 |         }
28 |     }
29 | }
30 | </script>
31 | <style scoped>
32 | #editor {
33 |     height: 440px;
34 | }
35 | 
36 | .wangEditor-container {
37 |     border-radius: 2px;
38 |     overflow: hidden;
39 |     border: 1px solid #CCC;
40 | }
41 | </style>
42 | 


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