Skip to content

Commit 8460f54

Browse files
davidroyerdavidroyer
committed
update
1 parent 5fbf2a9 commit 8460f54

File tree

9 files changed

+83
-118
lines changed

9 files changed

+83
-118
lines changed

‎dev/views/Basic.vue

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55
<div class="container grid-960">
66
<div class="columns">
77
<button @click="editorIsDisabled = !editorIsDisabled">Toggle</button>
8+
<button @click="$refs.editor.quill.focus()">Set Focus</button>
89
<div id="editor-boundary" class="editorWrapper column col-6 col-sm-12">
910
<vue-editor
1011
v-model="content"
12+
ref="editor"
1113
:options="editorOptions"
12-
ref="myQuillEditor"
1314
:disabled="editorIsDisabled"
1415
@blur="onEditorBlur"
1516
@focus="onEditorFocus"
@@ -30,15 +31,15 @@ export default {
3031
3132
data: () => ({
3233
editorOptions: {
33-
// modules: {
34-
// // toolbar: [
35-
// // ["bold", "italic", "underline", "strike"],
36-
// // ["blockquote", "code-block"],
37-
// // [{ header: 1 }, { header: 2 }],
38-
// // [{ list: "ordered" }, { list: "bullet" }]
39-
// // ]
40-
// },
41-
placeholder: "newww placeholder text here ..."
34+
modules: {
35+
// toolbar: [
36+
// ["bold", "italic", "underline", "strike"],
37+
// ["blockquote", "code-block"],
38+
// [{ header: 1 }, { header: 2 }],
39+
// [{ list: "ordered" }, { list: "bullet" }]
40+
// ]
41+
},
42+
placeholder: "Custom placeholder text here ..."
4243
},
4344
editorIsDisabled: false,
4445
content: ""

‎dev/views/CustomModules.vue

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
<script>
2424
import { VueEditor, Quill } from "../../src/index.js";
2525
import { ImageDrop } from "quill-image-drop-module";
26-
2726
Quill.register("modules/imageDrop", ImageDrop);
2827
2928
export default {
@@ -37,25 +36,6 @@ export default {
3736
}
3837
},
3938
content: "<h1>Starting content</h1>"
40-
}),
41-
42-
methods: {
43-
onEditorBlur(quill) {
44-
console.log("editor blur!", quill);
45-
},
46-
onEditorFocus(quill) {
47-
console.log("editor focus!", quill);
48-
},
49-
onEditorReady(quill) {
50-
console.log("editor ready!", quill);
51-
},
52-
onEditorChange({ quill, html, text }) {
53-
console.log("editor change!", quill, html, text);
54-
this.content = html;
55-
},
56-
onSelectionChange(range, oldRange, source) {
57-
console.log("Selection change!", range);
58-
}
59-
}
39+
})
6040
};
6141
</script>

‎dev/views/Images.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919

