root
/
yibu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

富文本 示例1

main
klausY 5 years ago
parent
e9cf6e164d
commit
e0bbe848d3
4 changed files with 123 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      QMPlusVuePage/package-lock.json
  2. 2
      QMPlusVuePage/package.json
  3. 7
      QMPlusVuePage/src/main.js
  4. 48
      QMPlusVuePage/src/view/example/rte/rte.vue

115
QMPlusVuePage/package-lock.json
View File

@ -3659,7 +3659,6 @@
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/deep-equal/download/deep-equal-1.1.0.tgz",
"integrity": "sha1-MQPN+KttMs9KjfeGVFjyuNM/N0U=",
"dev": true,
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
@ -3772,7 +3771,6 @@
"version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz",
"integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=",
"dev": true,
"requires": {
"object-keys": "^1.0.12"
}
@ -4879,6 +4877,11 @@
"resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
},
"fast-diff": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
},
"fast-glob": {
"version": "2.2.7",
"resolved": "https://registry.npm.taobao.org/fast-glob/download/fast-glob-2.2.7.tgz",
@ -5214,8 +5217,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -5236,14 +5238,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -5258,20 +5258,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -5388,8 +5385,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -5401,7 +5397,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -5416,7 +5411,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -5424,14 +5418,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -5450,7 +5442,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -5531,8 +5522,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -5544,7 +5534,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -5630,8 +5619,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -5667,7 +5655,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -5687,7 +5674,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -5731,14 +5717,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@ -5756,8 +5740,7 @@
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
"integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
"dev": true
"integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
},
"functional-red-black-tree": {
"version": "1.0.1",
@ -5974,7 +5957,6 @@
"version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz",
"integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
"dev": true,
"requires": {
"function-bind": "^1.1.1"
}
@ -6615,8 +6597,7 @@
"is-arguments": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/is-arguments/download/is-arguments-1.0.4.tgz",
"integrity": "sha1-P6+WbHy6D/Q3+zH2JQCC/PBEjPM=",
"dev": true
"integrity": "sha1-P6+WbHy6D/Q3+zH2JQCC/PBEjPM="
},
"is-arrayish": {
"version": "0.2.1",
@ -6690,8 +6671,7 @@
"is-date-object": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/is-date-object/download/is-date-object-1.0.1.tgz",
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
"dev": true
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
},
"is-descriptor": {
"version": "0.1.6",
@ -6826,7 +6806,6 @@
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/is-regex/download/is-regex-1.0.4.tgz",
"integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
"dev": true,
"requires": {
"has": "^1.0.1"
}
@ -8017,14 +7996,12 @@
"object-is": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/object-is/download/object-is-1.0.1.tgz",
"integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
"dev": true
"integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY="
},
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/object-keys/download/object-keys-1.1.1.tgz",
"integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=",
"dev": true
"integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4="
},
"object-visit": {
"version": "1.0.1",
@ -8296,6 +8273,11 @@
"no-case": "^2.2.0"
}
},
"parchment": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
},
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz",
@ -9267,6 +9249,41 @@
"integrity": "sha1-YOWl/WSn+L+k0qsu1v30yFutFU4=",
"dev": true
},
"quill": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
"requires": {
"clone": "^2.1.1",
"deep-equal": "^1.0.1",
"eventemitter3": "^2.0.3",
"extend": "^3.0.2",
"parchment": "^1.1.4",
"quill-delta": "^3.6.2"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
},
"eventemitter3": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
}
}
},
"quill-delta": {
"version": "3.6.3",
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
"requires": {
"deep-equal": "^1.0.1",
"extend": "^3.0.2",
"fast-diff": "1.1.2"
}
},
"randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",
@ -9477,7 +9494,6 @@
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/regexp.prototype.flags/download/regexp.prototype.flags-1.2.0.tgz",
"integrity": "sha1-azByTjBqJ4M+6xcbZqyIkLo35Bw=",
"dev": true,
"requires": {
"define-properties": "^1.1.2"
}
@ -11651,6 +11667,15 @@
"vue": "^2.5.21"
}
},
"vue-quill-editor": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
"integrity": "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==",
"requires": {
"object-assign": "^4.1.1",
"quill": "^1.3.4"
}
},
"vue-router": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",

2
QMPlusVuePage/package.json
View File

@ -14,10 +14,12 @@
"node-sass": "^4.12.0",
"path": "^0.12.7",
"qs": "^6.8.0",
"quill": "^1.3.7",
"sass-loader": "^8.0.0",
"script-ext-html-webpack-plugin": "^2.1.4",
"vue": "^2.6.10",
"vue-particle-line": "^0.1.4",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.3",
"vuescroll": "^4.14.4",
"vuex": "^3.1.1",

7
QMPlusVuePage/src/main.js
View File

@ -12,6 +12,13 @@ import vueParticleLine from 'vue-particle-line'
import 'vue-particle-line/dist/vue-particle-line.css'
Vue.use(vueParticleLine)
//富文本插件
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
import '@/permission'
import { store } from '@/store/index'

48
QMPlusVuePage/src/view/example/rte/rte.vue
View File

@ -1,10 +1,48 @@
<template>
<div>
多种富文本编辑器
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<button v-on:click="saveHtml">保存</button>
</div>
</template>
<script>
export default {
name:'Rte'
}
export default {
name: 'App',
data(){
return {
content: `<p>hello world</p>`,
editorOption: {}
}
},computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},methods: {
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(){}, // 内容改变事件
saveHtml:function(event){
alert(this.content);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Write Preview
Loading…
Cancel
Save