Skip to content

Commit 0dded6b

Browse files
davidroyerdavidroyer
committed
Added functionality for having multiple editors in a view
1 parent 0501d92 commit 0dded6b

File tree

4 files changed

+85
-23
lines changed

4 files changed

+85
-23
lines changed

‎README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { VueEditor } from 'vue2-editor'
3131

3232
Name | Type | Default | Description
3333
-------------- | ------ | -------------------------------------------------- | ----------------------------------------------------------------------
34+
id | String | quill-container | Set the id (necessary if multiple editors in the same view)
3435
v-model | String | - | Set v-model to the the content or data property you wish to bind it to
3536
placeholder | String | - | Placeholder text for the editor
3637
disabled | Boolean | false | Set to true to disable editor
@@ -101,6 +102,44 @@ editorToolbar | Array | ** _Too long for table. See toolbar example below_ | Us
101102
</script>
102103
```
103104

105+
## Example
106+
107+
**_Using Multiple Editors_**
108+
109+
```html
110+
<template>
111+
<div id="app">
112+
<button @click="setEditorContent">Set Editor Contents</button>
113+
<vue-editor id="editor1" v-model="editor1Content"></vue-editor>
114+
<vue-editor id="editor2" v-model="editor2Content"></vue-editor>
115+
</div>
116+
</template>
117+
118+
<script>
119+
import { VueEditor } from 'vue2-editor'
120+
121+
export default {
122+
components: {
123+
VueEditor
124+
},
125+
126+
data() {
127+
return {
128+
editor1Content: '<h1>Editor 1 Starting Content</h1>',
129+
editor2Content: '<h1>Editor 2 Starting Content</h1>',
130+
}
131+
}
132+
}
133+
</script>
134+
135+
<style>
136+
#editor1, #editor2 {
137+
height: 350px;
138+
}
139+
</style>
140+
```
141+
142+
104143
## Example
105144
**_Custom Toolbar_**
106145

‎example/App.vue

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,23 @@
77
:editor-toolbar="customToolbar">
88
</vue-editor> -->
99
<!-- <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>
10+
<!-- <button class="btn btn-primary" @click="setEditor">Set Editor</button> -->
11+
<!-- <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 v-model="editorContent"></vue-editor>
14+
<vue-editor id="editor1" v-model="editor1Content" :disabled="editor1IsDisabled"></vue-editor>
15+
<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+
1524
<!-- <vue-editor v-model="editorContent" :editorToolbar="customToolbar"></vue-editor> -->
16-
<button class="btn btn-primary" @click="saveContent(editorContent)">Save</button>
1725
</div>
18-
<div id="preview" class="column col-6 col-sm-12" v-if="showPreview" v-html="editorContent"></div>
26+
<!-- <div id="preview" class="column col-6 col-sm-12" v-if="showPreview" v-html="editorContent"></div> -->
1927
</div>
2028
</div>
2129
</div>
@@ -32,10 +40,12 @@ export default {
3240
},
3341
data() {
3442
return {
35-
editorContent: '<h1>Starting Content</h1>',
43+
editor1Content: '<h1>Editor 1 Starting Content</h1>',
44+
editor2Content: '<h1>Editor 2 Starting Content</h1>',
3645
showPreview: true,
3746
content: '<h1>Html For Editor</h1>',
38-
editorIsDisabled: false,
47+
editor1IsDisabled: false,
48+
editor2IsDisabled: false,
3949
customToolbar: [
4050
['bold', 'italic', 'underline'],
4151
[{
@@ -49,18 +59,26 @@ export default {
4959
},
5060
5161
methods: {
52-
setEditor() {
53-
this.editorContent = 'Set programatically!'
62+
setEditor1(editor) {
63+
this.editor1Content = 'Set Editor 1 Content'
64+
},
65+
66+
setEditor2(editor) {
67+
this.editor2Content = 'Set Editor 2 Content'
5468
},
5569
5670
saveContent(content) {
5771
console.log(content);
5872
// console.log(this.editorContent);
5973
},
6074
61-
toggleDisabled() {
62-
this.editorIsDisabled = !this.editorIsDisabled
75+
toggleDisabledForEditor1() {
76+
this.editor1IsDisabled = !this.editor1IsDisabled
77+
},
78+
toggleDisabledForEditor2() {
79+
this.editor2IsDisabled = !this.editor2IsDisabled
6380
}
81+
6482
}
6583
}
6684
</script>
@@ -89,5 +107,9 @@ export default {
89107
width: 47%;
90108
}
91109
}
110+
.ql-disabled {
111+
opacity: 0.5;
112+
background: rgba(153, 153, 153, 0.2);
113+
}
92114
93115
</style>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue2-editor",
3-
"version": "2.0.1",
3+
"version": "2.0.2",
44
"description": "HTML editor using Vue.js 2.0 and Quill.js, an open source editor",
55
"keywords": [
66
"vue",

‎src/VueEditor.vue

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div id="quillWrapper">
3-
<div ref="quillContainer" id="quill-container"></div>
2+
<div class="quillWrapper">
3+
<div ref="quillContainer" :id="id"></div>
44
</div>
55
</template>
66
<script>
@@ -28,13 +28,12 @@ export default {
2828
name: 'vue-editor',
2929
props: {
3030
value: String,
31-
placeholder: String,
32-
disabled: {
33-
type: Boolean,
34-
default () {
35-
return false
36-
}
31+
id: {
32+
type: String,
33+
default: 'quill-container'
3734
},
35+
placeholder: String,
36+
disabled: Boolean,
3837
editorToolbar: Array,
3938
},
4039
@@ -49,6 +48,7 @@ export default {
4948
mounted() {
5049
this.initializeVue2Editor()
5150
this.handleUpdatedEditor()
51+
this.checkForDisabled()
5252
},
5353
5454
watch: {
@@ -58,7 +58,7 @@ export default {
5858
}
5959
},
6060
disabled(status) {
61-
this.quill.enable(status);
61+
this.quill.enable(!status);
6262
}
6363
},
6464
@@ -75,12 +75,13 @@ export default {
7575
toolbar: this.toolbar
7676
},
7777
placeholder: this.placeholder ? this.placeholder : '',
78-
theme: 'snow'
78+
theme: 'snow',
79+
readOnly: this.disabled ? this.disabled : false,
7980
})
8081
},
8182
8283
setEditorElement() {
83-
this.editor = document.querySelector('.ql-editor')
84+
this.editor = document.querySelector(`#${this.id} .ql-editor`)
8485
},
8586
8687
checkForInitialContent() {

0 commit comments

Comments
 (0)