2020
<script>
2121
import { VueEditor, Quill } from "../../src/index.js";
22-
import { ImageDrop } from "quill-image-drop-module";
22+
// import { ImageDrop } from "quill-image-drop-module";
2323
import axios from "axios";
2424
const CLIENT_ID = "993793b1d8d3e2e";
2525
26-
Quill.register("modules/imageDrop", ImageDrop);
26+
// Quill.register("modules/imageDrop", ImageDrop);
2727
2828
export default {
2929
components: { VueEditor },
@@ -32,7 +32,7 @@ export default {
3232
editorOption: {
3333
bounds: "#editor-boundary",
3434
modules: {
35-
imageDrop: true
35+
// imageDrop: true
3636
},
3737
placeholder: "Custom placeholder text here ..."
3838
},

‎dev/views/SyntaxHighlighting.vue

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,8 @@
77
<div id="editor-boundary" class="editorWrapper column col-6 col-sm-12">
88
<vue-editor
99
v-model="content"
10-
ref="myQuillEditor"
11-
:options="editorOption"
12-
useCustomImageHandler
13-
@blur="onEditorBlur"
14-
@focus="onEditorFocus"
15-
@ready="onEditorReady"
16-
@selection-change="onSelectionChange">
10+
ref="editor"
11+
:options="editorOption">
1712
</vue-editor>
1813
</div>
1914
</div>
@@ -33,7 +28,7 @@ export default {
3328
data: () => ({
3429
editorOption: {
3530
modules: {
36-
// toolbar: [["code-block"]], // Include button in toolbar
31+
toolbar: [["code-block"]], // Include button in toolbar
3732
syntax: {
3833
highlight: text => hljs.highlightAuto(text).value
3934
}

‎src/VueEditor.vue

Lines changed: 48 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
11
<template>
2-
<div class="quill-editor">
2+
<div class="quillWrapper">
33
<slot name="toolbar"></slot>
4-
<div ref="editor"></div>
5-
<input v-if="useCustomImageHandler" @change="emitImageInfo($event)" ref="fileInput" id="file-upload" type="file" style="display:none;">
4+
<div :id="id" ref="quillContainer"></div>
5+
<input v-if="useCustomImageHandler" @change="emitImageInfo($event)" ref="fileInput" id="file-upload" type="file" accept="image/*" style="display:none;">
66
</div>
77
</template>
88

99
<script>
1010
import _Quill from "quill";
11-
import defaultOptions from "./helpers/default-options";
11+
import defaultToolbar from "./helpers/default-toolbar";
12+
import merge from "lodash.merge";
1213
import { objectAssignPolyfillHandler } from "./helpers/polyfills";
13-
import { configSettingsMerger } from "./helpers/config-settings-merger";
1414
1515
const Quill = window.Quill || _Quill;
16+
objectAssignPolyfillHandler();
1617
1718
export default {
1819
name: "VueEditor",
1920
2021
props: {
22+
id: {
23+
type: String,
24+
default: "quill-container"
25+
},
2126
deltaContent: String,
22-
value: String,
27+
value: {
28+
type: String,
29+
default: ""
30+
},
2331
disabled: {
2432
type: Boolean
2533
},
@@ -35,9 +43,7 @@ export default {
3543
},
3644
3745
data: () => ({
38-
quill: null,
39-
config: {},
40-
defaultOptions
46+
quill: null
4147
}),
4248
4349
mounted() {
@@ -47,16 +53,41 @@ export default {
4753
4854
methods: {
4955
initialize() {
50-
if (this.$el) {
51-
this.config = configSettingsMerger(this.defaultOptions, this.options);
52-
this.quill = new Quill(this.$refs.editor, this.config);
53-
this.checkForCustomImageHandler();
54-
this.handleInitialContent();
55-
this.registerEditorEventListeners();
56-
this.$emit("ready", this.quill);
57-
}
56+
this.setupQuillEditor();
57+
this.checkForCustomImageHandler();
58+
this.handleInitialContent();
59+
this.registerEditorEventListeners();
60+
this.$emit("ready", this.quill);
5861
},
5962
63+
setupQuillEditor() {
64+
let editorConfig = {
65+
debug: false,
66+
modules: {
67+
toolbar: defaultToolbar
68+
},
69+
theme: "snow",
70+
readOnly: this.disabled ? this.disabled : false
71+
};
72+
this.prepareEditorConfig(editorConfig);
73+
this.quill = new Quill(this.$refs.quillContainer, editorConfig);
74+
},
75+
76+
prepareEditorConfig(editorConfig) {
77+
if (
78+
Object.keys(this.options).length > 0 &&
79+
this.options.constructor === Object
80+
) {
81+
if (
82+
this.options.modules &&
83+
typeof this.options.modules.toolbar !== "undefined"
84+
) {
85+
// We don't want to merge default toolbar with provided toolbar.
86+
delete editorConfig.modules.toolbar;
87+
}
88+
merge(editorConfig, this.options);
89+
}
90+
},
6091
registerPrototypes() {
6192
Quill.prototype.getHTML = function() {
6293
return this.container.querySelector(".ql-editor").innerHTML;
@@ -81,9 +112,6 @@ export default {
81112
},
82113
83114
handleInitialContent() {
84-
if (this.disabled) this.quill.disable();
85-
else this.quill.enable();
86-
87115
if (this.value) this.quill.root.innerHTML = this.value; // Set initial editor content
88116
},
89117

‎src/helpers/config-settings-merger.js

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/helpers/default-options.js

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/helpers/default-toolbar.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
let defaultToolbar = [
2+
[{ header: [false, 1, 2, 3, 4, 5, 6] }],
3+
["bold", "italic", "underline", "strike"], // toggled buttons
4+
[
5+
{ align: "" },
6+
{ align: "center" },
7+
{ align: "right" },
8+
{ align: "justify" }
9+
],
10+
["blockquote", "code-block"],
11+
[{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
12+
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
13+
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
14+
["link", "image", "video"],
15+
["clean"] // remove formatting button
16+
];
17+
export default defaultToolbar;

‎src/helpers/toolbar.js

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)