Skip to content

Commit cdf79f8

Browse files
davidroyerdavidroyer
committed
Update for preparation for launch
1 parent 531c561 commit cdf79f8

File tree

5 files changed

+43
-41
lines changed

5 files changed

+43
-41
lines changed

‎README.md

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,19 @@
88

99
<!-- ## Demo --> <!-- [fiddle](https://jsfiddle.net/su9zv0w9/1/) -->
1010

11-
# Install
11+
# Install
12+
_You can use Yarn or NPM_
1213

1314
```bash
1415
$ npm install --save vue2-editor
1516
```
1617

18+
**OR**
19+
20+
```bash
21+
yarn add vue2-editor
22+
```
23+
1724
# Use
1825

1926
```javascript
@@ -26,13 +33,13 @@ Name | Type | Default | D
2633
-------------- | ------ | -------------------------------------------------- | ----------------------------------------------------------------------
2734
v-model | String | - | Set v-model to the the content or data property you wish to bind it to
2835
placeholder | String | - | Placeholder text for the editor
29-
editor-toolbar | Array | ** _Too long for table. See toolbar example below_ | Use a custom toolbar
36+
disabled | Boolean | false | Set to true to disable editor
37+
editorToolbar | Array | ** _Too long for table. See toolbar example below_ | Use a custom toolbar
3038

3139
<!-- ## Events Name | Description ---------------- | ----------- editor-updated | Emitted when the editor contents change save-content | Emitted when the default save button is clicked -->
3240

33-
# Example
34-
35-
**Basic Example**
41+
## Example
42+
**_Basic Setup_**
3643

3744
```html
3845
<template>
@@ -49,7 +56,7 @@ editor-toolbar | Array | ** _Too long for table. See toolbar example below_ | U
4956
},
5057
5158
export default {
52-
data: function() {
59+
data() {
5360
return {
5461
content: '<h1>Some initial content</h1>'
5562
}
@@ -58,9 +65,9 @@ editor-toolbar | Array | ** _Too long for table. See toolbar example below_ | U
5865
</script>
5966
```
6067

61-
# Example
68+
## Example
6269

63-
**Set contents after page load**
70+
**_Set Contents After Page Load_**
6471

6572
```html
6673
<template>
@@ -73,12 +80,12 @@ editor-toolbar | Array | ** _Too long for table. See toolbar example below_ | U
7380
<script>
7481
import { VueEditor } from 'vue2-editor'
7582
76-
components: {
77-
VueEditor
78-
},
79-
8083
export default {
81-
data: function() {
84+
components: {
85+
VueEditor
86+
},
87+
88+
data() {
8289
return {
8390
htmlForEditor: null
8491
}
@@ -93,14 +100,13 @@ editor-toolbar | Array | ** _Too long for table. See toolbar example below_ | U
93100
</script>
94101
```
95102

96-
# Example
97-
98-
**_editor-toolbar_**
103+
## Example
104+
**_Custom Toolbar_**
99105

100106
```html
101107
<template>
102108
<div id="app">
103-
<vue-editor v-model="content" :editor-toolbar="customToolbar"></vue-editor>
109+
<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
104110
</div>
105111
</template>
106112

@@ -112,7 +118,7 @@ editor-toolbar | Array | ** _Too long for table. See toolbar example below_ | U
112118
VueEditor
113119
},
114120
115-
data: function () {
121+
data() {
116122
return {
117123
content: '<h1>Html For Editor</h1>',
118124
customToolbar: [
@@ -126,12 +132,9 @@ editor-toolbar | Array | ** _Too long for table. See toolbar example below_ | U
126132
</script>
127133
```
128134

129-
# How do I get the html content from the text editor?
130-
131-
_There are 2 different scenarios we need to address._
132-
133-
# Saving the content
134135

136+
### Example
137+
**_Saving the Content_**
135138
```html
136139
<template>
137140
<div id="app">
@@ -155,16 +158,17 @@ _There are 2 different scenarios we need to address._
155158
},
156159
157160
methods: {
158-
handleSavingContent: function () {
159-
// This is where you would save it to your database or send it via ajax
161+
handleSavingContent: function() {
162+
// You have the content to save
160163
console.log(this.content)
161164
}
162165
}
163166
}
164167
</script>
165168
```
166169

167-
# Use a live preview
170+
## Example
171+
**_Use a Live Preview_**
168172

169173
```html
170174
<template>
@@ -182,21 +186,15 @@ _There are 2 different scenarios we need to address._
182186
},
183187
184188
export default {
185-
data: function() {
189+
data() {
186190
return {
187-
content: 'Initial Content'
191+
content: '<h1>Initial Content</h1>'
188192
}
189193
}
190194
}
191195
</script>
192196
```
193197

194-
# Install
195-
196-
```bash
197-
yarn add vue2-editor
198-
```
199-
200198
# Usage
201199

202200
```javascript

‎dist/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/App.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
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 :disabled="editorIsDisabled" v-model="editorContent"></vue-editor>
14+
<!-- <vue-editor :disabled="editorIsDisabled" v-model="editorContent"></vue-editor> -->
15+
<vue-editor v-model="editorContent" :editorToolbar="customToolbar"></vue-editor>
1516
<button class="btn btn-primary" @click="saveContent(editorContent)">Save</button>
1617
</div>
1718
<div id="preview" class="column col-6 col-sm-12" v-if="showPreview" v-html="editorContent"></div>
@@ -85,7 +86,7 @@ export default {
8586
}
8687
@media (min-width: 601px) {
8788
#preview {
88-
width: 47%;
89+
width: 47%;
8990
}
9091
}
9192

‎package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{
22
"name": "vue2-editor",
3-
"description": "HTML editor using Vue.js 2.0 and Quill.js, an open source editor&#34;",
4-
"version": "0.0.0",
5-
"repository": {},
3+
"description": "HTML editor using Vue.js 2.0 and Quill.js, an open source editor",
4+
"version": "1.1.2",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/davidroyer/vue2-editor"
8+
},
69
"main": "dist/index.js",
710
"files": [
811
"dist"

‎src/VueEditor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import 'quill/dist/quill.snow.css'
1010
1111
var defaultToolbar = [
1212
['bold', 'italic', 'underline', 'strike'],
13-
['blockquote', 'code-block'],
13+
['blockquote', 'code-block', 'image'],
1414
1515
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
1616

0 commit comments

Comments
 (0)