Skip to content

Commit 3e4ddf4

Browse files
davidroyerdavidroyer
committed
Update
1 parent 8b93348 commit 3e4ddf4

40 files changed

+6181
-398
lines changed

‎.babelrc

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

‎.editorconfig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,10 @@ demo/
44
.npmignore
55
.DS_Store
66
npm-debug.log
7+
8+
*.log
9+
.DS_Store
10+
11+
# produced by vbuild
12+
dist
13+
dist-example

‎webpack.config.js renamed to ‎ORIGINAL.webpack.config.js

File renamed without changes.

‎README-Original.md

Lines changed: 329 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,329 @@
1+
## Vue2-Editor 2.0 (In Development)
2+
3+
![Vue2Editor-Centered](https://www.dropbox.com/s/7com4d32zct44nc/Vue2Editor-Centered.png?raw=1)
4+
HTML Editor using Vue.js 2.0 and Quilljs
5+
6+
[Vue.js](https://vuejs.org)
7+
8+
[Quill](http://quilljs.com/)
9+
10+
<!-- ## Demo -->
11+
12+
<!-- [fiddle](https://jsfiddle.net/su9zv0w9/1/) -->
13+
14+
## Install
15+
16+
```bash
17+
$ npm install --save vue2-editor
18+
```
19+
20+
21+
22+
## Use
23+
24+
```js
25+
import { VueEditor } from 'vue2-editor'
26+
```
27+
28+
29+
30+
## Props
31+
32+
Name | Type | Default | Description
33+
---- | ---- | ------- | -----------
34+
placeholder | String | - | Placeholder text for the editor
35+
editor-content | String | null | Set the the content of the editor
36+
use-save-button | Boolean | True | Set to false to use your own button to save editor content
37+
button-text | String | Save Content | Set the button's text
38+
editor-toolbar | Array | ** _Too long for table. See toolbar example below_ | Use a custom toolbar
39+
show-preview | Boolean | False | Set to true to get live preview
40+
41+
## Events
42+
43+
Name | Description
44+
---------------- | -----------
45+
editor-updated | Emitted when the editor contents change
46+
save-content | Emitted when the default save button is clicked
47+
48+
49+
## Example
50+
**_editor-content_**
51+
```html
52+
<template>
53+
<div id="app">
54+
<button type="button"
55+
@click="setEditorContent">
56+
Set Editor Contents
57+
</button>
58+
59+
<vue-editor
60+
:editor-content="htmlForEditor">
61+
</vue-editor>
62+
</div>
63+
</template>
64+
65+
<script>
66+
import { VueEditor } from 'vue2-editor'
67+
68+
export default {
69+
data: function () {
70+
return {
71+
htmlForEditor: null
72+
}
73+
},
74+
75+
components: {
76+
VueEditor
77+
},
78+
79+
methods: {
80+
setEditorContent: function () {
81+
this.htmlForEditor = '<h1>Html For Editor</h1>'
82+
}
83+
}
84+
}
85+
</script>
86+
```
87+
88+
89+
90+
91+
## Example
92+
**_show-preview_**
93+
94+
```html
95+
<vue-editor
96+
:show-preview="true">
97+
</vue-editor>
98+
```
99+
100+
101+
102+
103+
## Example
104+
**_editor-toolbar_**
105+
106+
```html
107+
<template>
108+
<div id="app">
109+
<vue-editor
110+
:editor-toolbar="customToolbar">
111+
</vue-editor>
112+
</div>
113+
</template>
114+
115+
<script>
116+
import { VueEditor } from 'vue2-editor'
117+
118+
export default {
119+
data: function () {
120+
return {
121+
customToolbar: [
122+
['bold', 'italic', 'underline'],
123+
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
124+
['image', 'code-block']
125+
]
126+
}
127+
},
128+
129+
components: {
130+
VueEditor
131+
}
132+
}
133+
</script>
134+
```
135+
136+
137+
138+
139+
## Example
140+
**_use-save-button_**
141+
```html
142+
<vue-editor
143+
:use-save-button="false">
144+
</vue-editor>
145+
```
146+
147+
148+
149+
## Example
150+
**_button-text_**
151+
152+
```html
153+
<vue-editor
154+
button-text="Custom Save Message">
155+
</vue-editor>
156+
```
157+
158+
159+
160+
## How do I get the html content from the text editor?
161+
162+
_There are 2 different scenarios we need to address._
163+
164+
165+
166+
### 1. Using the default Save Button
167+
168+
When the button is clicked, the '**_save-content_**' event is emitted with the current contents of the editor.
169+
170+
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.
171+
172+
**Note:** The default save button has a class of _save-button_ which you can target for styling the button.
173+
174+
```html
175+
<template>
176+
<div id="app">
177+
<h1>Write Your Message and save it!</h1>
178+
<vue-editor
179+
@save-content="handleSavingContent">
180+
</vue-editor>
181+
</div>
182+
</template>
183+
184+
<script>
185+
import { VueEditor } from 'vue2-editor'
186+
187+
export default {
188+
components: {
189+
VueEditor
190+
},
191+
192+
methods: {
193+
handleSavingContent: function (contentsToBeSaved) {
194+
console.log(contentsToBeSaved)
195+
}
196+
}
197+
}
198+
</script>
199+
<style>
200+
.save-button {
201+
color: #fff;
202+
padding: .5em 1em;
203+
background-color: rgba(53, 73, 94, 0.85);
204+
text-decoration: none;
205+
border-radius: 2px;
206+
cursor: pointer;
207+
font-weight: 900;
208+
transition: background-color .2s ease;
209+
margin: 1em 0;
210+
float: right;
211+
}
212+
213+
.save-button:hover {
214+
background-color: #35495e;
215+
}
216+
</style>
217+
```
218+
219+
220+
221+
### 2. Using your own button
222+
223+
The event '**_editor-updated_**' is emitted when the text inside the editor changes. The current editor contents are sent with this event.
224+
225+
You need to create a method that runs when this event is emitted.
226+
227+
EX:
228+
229+
```html
230+
<template>
231+
<div id="app">
232+
233+
<vue-editor
234+
:use-save-button="false"
235+
@editor-updated=handleUpdatedContent>
236+
</vue-editor>
237+
238+
<button type="button" name="save-content"
239+
@click="saveTheContent">
240+
Our Own Button
241+
</button>
242+
243+
</div>
244+
</template>
245+
246+
<script>
247+
import { VueEditor } from 'vue2-editor'
248+
249+
export default {
250+
data: function () {
251+
return {
252+
htmlFromEditor: null
253+
}
254+
},
255+
256+
components: {
257+
VueEditor
258+
},
259+
260+
methods: {
261+
handleUpdatedContent: function (value) {
262+
this.htmlFromEditor = value
263+
},
264+
265+
saveTheContent: function () {
266+
// Do whatever you want
267+
console.log(this.htmlFromEditor)
268+
}
269+
}
270+
}
271+
</script>
272+
```
273+
274+
275+
276+
## Example using several configuration options
277+
278+
```html
279+
<template>
280+
<div id="app">
281+
<button type="button"
282+
@click="setEditorContent">
283+
Set Editor Content
284+
</button>
285+
286+
<vue-editor
287+
:editor-content="htmlForEditor"
288+
:show-preview="true"
289+
@editor-updated="handleUpdatedContent"
290+
@save-content="handleSavingContent"
291+
button-text="Save Your Content">
292+
</vue-editor>
293+
</div>
294+
</template>
295+
296+
<script>
297+
import { VueEditor } from 'vue2-editor'
298+
299+
export default {
300+
data: function () {
301+
return {
302+
htmlForEditor: null
303+
}
304+
},
305+
306+
components: {
307+
VueEditor
308+
},
309+
310+
methods: {
311+
handleSavingContent: function (value) {
312+
console.log(value)
313+
},
314+
315+
handleUpdatedContent: function (value) {
316+
console.log(value);
317+
},
318+
319+
setEditorContent: function () {
320+
this.htmlForEditor = '<h1>Html For Editor</h1>'
321+
}
322+
}
323+
}
324+
</script>
325+
```
326+
327+
# License
328+
329+
MIT

0 commit comments

Comments
 (0)