Skip to content

Instantly share code, notes, and snippets.



Created Oct 28, 2016
What would you like to do?
<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>
<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 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 id="editor" ref="editor" class="content">
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.clipboard.dangerouslyPasteHTML(0, value)
value () {
return this._editor.root.innerHTML
<style lang="sass?indentedSyntax">
@import ~assets/sass/variables
border-radius: 3px 3px 0 0
border-radius: 0 0 3px 3px
border-bottom-color: $danger
border-color: $danger
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment