Skip to content

Instantly share code, notes, and snippets.

@RDelorier

RDelorier/Quill.vue

Created Oct 28, 2016
Embed
What would you like to do?
<template>
<div class="quill-editor">
<!-- Create toolbar container -->
<div id="toolbar" ref="toolbar" @click.prevent>
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<select class="ql-align">
<option selected=""></option>
<option value="center"></option>
<option value="right"></option>
</select>
<select class="ql-color"></select>
<!-- <select class="ql-background"></select> -->
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-clean"></button>
</div>
<div id="editor" ref="editor" class="content">
<slot></slot>
</div>
</div>
</template>
<script>
require('quill/assets/core.styl')
require('quill/assets/snow.styl')
import Quill from 'quill'
export default {
name: 'QuillWrapper',
mounted () {
this._editor = new Quill(this.$refs.editor, {
theme: 'snow',
modules: { toolbar: this.$refs.toolbar }
})
},
methods: {
pasteHtml (value) {
this._editor.setText('')
this._editor.clipboard.dangerouslyPasteHTML(0, value)
},
value () {
return this._editor.root.innerHTML
}
}
}
</script>
<style lang="sass?indentedSyntax">
@import ~assets/sass/variables
.quill-editor
#toolbar
border-radius: 3px 3px 0 0
#editor
border-radius: 0 0 3px 3px
&.is-danger
#toolbar
border-bottom-color: $danger
#editor
border-color: $danger
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment