Skip to content

Commit 2ec6a17

Browse files
davidroyerdavidroyer
committed
Working version
1 parent b73bcf3 commit 2ec6a17

File tree

2 files changed

+24
-85
lines changed

2 files changed

+24
-85
lines changed

‎example/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<!-- <button class="btn btn-primary" @click="toggleDisabled">Toggle Disabled</button> -->
1212
<div class="columns">
1313
<div class="editorWrapper column col-6 col-sm-12">
14-
<vue-editor id="editor1" @imageAdded="handleImageAdded" :functionProp="sendUrlToEditor" v-model="editor1Content" :disabled="editor1IsDisabled"></vue-editor>
14+
<vue-editor id="editor1" @imageAdded="handleImageAdded" useCustomImageHandler v-model="editor1Content" :disabled="editor1IsDisabled"></vue-editor>
1515
<button class="btn btn-primary" @click="saveContent(editor1Content)">Save</button>
1616
<button class="btn btn-primary" @click="toggleDisabledForEditor1">Toggle Disabled</button>
1717
<button class="btn btn-primary" @click="setEditor1">Set Editor</button>

‎src/VueEditor.vue

Lines changed: 23 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
<template>
22
<div class="quillWrapper">
33
<div ref="quillContainer" :id="id"></div>
4-
<input v-if="useImageUploader" @change="customImageHanlder ? sendFileToParent($event) : handleUpload($event)" ref="fileInput" id="file-upload" type="file" style="display:none;">
4+
<input v-if="useCustomImageHandler" @change="emitImageInfo($event)" ref="fileInput" id="file-upload" type="file" style="display:none;">
55
</div>
66
</template>
7+
78
<script>
89
import Quill from 'quill'
9-
import axios from 'axios'
1010
import 'quill/dist/quill.core.css'
1111
import 'quill/dist/quill.snow.css'
12-
const CLOUDINARY_URL = 'https://api.cloudinary.com/v1_1/dkrcloudinary/upload'
13-
const UPLOAD_PRESET = 'ptvbj5nu'
1412
1513
var defaultToolbar = [
1614
['bold', 'italic', 'underline', 'strike'],
@@ -39,27 +37,25 @@ export default {
3937
placeholder: String,
4038
disabled: Boolean,
4139
editorToolbar: Array,
42-
functionProp: Function
40+
useCustomImageHandler: {
41+
type: Boolean,
42+
default: false
43+
}
4344
},
4445
4546
data() {
4647
return {
4748
quill: null,
4849
editor: null,
4950
toolbar: this.editorToolbar ? this.editorToolbar : defaultToolbar,
50-
useImageUploader: true,
51-
customImageHanlder: true
5251
}
5352
},
5453
5554
mounted() {
5655
this.initializeVue2Editor()
5756
this.handleUpdatedEditor()
58-
59-
},
60-
created() {
61-
this.functionProp
6257
},
58+
6359
watch: {
6460
value (val) {
6561
if (val != this.editor.innerHTML && !this.quill.hasFocus()) {
@@ -81,17 +77,13 @@ export default {
8177
setQuillElement() {
8278
this.quill = new Quill(this.$refs.quillContainer, {
8379
modules: {
84-
toolbar: {
85-
container: this.toolbar, // Selector for toolbar container
86-
handlers: {
87-
'image': this.imageHandler
88-
}
89-
}
80+
toolbar: this.toolbar
9081
},
9182
placeholder: this.placeholder ? this.placeholder : '',
9283
theme: 'snow',
9384
readOnly: this.disabled ? this.disabled : false,
9485
})
86+
this.checkForCustomImageHandler()
9587
},
9688
9789
setEditorElement() {
@@ -102,85 +94,32 @@ export default {
10294
this.editor.innerHTML = this.value || ''
10395
},
10496
97+
checkForCustomImageHandler() {
98+
this.useCustomImageHandler === true ? this.setupCustomImageHandler() : ''
99+
},
100+
101+
setupCustomImageHandler() {
102+
let toolbar = this.quill.getModule('toolbar');
103+
toolbar.addHandler('image', this.customImageHandler);
104+
},
105+
105106
handleUpdatedEditor() {
106107
this.quill.on('text-change', () => {
107108
this.$emit('input', this.editor.innerHTML)
108109
})
109110
},
110-
imageHandler(image, callback) {
111-
this.$refs.fileInput.click();
112-
// var range = this.quill.getSelection();
113111
114-
// this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
115-
116-
// var IMGUR_CLIENT_ID = 'bcab3ce060640ba';
117-
// var IMGUR_API_URL = 'https://api.imgur.com/3/image';
118-
console.log(image);
119-
// var range = this.quill.getSelection();
120-
// alert('fired!!!')
121-
// var value = prompt('What is the image URL');
122-
// this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
123-
},
124-
handleUpload($event) {
125-
console.log('Using Method in VueEditor');
126-
let vm = this
127-
var file = $event.target.files[0]
128-
var formData = new FormData();
129-
130-
formData.append('file', file)
131-
formData.append('upload_preset', UPLOAD_PRESET)
132-
133-
var xhrObj = new XMLHttpRequest();
134-
// xhrObj.upload.addEventListener("loadstart", loadStartFunction, false);
135-
// xhrObj.upload.addEventListener("progress", progressFunction, false);
136-
// xhrObj.upload.addEventListener("load", transferCompleteFunction, false);
137-
xhrObj.open("post", CLOUDINARY_URL);
138-
xhrObj.send(formData);
139-
140-
xhrObj.onload = function() {
141-
if (this.status == 200) {
142-
let uploadResponse = JSON.parse(this.response);
143-
let url = uploadResponse.url
144-
145-
let range = vm.quill.getSelection();
146-
let cursorLocation = range.index
147-
vm.quill.insertEmbed(range.index, 'image', url, Quill.sources.API);
148-
// var image = document.createElement('img');
149-
// image.src = resp.dataUrl;
150-
// document.body.appendChild(image);
151-
};
152-
};
112+
customImageHandler(image, callback) {
113+
this.$refs.fileInput.click();
153114
},
154-
sendFileToParent($event) {
115+
116+
emitImageInfo($event) {
155117
let file = $event.target.files[0]
156118
let Editor = this.quill
157119
let range = Editor.getSelection();
158120
let cursorLocation = range.index
159121
this.$emit('imageAdded', file, Editor, cursorLocation)
160-
},
161-
// handleUpload($event) {
162-
// var file = $event.target.files[0]
163-
// var formData = new FormData();
164-
// console.log(file);
165-
// formData.append('file', file)
166-
// formData.append('upload_preset', UPLOAD_PRESET)
167-
// axios({
168-
// url: CLOUDINARY_URL,
169-
// method: 'POST',
170-
// headers:{
171-
// 'Content-Type': 'application/x-www-form-urlencoded'
172-
// },
173-
// data: formData
174-
// })
175-
// .then((result) => {
176-
// let url = result.data.url
177-
// var range = this.quill.getSelection();
178-
// this.quill.insertEmbed(range.index, 'image', url, Quill.sources.API);
179-
// })
180-
// .catch((err) => {
181-
// console.log(err);
182-
// })
183-
// }
122+
}
184123
}
185124
}
186125
</script>

0 commit comments

Comments
 (0)