Skip to content

Commit

Permalink
Update document & remove examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@surmon-china
surmon-china committed Mar 10, 2020
1 parent 90ef83f commit c97d337
Show file tree
Hide file tree
Showing 10 changed files with 47 additions and 738 deletions.
10 changes: 4 additions & 6 deletions .github/ISSUE_TEMPLATE.md
View file
@@ -1,11 +1,9 @@

### 中文用户注意：

1. 尽量用英文描述你的 issue
1. 尽量用英文描述你的 Issue，你的问题是面向世界的
2. 不要把内容堆彻在标题上，逻辑清晰地写在内容区
3. 贴代码要提前格式化好，有颜色高亮那种，贴文本，不要贴图片
4. 提问题前，必须仔细阅读 REMADE.md + 在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决
5. **如果无法做到提一个合格、优秀的问题，则问题会被 close + block**
4. 提问题前，务必仔细阅读 REMADE.md；在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决

### BUG REPORT TEMPLATE

Expand All @@ -17,6 +15,6 @@

#### Steps to reproduce

#### What is Expected?
#### What is Expected?

#### What is actually happening?
#### What is actually happening?
148 changes: 43 additions & 105 deletions README.md
View file
Expand Up @@ -4,34 +4,33 @@
[![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/network)
[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-quill-editor.svg?style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/surmon-china/vue-quill-editor)
[![](https://badge.juejin.im/entry/5852b6fc61ff4b006c89b49d/likes.svg?style=flat-square)](https://juejin.im/entry/5852b6fc61ff4b006c89b49d/detail)

[![NPM](https://nodei.co/npm/vue-quill-editor.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-quill-editor/)
[![NPM](https://nodei.co/npm-dl/vue-quill-editor.png?months=9&height=3)](https://nodei.co/npm/vue-quill-editor/)


# Vue-Quill-Editor
🍡Quill editor component for Vue, support SPA and SSR.

基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
🍡[Quill](https://github.com/quilljs/quill) editor component for Vue.

基于 [Quill](https://github.com/quilljs/quill)、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。

## Example

[Demo Page](https://surmon-china.github.io/vue-quill-editor/)
### Example

[CDN Example](https://jsfiddle.net/tng9r8j3/)
- [Component example page](https://surmon-china.github.io/vue-quill-editor/)
- [CDN example page](https://jsfiddle.net/tng9r8j3/)

[Nuxt.js/SSR example code](https://github.com/surmon-china/vue-quill-editor/blob/master/examples/nuxt-ssr-example)

#### Projects Using Vue-Quill-Editor
[Tamiat CMS](https://github.com/tamiat/tamiat/)
### Install

**NPM**

## Install
``` bash
npm install vue-quill-editor --save
```

#### CDN
**CDN**

``` html
<link rel="stylesheet" href="path/to/quill.core.css"/>
Expand All @@ -45,15 +44,9 @@
</script>
```

#### NPM

``` bash
npm install vue-quill-editor --save
```

### Mount

#### mount with global
#### Mount with global

``` javascript
import Vue from 'vue'
Expand All @@ -67,7 +60,7 @@ import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)
```

#### mount with component
#### Mount with local component

```javascript
// require styles
Expand All @@ -84,97 +77,44 @@ export default {
}
```

#### mount with ssr
#### Mount with SSR

```javascript
// if used in nuxt.js/ssr, you should keep require it only in browser build environment
if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/dist/ssr')
Vue.use(VueQuillEditor, /* { default global options } */)
}
```
View [Nuxt.js example code](https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-quill-editor/nuxt).

#### register quill module
### Register Quill module

```javascript
// register quill modules, you need to introduce and register before the vue program is instantiated
import Quill from 'quill'
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
Quill.register('modules/yourQuillModule', yourQuillModule)
```

### Difference（使用方法的区别）

**SSR and the only difference in the use of the SPA:**
- SPA worked by the `component`, find quill instance by `ref attribute`.
- SSR worked by the `directive`, find quill instance by `directive arg`.
- Other configurations, events are the same.

### SSR

``` vue
<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
<template>
<!-- bidirectional data binding（双向数据绑定） -->
<div class="quill-editor"
v-model="content"
v-quill:myQuillEditor="editorOption">
</div>
<!-- Or manually control the data synchronization（手动控制数据流） -->
<div class="quill-editor"
:content="content"
@change="onEditorChange($event)"
v-quill:myQuillEditor="editorOption">
</div>
</template>

<script>
export default {
data() {
return {
content: '<p>example content</p>',
editorOption: { /* quill options */ }
}
},
mounted() {
console.log('this is current quill instance object', this.myQuillEditor)
},
methods: {
onEditorChange(event) {
console.log('onEditorChange')
}
},
// Omit the same parts as in the following component sample code
// ...
}
</script>
// Vue app...
```


### SPA
### Component

``` vue
<template>
<!-- bidirectional data binding（双向数据绑定） -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- Or manually control the data synchronization（或手动控制数据流） -->
<quill-editor :content="content"
:options="editorOption"
@change="onEditorChange($event)">
</quill-editor>
<!-- Two-way Data-Binding -->
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
/>
<!-- Or manually control the data synchronization -->
<quill-editor
:content="content"
:options="editorOption"
@change="onEditorChange($event)"
/>
</template>
<script>
// you can also register quill modules in the component
// You can also register Quill modules in the component
import Quill from 'quill'
import { someModule } from '../yourModulePath/someQuillModule.js'
Quill.register('modules/someModule', someModule)
Expand All @@ -184,12 +124,10 @@ Quill.register('modules/yourQuillModule', yourQuillModule)
return {
content: '<h2>I am Example</h2>',
editorOption: {
// some quill options
// Some Quill options...
}
}
},
// manually control the data synchronization
// 如果需要手动控制数据同步，父组件需要显式地处理changed事件
methods: {
onEditorBlur(quill) {
console.log('editor blur!', quill)
Expand Down Expand Up @@ -217,26 +155,26 @@ Quill.register('modules/yourQuillModule', yourQuillModule)
</script>
```

### Projects Using vue-quill-editor
- [Tamiat CMS](https://github.com/tamiat/tamiat/)
- ...

## Modules
### Modules
- [quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)
- [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)
- [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)
- [quilljs-table](https://github.com/dost/quilljs-table)
- [more modules...](https://github.com/search?o=desc&q=quill+module&s=stars&type=Repositories&utf8=%E2%9C%93)


## Issues
### Issues
- [Add attributes from toolbar options](https://github.com/quilljs/quill/issues/1084)
- [Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)
- [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https://github.com/surmon-china/vue-quill-editor/issues/39)
- [配合 element-ui 实现上传图片/视频到七牛 demo](https://github.com/surmon-china/vue-quill-editor/issues/102)
- [How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR](https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411)


## Quill documents
[Api docs](https://quilljs.com/docs/quickstart/)

### Quill
[Quill API document](https://quilljs.com/docs/quickstart/)

## Author
[Surmon](https://surmon.me)
133 changes: 0 additions & 133 deletions examples/01-example.vue
View file

This file was deleted.

0 comments on commit c97d337

Please sign in to comment.