视频会议上传文件
This commit is contained in:
gyj
+21
-21
@@ -1,21 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Simon Babay
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Simon Babay
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
+242
-242
@@ -1,242 +1,242 @@
|
||||
[](https://github.com/surmon-china/vue-quill-editor/stargazers)
|
||||
[](https://travis-ci.org/surmon-china/vue-quill-editor)
|
||||
[](https://github.com/surmon-china/vue-quill-editor/issues)
|
||||
[](https://github.com/surmon-china/vue-quill-editor/network)
|
||||
[](https://github.com/surmon-china/vue-quill-editor)
|
||||
[](https://github.com/surmon-china/vue-quill-editor)
|
||||
[](https://twitter.com/intent/tweet?url=https://github.com/surmon-china/vue-quill-editor)
|
||||
[](https://juejin.im/entry/5852b6fc61ff4b006c89b49d/detail)
|
||||
|
||||
[](https://nodei.co/npm/vue-quill-editor/)
|
||||
[](https://nodei.co/npm/vue-quill-editor/)
|
||||
|
||||
|
||||
# Vue-Quill-Editor
|
||||
🍡Quill editor component for Vue, support SPA and SSR.
|
||||
|
||||
基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
[Demo Page](https://surmon-china.github.io/vue-quill-editor/)
|
||||
|
||||
[CDN Example](https://jsfiddle.net/tng9r8j3/)
|
||||
|
||||
[Nuxt.js/SSR example code](https://github.com/surmon-china/vue-quill-editor/blob/master/examples/nuxt-ssr-example)
|
||||
|
||||
#### Projects Using Vue-Quill-Editor
|
||||
[Tamiat CMS](https://github.com/tamiat/tamiat/)
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
#### CDN
|
||||
|
||||
``` html
|
||||
<link rel="stylesheet" href="path/to/quill.core.css"/>
|
||||
<link rel="stylesheet" href="path/to/quill.snow.css"/>
|
||||
<link rel="stylesheet" href="path/to/quill.bubble.css"/>
|
||||
<script type="text/javascript" src="path/to/quill.js"></script>
|
||||
<script type="text/javascript" src="path/to/vue.min.js"></script>
|
||||
<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
|
||||
<script type="text/javascript">
|
||||
Vue.use(window.VueQuillEditor)
|
||||
</script>
|
||||
```
|
||||
|
||||
#### NPM
|
||||
|
||||
``` bash
|
||||
npm install vue-quill-editor --save
|
||||
```
|
||||
|
||||
### Mount
|
||||
|
||||
#### mount with global
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
import VueQuillEditor from 'vue-quill-editor'
|
||||
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
Vue.use(VueQuillEditor, /* { default global options } */)
|
||||
```
|
||||
|
||||
#### mount with component
|
||||
|
||||
```javascript
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
quillEditor
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### mount with ssr
|
||||
|
||||
```javascript
|
||||
// if used in nuxt.js/ssr, you should keep require it only in browser build environment
|
||||
if (process.browser) {
|
||||
const VueQuillEditor = require('vue-quill-editor/dist/ssr')
|
||||
Vue.use(VueQuillEditor, /* { default global options } */)
|
||||
}
|
||||
```
|
||||
|
||||
#### register quill module
|
||||
|
||||
```javascript
|
||||
// register quill modules, you need to introduce and register before the vue program is instantiated
|
||||
import Quill from 'quill'
|
||||
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
|
||||
Quill.register('modules/yourQuillModule', yourQuillModule)
|
||||
```
|
||||
|
||||
### Difference（使用方法的区别）
|
||||
|
||||
**SSR and the only difference in the use of the SPA:**
|
||||
- SPA worked by the `component`, find quill instance by `ref attribute`.
|
||||
- SSR worked by the `directive`, find quill instance by `directive arg`.
|
||||
- Other configurations, events are the same.
|
||||
|
||||
### SSR
|
||||
|
||||
``` vue
|
||||
<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
|
||||
<template>
|
||||
<!-- bidirectional data binding（双向数据绑定） -->
|
||||
<div class="quill-editor"
|
||||
v-model="content"
|
||||
v-quill:myQuillEditor="editorOption">
|
||||
</div>
|
||||
|
||||
<!-- Or manually control the data synchronization（手动控制数据流） -->
|
||||
<div class="quill-editor"
|
||||
:content="content"
|
||||
@change="onEditorChange($event)"
|
||||
v-quill:myQuillEditor="editorOption">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: '<p>example content</p>',
|
||||
editorOption: { /* quill options */ }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('this is current quill instance object', this.myQuillEditor)
|
||||
},
|
||||
methods: {
|
||||
onEditorChange(event) {
|
||||
console.log('onEditorChange')
|
||||
}
|
||||
},
|
||||
// Omit the same parts as in the following component sample code
|
||||
// ...
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### SPA
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<!-- bidirectional data binding（双向数据绑定） -->
|
||||
<quill-editor v-model="content"
|
||||
ref="myQuillEditor"
|
||||
:options="editorOption"
|
||||
@blur="onEditorBlur($event)"
|
||||
@focus="onEditorFocus($event)"
|
||||
@ready="onEditorReady($event)">
|
||||
</quill-editor>
|
||||
|
||||
<!-- Or manually control the data synchronization（或手动控制数据流） -->
|
||||
<quill-editor :content="content"
|
||||
:options="editorOption"
|
||||
@change="onEditorChange($event)">
|
||||
</quill-editor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// you can also register quill modules in the component
|
||||
import Quill from 'quill'
|
||||
import { someModule } from '../yourModulePath/someQuillModule.js'
|
||||
Quill.register('modules/someModule', someModule)
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
content: '<h2>I am Example</h2>',
|
||||
editorOption: {
|
||||
// some quill options
|
||||
}
|
||||
}
|
||||
},
|
||||
// manually control the data synchronization
|
||||
// 如果需要手动控制数据同步，父组件需要显式地处理changed事件
|
||||
methods: {
|
||||
onEditorBlur(quill) {
|
||||
console.log('editor blur!', quill)
|
||||
},
|
||||
onEditorFocus(quill) {
|
||||
console.log('editor focus!', quill)
|
||||
},
|
||||
onEditorReady(quill) {
|
||||
console.log('editor ready!', quill)
|
||||
},
|
||||
onEditorChange({ quill, html, text }) {
|
||||
console.log('editor change!', quill, html, text)
|
||||
this.content = html
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editor() {
|
||||
return this.$refs.myQuillEditor.quill
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('this is current quill instance object', this.editor)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## Modules
|
||||
- [quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)
|
||||
- [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)
|
||||
- [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)
|
||||
- [quilljs-table](https://github.com/dost/quilljs-table)
|
||||
- [more modules...](https://github.com/search?o=desc&q=quill+module&s=stars&type=Repositories&utf8=%E2%9C%93)
|
||||
|
||||
|
||||
## Issues
|
||||
- [Add attributes from toolbar options](https://github.com/quilljs/quill/issues/1084)
|
||||
- [Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)
|
||||
- [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https://github.com/surmon-china/vue-quill-editor/issues/39)
|
||||
- [配合 element-ui 实现上传图片/视频到七牛 demo](https://github.com/surmon-china/vue-quill-editor/issues/102)
|
||||
- [How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR](https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411)
|
||||
|
||||
|
||||
## Quill documents
|
||||
[Api docs](https://quilljs.com/docs/quickstart/)
|
||||
|
||||
|
||||
## Author
|
||||
[Surmon](https://surmon.me)
|
||||
[](https://github.com/surmon-china/vue-quill-editor/stargazers)
|
||||
[](https://travis-ci.org/surmon-china/vue-quill-editor)
|
||||
[](https://github.com/surmon-china/vue-quill-editor/issues)
|
||||
[](https://github.com/surmon-china/vue-quill-editor/network)
|
||||
[](https://github.com/surmon-china/vue-quill-editor)
|
||||
[](https://github.com/surmon-china/vue-quill-editor)
|
||||
[](https://twitter.com/intent/tweet?url=https://github.com/surmon-china/vue-quill-editor)
|
||||
[](https://juejin.im/entry/5852b6fc61ff4b006c89b49d/detail)
|
||||
|
||||
[](https://nodei.co/npm/vue-quill-editor/)
|
||||
[](https://nodei.co/npm/vue-quill-editor/)
|
||||
|
||||
|
||||
# Vue-Quill-Editor
|
||||
🍡Quill editor component for Vue, support SPA and SSR.
|
||||
|
||||
基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
[Demo Page](https://surmon-china.github.io/vue-quill-editor/)
|
||||
|
||||
[CDN Example](https://jsfiddle.net/tng9r8j3/)
|
||||
|
||||
[Nuxt.js/SSR example code](https://github.com/surmon-china/vue-quill-editor/blob/master/examples/nuxt-ssr-example)
|
||||
|
||||
#### Projects Using Vue-Quill-Editor
|
||||
[Tamiat CMS](https://github.com/tamiat/tamiat/)
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
#### CDN
|
||||
|
||||
``` html
|
||||
<link rel="stylesheet" href="path/to/quill.core.css"/>
|
||||
<link rel="stylesheet" href="path/to/quill.snow.css"/>
|
||||
<link rel="stylesheet" href="path/to/quill.bubble.css"/>
|
||||
<script type="text/javascript" src="path/to/quill.js"></script>
|
||||
<script type="text/javascript" src="path/to/vue.min.js"></script>
|
||||
<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
|
||||
<script type="text/javascript">
|
||||
Vue.use(window.VueQuillEditor)
|
||||
</script>
|
||||
```
|
||||
|
||||
#### NPM
|
||||
|
||||
``` bash
|
||||
npm install vue-quill-editor --save
|
||||
```
|
||||
|
||||
### Mount
|
||||
|
||||
#### mount with global
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
import VueQuillEditor from 'vue-quill-editor'
|
||||
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
Vue.use(VueQuillEditor, /* { default global options } */)
|
||||
```
|
||||
|
||||
#### mount with component
|
||||
|
||||
```javascript
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
quillEditor
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### mount with ssr
|
||||
|
||||
```javascript
|
||||
// if used in nuxt.js/ssr, you should keep require it only in browser build environment
|
||||
if (process.browser) {
|
||||
const VueQuillEditor = require('vue-quill-editor/dist/ssr')
|
||||
Vue.use(VueQuillEditor, /* { default global options } */)
|
||||
}
|
||||
```
|
||||
|
||||
#### register quill module
|
||||
|
||||
```javascript
|
||||
// register quill modules, you need to introduce and register before the vue program is instantiated
|
||||
import Quill from 'quill'
|
||||
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
|
||||
Quill.register('modules/yourQuillModule', yourQuillModule)
|
||||
```
|
||||
|
||||
### Difference（使用方法的区别）
|
||||
|
||||
**SSR and the only difference in the use of the SPA:**
|
||||
- SPA worked by the `component`, find quill instance by `ref attribute`.
|
||||
- SSR worked by the `directive`, find quill instance by `directive arg`.
|
||||
- Other configurations, events are the same.
|
||||
|
||||
### SSR
|
||||
|
||||
``` vue
|
||||
<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
|
||||
<template>
|
||||
<!-- bidirectional data binding（双向数据绑定） -->
|
||||
<div class="quill-editor"
|
||||
v-model="content"
|
||||
v-quill:myQuillEditor="editorOption">
|
||||
</div>
|
||||
|
||||
<!-- Or manually control the data synchronization（手动控制数据流） -->
|
||||
<div class="quill-editor"
|
||||
:content="content"
|
||||
@change="onEditorChange($event)"
|
||||
v-quill:myQuillEditor="editorOption">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: '<p>example content</p>',
|
||||
editorOption: { /* quill options */ }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('this is current quill instance object', this.myQuillEditor)
|
||||
},
|
||||
methods: {
|
||||
onEditorChange(event) {
|
||||
console.log('onEditorChange')
|
||||
}
|
||||
},
|
||||
// Omit the same parts as in the following component sample code
|
||||
// ...
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### SPA
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<!-- bidirectional data binding（双向数据绑定） -->
|
||||
<quill-editor v-model="content"
|
||||
ref="myQuillEditor"
|
||||
:options="editorOption"
|
||||
@blur="onEditorBlur($event)"
|
||||
@focus="onEditorFocus($event)"
|
||||
@ready="onEditorReady($event)">
|
||||
</quill-editor>
|
||||
|
||||
<!-- Or manually control the data synchronization（或手动控制数据流） -->
|
||||
<quill-editor :content="content"
|
||||
:options="editorOption"
|
||||
@change="onEditorChange($event)">
|
||||
</quill-editor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// you can also register quill modules in the component
|
||||
import Quill from 'quill'
|
||||
import { someModule } from '../yourModulePath/someQuillModule.js'
|
||||
Quill.register('modules/someModule', someModule)
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
content: '<h2>I am Example</h2>',
|
||||
editorOption: {
|
||||
// some quill options
|
||||
}
|
||||
}
|
||||
},
|
||||
// manually control the data synchronization
|
||||
// 如果需要手动控制数据同步，父组件需要显式地处理changed事件
|
||||
methods: {
|
||||
onEditorBlur(quill) {
|
||||
console.log('editor blur!', quill)
|
||||
},
|
||||
onEditorFocus(quill) {
|
||||
console.log('editor focus!', quill)
|
||||
},
|
||||
onEditorReady(quill) {
|
||||
console.log('editor ready!', quill)
|
||||
},
|
||||
onEditorChange({ quill, html, text }) {
|
||||
console.log('editor change!', quill, html, text)
|
||||
this.content = html
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editor() {
|
||||
return this.$refs.myQuillEditor.quill
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('this is current quill instance object', this.editor)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## Modules
|
||||
- [quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)
|
||||
- [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)
|
||||
- [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)
|
||||
- [quilljs-table](https://github.com/dost/quilljs-table)
|
||||
- [more modules...](https://github.com/search?o=desc&q=quill+module&s=stars&type=Repositories&utf8=%E2%9C%93)
|
||||
|
||||
|
||||
## Issues
|
||||
- [Add attributes from toolbar options](https://github.com/quilljs/quill/issues/1084)
|
||||
- [Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)
|
||||
- [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https://github.com/surmon-china/vue-quill-editor/issues/39)
|
||||
- [配合 element-ui 实现上传图片/视频到七牛 demo](https://github.com/surmon-china/vue-quill-editor/issues/102)
|
||||
- [How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR](https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411)
|
||||
|
||||
|
||||
## Quill documents
|
||||
[Api docs](https://quilljs.com/docs/quickstart/)
|
||||
|
||||
|
||||
## Author
|
||||
[Surmon](https://surmon.me)
|
||||
|
||||
+77
-49
@@ -1,9 +1,32 @@
|
||||
{
|
||||
"name": "vue-quill-editor",
|
||||
"description": "Quill editor component for Vue",
|
||||
"version": "3.0.6",
|
||||
"license": "MIT",
|
||||
"private": false,
|
||||
"_args": [
|
||||
[
|
||||
"vue-quill-editor@3.0.6",
|
||||
"D:\\韩超勃\\视频会议\\Arbitrate-FrontendH5"
|
||||
]
|
||||
],
|
||||
"_from": "vue-quill-editor@3.0.6",
|
||||
"_id": "vue-quill-editor@3.0.6",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==",
|
||||
"_location": "/vue-quill-editor",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "version",
|
||||
"registry": true,
|
||||
"raw": "vue-quill-editor@3.0.6",
|
||||
"name": "vue-quill-editor",
|
||||
"escapedName": "vue-quill-editor",
|
||||
"rawSpec": "3.0.6",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "3.0.6"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npmmirror.com/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
|
||||
"_spec": "3.0.6",
|
||||
"_where": "D:\\韩超勃\\视频会议\\Arbitrate-FrontendH5",
|
||||
"author": {
|
||||
"name": "Surmon",
|
||||
"email": "surmon@foxmail.com",
|
||||
@@ -12,53 +35,11 @@
|
||||
"bugs": {
|
||||
"url": "https://github.com/surmon-china/vue-quill-editor/issues"
|
||||
},
|
||||
"homepage": "https://github.com/surmon-china/vue-quill-editor#readme",
|
||||
"main": "dist/vue-quill-editor.js",
|
||||
"unpkg": "dist/vue-quill-editor.js",
|
||||
"jsnext:main": "dist/vue-quill-editor.js",
|
||||
"files": [
|
||||
"dist",
|
||||
"src"
|
||||
],
|
||||
"jspm": {
|
||||
"main": "dist/vue-quill-editor.js",
|
||||
"registry": "npm",
|
||||
"format": "esm"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/surmon-china/vue-quill-editor.git"
|
||||
},
|
||||
"keywords": [
|
||||
"vue-quill-editor",
|
||||
"vue quill",
|
||||
"vue text editor",
|
||||
"vue rich text editor",
|
||||
"vue web editor",
|
||||
"vue editor"
|
||||
],
|
||||
"scripts": {
|
||||
"build:spa": "cross-env NODE_ENV=production webpack --config config/build.conf.js",
|
||||
"build:ssr": "babel src/ssr.js --out-file dist/ssr.js",
|
||||
"build": "npm run build:spa && npm run build:ssr",
|
||||
"unit": "cross-env BABEL_ENV=test NODE_ENV=testing karma start test/unit/karma.conf.js --watch",
|
||||
"test": "cross-env BABEL_ENV=test NODE_ENV=testing karma start test/unit/karma.conf.js --single-run",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs",
|
||||
"finish": "npm run lint && npm test && npm run build",
|
||||
"publish": "git push && git push --tags && npm publish"
|
||||
},
|
||||
"dependencies": {
|
||||
"object-assign": "^4.1.1",
|
||||
"quill": "^1.3.4"
|
||||
},
|
||||
"expDependencies": {
|
||||
"node-sass": "^4.7.2",
|
||||
"sass-loader": "^6.0.6",
|
||||
"highlight.js": "^9.12.0",
|
||||
"quill-image-drop-module": "^1.0.3",
|
||||
"quill-image-resize-module": "^3.0.0",
|
||||
"vue-quill-editor": "^3.0.0"
|
||||
},
|
||||
"description": "Quill editor component for Vue",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.7.2",
|
||||
"babel-cli": "^6.23.0",
|
||||
@@ -137,5 +118,52 @@
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
}
|
||||
},
|
||||
"expDependencies": {
|
||||
"node-sass": "^4.7.2",
|
||||
"sass-loader": "^6.0.6",
|
||||
"highlight.js": "^9.12.0",
|
||||
"quill-image-drop-module": "^1.0.3",
|
||||
"quill-image-resize-module": "^3.0.0",
|
||||
"vue-quill-editor": "^3.0.0"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"src"
|
||||
],
|
||||
"homepage": "https://github.com/surmon-china/vue-quill-editor#readme",
|
||||
"jsnext:main": "dist/vue-quill-editor.js",
|
||||
"jspm": {
|
||||
"main": "dist/vue-quill-editor.js",
|
||||
"registry": "npm",
|
||||
"format": "esm"
|
||||
},
|
||||
"keywords": [
|
||||
"vue-quill-editor",
|
||||
"vue quill",
|
||||
"vue text editor",
|
||||
"vue rich text editor",
|
||||
"vue web editor",
|
||||
"vue editor"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "dist/vue-quill-editor.js",
|
||||
"name": "vue-quill-editor",
|
||||
"private": false,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/surmon-china/vue-quill-editor.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run build:spa && npm run build:ssr",
|
||||
"build:spa": "cross-env NODE_ENV=production webpack --config config/build.conf.js",
|
||||
"build:ssr": "babel src/ssr.js --out-file dist/ssr.js",
|
||||
"finish": "npm run lint && npm test && npm run build",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs",
|
||||
"publish": "git push && git push --tags && npm publish",
|
||||
"test": "cross-env BABEL_ENV=test NODE_ENV=testing karma start test/unit/karma.conf.js --single-run",
|
||||
"unit": "cross-env BABEL_ENV=test NODE_ENV=testing karma start test/unit/karma.conf.js --watch"
|
||||
},
|
||||
"unpkg": "dist/vue-quill-editor.js",
|
||||
"version": "3.0.6"
|
||||
}
|
||||
|
||||
+153
-153
@@ -1,153 +1,153 @@
|
||||
<template>
|
||||
<div class="quill-editor">
|
||||
<slot name="toolbar"></slot>
|
||||
<div ref="editor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// require sources
|
||||
import _Quill from 'quill'
|
||||
import defaultOptions from './options'
|
||||
const Quill = window.Quill || _Quill
|
||||
|
||||
// pollfill
|
||||
if (typeof Object.assign != 'function') {
|
||||
Object.defineProperty(Object, 'assign', {
|
||||
value(target, varArgs) {
|
||||
if (target == null) {
|
||||
throw new TypeError('Cannot convert undefined or null to object')
|
||||
}
|
||||
const to = Object(target)
|
||||
for (let index = 1; index < arguments.length; index++) {
|
||||
const nextSource = arguments[index]
|
||||
if (nextSource != null) {
|
||||
for (const nextKey in nextSource) {
|
||||
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
|
||||
to[nextKey] = nextSource[nextKey]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return to
|
||||
},
|
||||
writable: true,
|
||||
configurable: true
|
||||
})
|
||||
}
|
||||
|
||||
// export
|
||||
export default {
|
||||
name: 'quill-editor',
|
||||
data() {
|
||||
return {
|
||||
_options: {},
|
||||
_content: '',
|
||||
defaultOptions
|
||||
}
|
||||
},
|
||||
props: {
|
||||
content: String,
|
||||
value: String,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
globalOptions: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initialize()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.quill = null
|
||||
delete this.quill
|
||||
},
|
||||
methods: {
|
||||
// Init Quill instance
|
||||
initialize() {
|
||||
if (this.$el) {
|
||||
|
||||
// Options
|
||||
this._options = Object.assign({}, this.defaultOptions, this.globalOptions, this.options)
|
||||
|
||||
// Instance
|
||||
this.quill = new Quill(this.$refs.editor, this._options)
|
||||
|
||||
this.quill.enable(false)
|
||||
|
||||
// Set editor content
|
||||
if (this.value || this.content) {
|
||||
this.quill.pasteHTML(this.value || this.content)
|
||||
}
|
||||
|
||||
// Disabled editor
|
||||
if (!this.disabled) {
|
||||
this.quill.enable(true)
|
||||
}
|
||||
|
||||
// Mark model as touched if editor lost focus
|
||||
this.quill.on('selection-change', range => {
|
||||
if (!range) {
|
||||
this.$emit('blur', this.quill)
|
||||
} else {
|
||||
this.$emit('focus', this.quill)
|
||||
}
|
||||
})
|
||||
|
||||
// Update model if text changes
|
||||
this.quill.on('text-change', (delta, oldDelta, source) => {
|
||||
let html = this.$refs.editor.children[0].innerHTML
|
||||
const quill = this.quill
|
||||
const text = this.quill.getText()
|
||||
if (html === '<p><br></p>') html = ''
|
||||
this._content = html
|
||||
this.$emit('input', this._content)
|
||||
this.$emit('change', { html, text, quill })
|
||||
})
|
||||
|
||||
// Emit ready event
|
||||
this.$emit('ready', this.quill)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// Watch content change
|
||||
content(newVal, oldVal) {
|
||||
if (this.quill) {
|
||||
if (newVal && newVal !== this._content) {
|
||||
this._content = newVal
|
||||
this.quill.pasteHTML(newVal)
|
||||
} else if(!newVal) {
|
||||
this.quill.setText('')
|
||||
}
|
||||
}
|
||||
},
|
||||
// Watch content change
|
||||
value(newVal, oldVal) {
|
||||
if (this.quill) {
|
||||
if (newVal && newVal !== this._content) {
|
||||
this._content = newVal
|
||||
this.quill.pasteHTML(newVal)
|
||||
} else if(!newVal) {
|
||||
this.quill.setText('')
|
||||
}
|
||||
}
|
||||
},
|
||||
// Watch disabled change
|
||||
disabled(newVal, oldVal) {
|
||||
if (this.quill) {
|
||||
this.quill.enable(!newVal)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="quill-editor">
|
||||
<slot name="toolbar"></slot>
|
||||
<div ref="editor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// require sources
|
||||
import _Quill from 'quill'
|
||||
import defaultOptions from './options'
|
||||
const Quill = window.Quill || _Quill
|
||||
|
||||
// pollfill
|
||||
if (typeof Object.assign != 'function') {
|
||||
Object.defineProperty(Object, 'assign', {
|
||||
value(target, varArgs) {
|
||||
if (target == null) {
|
||||
throw new TypeError('Cannot convert undefined or null to object')
|
||||
}
|
||||
const to = Object(target)
|
||||
for (let index = 1; index < arguments.length; index++) {
|
||||
const nextSource = arguments[index]
|
||||
if (nextSource != null) {
|
||||
for (const nextKey in nextSource) {
|
||||
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
|
||||
to[nextKey] = nextSource[nextKey]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return to
|
||||
},
|
||||
writable: true,
|
||||
configurable: true
|
||||
})
|
||||
}
|
||||
|
||||
// export
|
||||
export default {
|
||||
name: 'quill-editor',
|
||||
data() {
|
||||
return {
|
||||
_options: {},
|
||||
_content: '',
|
||||
defaultOptions
|
||||
}
|
||||
},
|
||||
props: {
|
||||
content: String,
|
||||
value: String,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
globalOptions: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initialize()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.quill = null
|
||||
delete this.quill
|
||||
},
|
||||
methods: {
|
||||
// Init Quill instance
|
||||
initialize() {
|
||||
if (this.$el) {
|
||||
|
||||
// Options
|
||||
this._options = Object.assign({}, this.defaultOptions, this.globalOptions, this.options)
|
||||
|
||||
// Instance
|
||||
this.quill = new Quill(this.$refs.editor, this._options)
|
||||
|
||||
this.quill.enable(false)
|
||||
|
||||
// Set editor content
|
||||
if (this.value || this.content) {
|
||||
this.quill.pasteHTML(this.value || this.content)
|
||||
}
|
||||
|
||||
// Disabled editor
|
||||
if (!this.disabled) {
|
||||
this.quill.enable(true)
|
||||
}
|
||||
|
||||
// Mark model as touched if editor lost focus
|
||||
this.quill.on('selection-change', range => {
|
||||
if (!range) {
|
||||
this.$emit('blur', this.quill)
|
||||
} else {
|
||||
this.$emit('focus', this.quill)
|
||||
}
|
||||
})
|
||||
|
||||
// Update model if text changes
|
||||
this.quill.on('text-change', (delta, oldDelta, source) => {
|
||||
let html = this.$refs.editor.children[0].innerHTML
|
||||
const quill = this.quill
|
||||
const text = this.quill.getText()
|
||||
if (html === '<p><br></p>') html = ''
|
||||
this._content = html
|
||||
this.$emit('input', this._content)
|
||||
this.$emit('change', { html, text, quill })
|
||||
})
|
||||
|
||||
// Emit ready event
|
||||
this.$emit('ready', this.quill)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// Watch content change
|
||||
content(newVal, oldVal) {
|
||||
if (this.quill) {
|
||||
if (newVal && newVal !== this._content) {
|
||||
this._content = newVal
|
||||
this.quill.pasteHTML(newVal)
|
||||
} else if(!newVal) {
|
||||
this.quill.setText('')
|
||||
}
|
||||
}
|
||||
},
|
||||
// Watch content change
|
||||
value(newVal, oldVal) {
|
||||
if (this.quill) {
|
||||
if (newVal && newVal !== this._content) {
|
||||
this._content = newVal
|
||||
this.quill.pasteHTML(newVal)
|
||||
} else if(!newVal) {
|
||||
this.quill.setText('')
|
||||
}
|
||||
}
|
||||
},
|
||||
// Watch disabled change
|
||||
disabled(newVal, oldVal) {
|
||||
if (this.quill) {
|
||||
this.quill.enable(!newVal)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user