Skip to content

Instantly share code, notes, and snippets.

@hirokiky
Created August 22, 2019 05:46
Show Gist options
  • Save hirokiky/178b787357c9500a1e25849635705b59 to your computer and use it in GitHub Desktop.
Save hirokiky/178b787357c9500a1e25849635705b59 to your computer and use it in GitHub Desktop.
Quill Editor with Vue.js by using vue-quill-editor
<template>
<quill-editor :content="value"
@change="onChange"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</template>
<script>
import hljs from 'highlight.js'
import { TOOLBAR_OPTIONS } from '@/editor/options'
import { quillEditor } from 'vue-quill-editor'
export default {
name: 'Editor',
props: ["value"],
components: {
quillEditor
},
data () {
return {
content: '',
editorOption: {
placeholder: "コンテンツの本文を書いてください...",
modules: {
toolbar: TOOLBAR_OPTIONS,
syntax: {
highlight: text => hljs.highlightAuto(text).value
}
}
}
}
},
methods: {
onChange ({quill, html, text}) {
this.$emit("input", html)
},
onEditorBlur(quill) {
console.log('editor blur!', quill)
},
onEditorFocus(quill) {
console.log('editor focus!', quill)
},
onEditorReady(quill) {
console.log('editor ready!', quill)
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
}
}
</script>
<style lang="scss">
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';
@import '~quill/dist/quill.bubble.css';
@import '~highlight.js/styles/darcula.css';
.quill-editor {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.ql-container {
font-size: 16px;
flex: 1;
overflow: scroll;
}
.ql-editor pre.ql-syntax * {
font-family: monospace;
}
// Style
.ql-snow {
&.ql-toolbar {
border: none;
border-bottom: solid 1px #aaa;
padding-left: 0;
padding-right: 0;
}
&.ql-container {
border: none;
.ql-editor {
padding-left: 0;
padding-right: 0;
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment