1
1
## Vue2-Editor
2
2
3
+ ![ Vue2Editor-Centered] ( /Users/droyer/Desktop/Vue2Editor-Centered.png )
3
4
HTML Editor using Vue.js 2.0 and Quilljs
4
- < br >
5
+
5
6
[ Vue.js] ( https://vuejs.org )
6
- </br >
7
7
[ Quill] ( http://quilljs.com/ )
8
8
9
9
<!-- ## Demo -->
@@ -15,19 +15,23 @@ HTML Editor using Vue.js 2.0 and Quilljs
15
15
``` bash
16
16
$ npm install --save vue2-editor
17
17
```
18
- </br >
18
+
19
+
19
20
20
21
## Use
22
+
21
23
``` js
22
24
import { VueEditor } from ' vue2-editor'
23
25
```
24
- </br >
26
+
27
+
25
28
26
29
## Props
27
30
28
31
** _ editor-content_ ** :
29
- < br >
32
+
30
33
You can set the the content of the editor dynamically. If you don't need this feature then do not include it.
34
+
31
35
``` html
32
36
<template >
33
37
<div id =" app" >
@@ -59,9 +63,11 @@ You can set the the content of the editor dynamically. If you don't need this fe
59
63
}
60
64
</script >
61
65
```
62
- </br >
66
+
67
+
68
+
63
69
** _ show-preview_ ** :
64
- </ br >
70
+
65
71
This is set to FALSE by default. To enable:
66
72
67
73
``` html
@@ -70,9 +76,10 @@ This is set to FALSE by default. To enable:
70
76
</vue-editor >
71
77
```
72
78
73
- </br >
79
+
80
+
74
81
** _ editor-toolbar_ ** :
75
- </ br >
82
+
76
83
If you want to use a custom toolbar then you can set it to a property from the data object.
77
84
78
85
``` html
@@ -100,47 +107,53 @@ If you want to use a custom toolbar then you can set it to a property from the d
100
107
}
101
108
</script >
102
109
```
103
- </br >
110
+
111
+
112
+
104
113
** _ use-save-button_ ** :
105
- </ br >
114
+
106
115
This is set to true by default. Set to false to use your own button.
107
116
108
- </br >
117
+
118
+
109
119
** _ button-text_ ** :
110
- </ br >
120
+
111
121
The default text is 'Save Content'. If you want to use the built in Save button but with different text then you can set this prop to a String.
122
+
112
123
``` html
113
124
<vue-editor
114
125
button-text =" Custom Save Message" >
115
126
</vue-editor >
116
127
```
117
- </ br >
128
+
118
129
119
130
120
131
## Events
121
132
122
133
** _ editor-updated_ ** :
123
- </ br >
134
+
124
135
Emitted when the editor contents change. You will want to listen for this event if using your own save button.
125
136
126
- </br >
137
+
138
+
127
139
** _ save-content_ ** :
128
- </ br >
140
+
129
141
Emitted when the default save button is clicked.
130
142
131
- </br >
132
143
## How do I get the html content from the text editor?
144
+
133
145
_ There are 2 different scenarios we need to address._
134
- </br ></br >
146
+
147
+
135
148
136
149
### 1. Using the default Save Button
137
150
138
- When the button is clicked, the '** _ save-content_ ** ' event is emitted with the current contents of the editor.
139
- You need to create a method that runs when this event is emitted.
151
+ When the button is clicked, the '** _ save-content_ ** ' event is emitted with the current contents of the editor.
140
152
141
- You will need to pass a parameter to the method you create . This parameter holds the editor contents.
153
+ You need to create a method that runs when this event is emitted and pass a parameter to this method. This parameter holds the editor contents.
142
154
143
155
EX:
156
+
144
157
``` html
145
158
<template >
146
159
<div id =" app" >
@@ -163,7 +176,8 @@ export default {
163
176
}
164
177
</script >
165
178
```
166
- </br >
179
+
180
+
167
181
168
182
### 2. Using your own button
169
183
@@ -172,6 +186,7 @@ The event '**_editor-updated_**' is emitted when the text inside the editor chan
172
186
You need to create a method that runs when this event is emitted.
173
187
174
188
EX:
189
+
175
190
``` html
176
191
<template >
177
192
<div id =" app" >
212
227
}
213
228
</script >
214
229
```
215
- </br >
230
+
231
+
216
232
217
233
## Example using several configuration options
218
234
259
275
}
260
276
</script >
261
277
```
278
+
262
279
# License
280
+
263
281
MIT
0 commit comments