Skip to content

Commit 80c59a7

Browse files
davidroyerdavidroyer
committed
Updated readme
1 parent 5df1530 commit 80c59a7

File tree

3 files changed

+29
-25
lines changed

3 files changed

+29
-25
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,5 @@ npm-debug.log
1111
# produced by vbuild
1212
dist
1313
dist-example
14+
15+
example/cloudinary.vue

‎README.md

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,16 @@ import { VueEditor } from 'vue2-editor'
3232
Name | Type | Default | Description
3333
-------------- | ------ | -------------------------------------------------- | ----------------------------------------------------------------------
3434
id | String | quill-container | Set the id (necessary if multiple editors in the same view)
35-
v-model | String | - | Set v-model to the the content or data property you wish to bind it to | Handle image uploading instead of using default conversion to data URL's
36-
useCustomImageHandler | Boolean | false |
35+
v-model | String | - | Set v-model to the the content or data property you wish to bind it to
36+
useCustomImageHandler | Boolean | false | Handle image uploading instead of using default conversion to Base64
3737
placeholder | String | - | Placeholder text for the editor
3838
disabled | Boolean | false | Set to true to disable editor
3939
editorToolbar | Array | ** _Too long for table. See toolbar example below_ | Use a custom toolbar
4040

4141
# Events
42-
Name | Description ---------------- | -----------
43-
onImageAdded | Emitted when useCustomImageHandler is true and and photo is being added to the editor
42+
Name | Parameters | Description
43+
-------------- | ------------ | ----------------------------------------------------------------------
44+
imageAdded | file, Editor, cursorLocation | Emitted when useCustomImageHandler is true and and photo is being added to the editor
4445
<!-- Emitted when the default save button is clicked -->
4546

4647
## Example
@@ -92,7 +93,7 @@ You can see below that 3 parameters are passed.
9293

9394
<script>
9495
import { VueEditor } from 'vue2-editor'
95-
96+
import axios from 'axios'
9697
export default {
9798
components: {
9899
VueEditor
@@ -106,7 +107,25 @@ You can see below that 3 parameters are passed.
106107
107108
methods: {
108109
handleImageAdded: function(file, Editor, cursorLocation) {
109-
110+
// An example of using FormData
111+
// NOTE: Your key could be different such as:
112+
// formData.append('file', file)
113+
114+
var formData = new FormData();
115+
formData.append('image', file)
116+
117+
axios({
118+
url: 'https://fakeapi.yoursite.com/images',
119+
method: 'POST',
120+
data: formData
121+
})
122+
.then((result) => {
123+
let url = result.data.url // Get url from response
124+
Editor.insertEmbed(cursorLocation, 'image', url);
125+
})
126+
.catch((err) => {
127+
console.log(err);
128+
})
110129
}
111130
}
112131
}

‎example/App.vue

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,12 @@
11
<template>
22
<div id="app">
33
<div class="container grid-960">
4-
<h1>Vue2Editor 2.0 (In Development)</h1>
5-
<!-- <vue-editor
6-
v-model="content"
7-
:editor-toolbar="customToolbar">
8-
</vue-editor> -->
9-
<!-- <button class="btn btn-primary" @click="saveContent(content)">Save</button> -->
10-
<!-- <button class="btn btn-primary" @click="setEditor">Set Editor</button> -->
11-
<!-- <button class="btn btn-primary" @click="toggleDisabled">Toggle Disabled</button> -->
4+
<h1>Vue2Editor - Upload Images Example </h1>
125
<div class="columns">
136
<div class="editorWrapper column col-6 col-sm-12">
14-
<vue-editor id="editor1" @imageAdded="handleImageAdded" useCustomImageHandler v-model="editor1Content" :disabled="editor1IsDisabled"></vue-editor>
7+
<vue-editor id="editor1" @imageAdded="handleImageAdded" useCustomImageHandler v-model="editor1Content"></vue-editor>
158
<button class="btn btn-primary" @click="saveContent(editor1Content)">Save</button>
16-
<button class="btn btn-primary" @click="toggleDisabledForEditor1">Toggle Disabled</button>
17-
<button class="btn btn-primary" @click="setEditor1">Set Editor</button>
18-
19-
<vue-editor id="editor2" v-model="editor2Content" :disabled="editor2IsDisabled"></vue-editor>
20-
<button class="btn btn-primary" @click="saveContent(editor2Content)">Save</button>
21-
<button class="btn btn-primary" @click="toggleDisabledForEditor2">Toggle Disabled</button>
22-
<button class="btn btn-primary" @click="setEditor2">Set Editor</button>
23-
24-
<!-- <vue-editor v-model="editorContent" :editorToolbar="customToolbar"></vue-editor> -->
259
</div>
26-
<!-- <div id="preview" class="column col-6 col-sm-12" v-if="showPreview" v-html="editorContent"></div> -->
2710
</div>
2811
</div>
2912
</div>

0 commit comments

Comments
 (0)