Skip to content

Instantly share code, notes, and snippets.

@izzygld
Created January 9, 2019 14:06
Show Gist options
  • Save izzygld/0762dce7292baf2168f9c7b2aa99b535 to your computer and use it in GitHub Desktop.
Save izzygld/0762dce7292baf2168f9c7b2aa99b535 to your computer and use it in GitHub Desktop.
Adding a “show html” button in Quill (Wysiwyg).
<template>
<div>
<vue-editor v-model="content" ref="editor" :editor-options="toolbarOptions" @text-change="updateValue" useCustomImageHandler @imageAdded="uploadImage"></vue-editor>
</div>
</template>
<script>
import Vue from "vue";
import axios from 'axios'
let VueEditor, Quill;
if (process.browser) {
VueEditor = require("vue2-editor").VueEditor;
Quill = require("vue2-editor").Quill;
}
export default {
props: ["value"],
data() {
let toolbarOptions = {
modules: {
toolbar: {
container: [
[{ font: [] }],
[{ header: [false, 1, 2, 3, 4, 5, 6] }],
["bold", "italic", "underline", "strike"],
[{ align: [] }],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ color: [] }, { background: [] }],
["link", "image", "video"],
["clean"],
["showHtml"]
],
handlers: {
showHtml: () => {
if (this.txtArea.style.display === "") {
const html = this.txtArea.value;
if (html === '<p><br/></p>') {
this.html = null;
} else {
this.html = html.replace(new RegExp('<p><br/>', 'g'), '<p>')
}
this.quill.pasteHTML(html);
}
this.txtArea.style.display =
this.txtArea.style.display === "none" ? "" : "none";
}
}
}
}
};
return {
toolbarOptions,
content: "",
rawContent: ""
};
},
components: {
VueEditor
},
mounted() {
this.quill = this.$refs.editor.quill;
this.txtArea = document.createElement("textarea");
this.txtArea.style.cssText =
"width: 100%;margin: 0px;background: rgb(29, 29, 29);box-sizing: border-box;color: rgb(204, 204, 204);font-size: 15px;outline: none;padding: 20px;line-height: 24px;font-family: Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace;position: absolute;top: 0;bottom: 0;border: none;display:none;resize: none;";
const htmlEditor = this.quill.addContainer("ql-custom");
htmlEditor.appendChild(this.txtArea);
this.quill.on("text-change", (delta, oldDelta, source) => {
var html = this.quill.getHTML();
this.txtArea.value = html;
});
this.content = this.value;
},
watch: {
content() {
this.rawContent = this.content;
},
rawContent() {
this.content = this.rawContent;
}
},
methods: {
updateValue () {
this.$emit('input', this.$refs.editor.quill.getHTML())
},
async uploadImage(file, Editor, cursorLocation, resetUploader) {
const fd = new window.FormData()
fd.append('file', file)
fd.append('upload_preset', 'vxjellmt')
fd.append('folder', 'outorah')
const { data } = await axios.post("https://api.cloudinary.com/v1_1/ouinternal/image/upload", fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
let url = `https://res.cloudinary.com/ouinternal/image/upload/${data.public_id}`
Editor.insertEmbed(cursorLocation, "image", url)
resetUploader()
}
}
};
</script>
<style>
.quillWrapper {
line-height: normal;
}
span.ql-formats:first-child > .ql-picker,
span.ql-header.ql-picker {
border: 1px solid #ddd;
display: flex;
height: 100%;
padding: 2px;
box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, 0.2);
background: white;
}
.ql-toolbar.ql-snow {
border: 1px solid #eee !important;
background: #f5f5f58c;
border-radius: 0 0 4px 4px;
}
.ql-container.ql-snow {
background: #fff;
width: 100%;
min-height: 200px;
border-top: 0 !important;
border-left: 1px solid #ddd !important;
border-right: 1px solid #ddd !important;
border-bottom: 1px solid #ddd !important;
}
.ql-stroke {
stroke: #555d66 !important;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
fill: #555d66 !important;
}
.ql-editor.ql-blank::before {
color: rgba(0, 0, 0, 0.3) !important;
font-style: normal !important;
}
.ql-editor {
min-height: 300px;
font-size: 15px;
font-family: Arial;
line-height: 24px;
}
.ql-container {
font-size: 15px;
font-family: Arial;
line-height: 24px;
}
.ql-container p {
margin-bottom: 10px;
}
.ql-formats button:hover,
.ql-formats .ql-picker:hover {
background: #abd4ff73 !important;
}
.ql-formats .ql-header.ql-picker:hover,
.ql-formats .ql-font.ql-picker:hover {
background: white !important;
border-color: #b4b9be;
}
.ql-picker-label {
display: flex !important;
}
.ql-align.ql-picker.ql-icon-picker .ql-picker-label {
display: block !important;
}
.ql-showHtml:after {
content: "[source]";
}
button.ql-showHtml {
width: 100% !important;
}
</style>
@sammy-git
Copy link

Thank you for this reference! Really appreciate it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment