Skip to content
GitLab
Commit 96fbc812 authored by surmon's avatar surmon
Browse files

update to v1.1.1

parent d4ea4ab2
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ 96fbc812
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
.npmignore
View file @ 96fbc812
node_modules/*
npm-debug.log
examples
/examples
examples/*
node_modules/*
npm-debug.log
examples
/examples
examples/*
LICENSE
View file @ 96fbc812
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.
README.md
View file @ 96fbc812
[![GitHub issues](https://img.shields.io/github/issues/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/issues)
[![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/network)
[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/stargazers)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/surmon-china/vue-quill-editor/master/LICENSE)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-quill-editor.svg?style=social?style=flat-square)](https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D)
[![NPM](https://nodei.co/npm/vue-quill-editor.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-quill-editor/)
# Vue-Quill-Editor
🍡Quill editor component for Vue2，基于Quill、适用于Vue2的富文本编辑器。
> ### v1.1.0
> 修复webpack UglifyJsPlugin中的报错Bug
# Example
[Demo Page](https://surmon-china.github.io/vue-quill-editor/)
# Use Setup
### Install vue-quill-editor
``` bash
npm install vue-quill-editor --save
```
### use
``` javascript
// import with ES6
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require with Webpack/Node.js
var Vue = require('vue')
var VueQuillEditor = require('vue-quill-editor')
// use
Vue.use(VueQuillEditor)
// --------------------------------------
// or use with component(ES6)
import { quillEditor } from 'vue-quill-editor'
// use
export default {
components: {
quillEditor
}
}
```
``` html
<!-- use with components - bidirectional data binding（双向数据绑定） -->
<quill-editor ref="myTextEditor"
v-model="content"
:config="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- If you need to manually control the data synchronization, you can monitor the code change event like this（如果你需要手动控制数据流，就需要像这样手动监听changed事件） -->
<quill-editor ref="myTextEditor"
:content="content"
:config="editorOption"
@change="onEditorChange($event)">
</quill-editor>
```
``` javascript
// editor option example:
export default {
data () {
return {
content: '<h2>I am Example</h2>',
editorOption: {
// something config
}
}
},
// if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
// 如果需要手动控制数据同步，父组件需要显式地处理changed事件
methods: {
onEditorBlur(editor) {
console.log('editor blur!', editor)
},
onEditorFocus(editor) {
console.log('editor focus!', editor)
},
onEditorReady(editor) {
console.log('editor ready!', editor)
},
onEditorChange({ editor, html, text }) {
// console.log('editor change!', editor, html, text)
this.content = html
}
},
// if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
// 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
computed: {
editor() {
return this.$refs.myTextEditor.quillEditor
}
},
mounted() {
// you can use current editor object to do something(editor methods)
console.log('this is my editor', this.editor)
// this.editor to do something...
}
}
```
# More Config
[Api docs](https://quilljs.com/docs/quickstart/)
# Author Blog
[Surmon](http://surmon.me)
[![GitHub issues](https://img.shields.io/github/issues/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/issues)
[![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/network)
[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/stargazers)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/surmon-china/vue-quill-editor/master/LICENSE)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-quill-editor.svg?style=social?style=flat-square)](https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D)
[![NPM](https://nodei.co/npm/vue-quill-editor.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-quill-editor/)
# Vue-Quill-Editor
🍡Quill editor component for Vue2，基于Quill、适用于Vue2的富文本编辑器。
> ### v1.1.1
> const to var
> ### v1.1.0
> 修复webpack UglifyJsPlugin中的报错Bug
# Example
[Demo Page](https://surmon-china.github.io/vue-quill-editor/)
# Use Setup
### Install vue-quill-editor
``` bash
npm install vue-quill-editor --save
```
### use
``` javascript
// import with ES6
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require with Webpack/Node.js
var Vue = require('vue')
var VueQuillEditor = require('vue-quill-editor')
// use
Vue.use(VueQuillEditor)
// --------------------------------------
// or use with component(ES6)
import { quillEditor } from 'vue-quill-editor'
// use
export default {
components: {
quillEditor
}
}
```
``` html
<!-- use with components - bidirectional data binding（双向数据绑定） -->
<quill-editor ref="myTextEditor"
v-model="content"
:config="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- If you need to manually control the data synchronization, you can monitor the code change event like this（如果你需要手动控制数据流，就需要像这样手动监听changed事件） -->
<quill-editor ref="myTextEditor"
:content="content"
:config="editorOption"
@change="onEditorChange($event)">
</quill-editor>
```
``` javascript
// editor option example:
export default {
data () {
return {
content: '<h2>I am Example</h2>',
editorOption: {
// something config
}
}
},
// if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
// 如果需要手动控制数据同步，父组件需要显式地处理changed事件
methods: {
onEditorBlur(editor) {
console.log('editor blur!', editor)
},
onEditorFocus(editor) {
console.log('editor focus!', editor)
},
onEditorReady(editor) {
console.log('editor ready!', editor)
},
onEditorChange({ editor, html, text }) {
// console.log('editor change!', editor, html, text)
this.content = html
}
},
// if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
// 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
computed: {
editor() {
return this.$refs.myTextEditor.quillEditor
}
},
mounted() {
// you can use current editor object to do something(editor methods)
console.log('this is my editor', this.editor)
// this.editor to do something...
}
}
```
# More Config
[Api docs](https://quilljs.com/docs/quickstart/)
# Author Blog
[Surmon](http://surmon.me)
editor.vue
View file @ 96fbc812
<template>
<div class="quill-editor"></div>
</template>
<script>
require('quill/dist/quill.snow.css')
require('quill/dist/quill.bubble.css')
require('quill/dist/quill.core.css')
window.Quill = require('quill/dist/quill.js')
export default {
name: 'quill-editor',
data() {
return {
_content: '',
defaultModules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link', 'image', 'video'] // link and image, video
]
}
}
},
props: {
content: String,
value: String,
config: {
type: Object,
required: false,
default() {
return {}
}
}
},
mounted() {
this.initialize()
},
beforeDestroy() {
// 作者说了，等垃圾回收，不必显式清理
this.quillEditor = null
},
methods: {
initialize() {
if (this.$el) {
let self = this
self.quillEditor = new Quill(self.$el, Object.assign({
modules: self.defaultModules,
placeholder: 'Insert text here ...',
readOnly: false,
theme: 'snow',
boundary: document.body
}, self.config || {}))
// set editor content
if (self.value || self.content) {
self.quillEditor.pasteHTML(self.value || self.content)
}
// mark model as touched if editor lost focus
self.quillEditor.on('selection-change', (range) => {
if (!range) {
self.$emit('blur', self.quillEditor)
} else {
self.$emit('focus', self.quillEditor)
}
})
// update model if text changes
self.quillEditor.on('text-change', (delta, oldDelta, source) => {
let html = self.$el.children[0].innerHTML
const text = self.quillEditor.getText()
if (html === '<p><br></p>') html = ''
self._content = html
self.$emit('input', self._content)
self.$emit('change', {
editor: self.quillEditor,
html: html,
text: text
})
})
// 广播事件
self.$emit('ready', self.quillEditor)
}
}
},
watch: {
'content'(newVal, oldVal) {
if (this.quillEditor) {
if (!!newVal && newVal !== this._content) {
this._content = newVal
this.quillEditor.pasteHTML(newVal)
} else if(!newVal) {
this.quillEditor.setText('')
}
}
},
'value'(newVal, oldVal) {
if (this.quillEditor) {
if (newVal !== this._content) {
this._content = newVal
this.quillEditor.pasteHTML(newVal)
} else if(!newVal) {
this.quillEditor.setText('')
}
}
}
}
}
</script>
<template>
<div class="quill-editor"></div>
</template>
<script>
require('quill/dist/quill.snow.css')
require('quill/dist/quill.bubble.css')
require('quill/dist/quill.core.css')
if (!window.Quill) {
window.Quill = require('quill/dist/quill.js')
}
export default {
name: 'quill-editor',
data() {
return {
_content: '',
defaultModules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link', 'image', 'video'] // link and image, video
]
}
}
},
props: {
content: String,
value: String,
config: {
type: Object,
required: false,
default() {
return {}
}
}
},
mounted() {
this.initialize()
},
beforeDestroy() {
// 作者说了，等垃圾回收，不必显式清理
this.quillEditor = null
},
methods: {
initialize() {
if (this.$el) {
let self = this
self.quillEditor = new Quill(self.$el, Object.assign({
modules: self.defaultModules,
placeholder: 'Insert text here ...',
readOnly: false,
theme: 'snow',
boundary: document.body
}, self.config || {}))
// set editor content
if (self.value || self.content) {
self.quillEditor.pasteHTML(self.value || self.content)
}
// mark model as touched if editor lost focus
self.quillEditor.on('selection-change', (range) => {
if (!range) {
self.$emit('blur', self.quillEditor)
} else {
self.$emit('focus', self.quillEditor)
}
})
// update model if text changes
self.quillEditor.on('text-change', (delta, oldDelta, source) => {
let html = self.$el.children[0].innerHTML
const text = self.quillEditor.getText()
if (html === '<p><br></p>') html = ''
self._content = html
self.$emit('input', self._content)
self.$emit('change', {
editor: self.quillEditor,
html: html,
text: text
})
})
// 广播事件
self.$emit('ready', self.quillEditor)
}
}
},
watch: {
'content'(newVal, oldVal) {
if (this.quillEditor) {
if (!!newVal && newVal !== this._content) {
this._content = newVal
this.quillEditor.pasteHTML(newVal)
} else if(!newVal) {
this.quillEditor.setText('')
}
}
},
'value'(newVal, oldVal) {
if (this.quillEditor) {
if (newVal !== this._content) {
this._content = newVal
this.quillEditor.pasteHTML(newVal)
} else if(!newVal) {
this.quillEditor.setText('')
}
}
}