From c97d3373bf06c60e89dd551238ce1a34b6874b3e Mon Sep 17 00:00:00 2001 From: surmon-china Date: Wed, 11 Mar 2020 05:29:03 +0800 Subject: [PATCH] Update document & remove examples --- .github/ISSUE_TEMPLATE.md | 10 +- README.md | 148 +++++------------- examples/01-example.vue | 133 ---------------- examples/02-example.vue | 122 --------------- examples/03-example.vue | 143 ----------------- examples/04-example.vue | 134 ---------------- examples/index.js | 11 -- .../nuxt-ssr-example/nuxt-quill-plugin.js | 5 - .../nuxt-ssr-example/nuxt-ssr-example.vue | 66 -------- examples/nuxt-ssr-example/nuxt.config.js | 13 -- 10 files changed, 47 insertions(+), 738 deletions(-) delete mode 100644 examples/01-example.vue delete mode 100644 examples/02-example.vue delete mode 100644 examples/03-example.vue delete mode 100644 examples/04-example.vue delete mode 100644 examples/index.js delete mode 100644 examples/nuxt-ssr-example/nuxt-quill-plugin.js delete mode 100644 examples/nuxt-ssr-example/nuxt-ssr-example.vue delete mode 100644 examples/nuxt-ssr-example/nuxt.config.js diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 605cd83..56930bf 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,11 +1,9 @@ ### 中文用户注意: - -1. 尽量用英文描述你的 issue +1. 尽量用英文描述你的 Issue,你的问题是面向世界的 2. 不要把内容堆彻在标题上,逻辑清晰地写在内容区 3. 贴代码要提前格式化好,有颜色高亮那种,贴文本,不要贴图片 -4. 提问题前,必须仔细阅读 REMADE.md + 在已关闭的问题中寻找与自身相关的问题,90% 的可能它已经被解决 -5. **如果无法做到提一个合格、优秀的问题,则问题会被 close + block** +4. 提问题前,务必仔细阅读 REMADE.md;在已关闭的问题中寻找与自身相关的问题,90% 的可能它已经被解决 ### BUG REPORT TEMPLATE @@ -17,6 +15,6 @@ #### Steps to reproduce -#### What is Expected? +#### What is Expected? -#### What is actually happening? \ No newline at end of file +#### What is actually happening? diff --git a/README.md b/README.md index fcc5720..102e2c7 100644 --- a/README.md +++ b/README.md @@ -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 @@ -45,15 +44,9 @@ ``` -#### NPM - -``` bash -npm install vue-quill-editor --save -``` - ### Mount -#### mount with global +#### Mount with global ``` javascript import Vue from 'vue' @@ -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 @@ -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 - - - +// Vue app... ``` - -### SPA +### Component ``` vue ``` +### 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) @@ -226,7 +167,7 @@ Quill.register('modules/yourQuillModule', yourQuillModule) - [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) @@ -234,9 +175,6 @@ Quill.register('modules/yourQuillModule', yourQuillModule) - [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) diff --git a/examples/01-example.vue b/examples/01-example.vue deleted file mode 100644 index 0a39cac..0000000 --- a/examples/01-example.vue +++ /dev/null @@ -1,133 +0,0 @@ - - - - - diff --git a/examples/02-example.vue b/examples/02-example.vue deleted file mode 100644 index 4b704f9..0000000 --- a/examples/02-example.vue +++ /dev/null @@ -1,122 +0,0 @@ - - - - - diff --git a/examples/03-example.vue b/examples/03-example.vue deleted file mode 100644 index a0869ad..0000000 --- a/examples/03-example.vue +++ /dev/null @@ -1,143 +0,0 @@ - - - - - diff --git a/examples/04-example.vue b/examples/04-example.vue deleted file mode 100644 index a151e5f..0000000 --- a/examples/04-example.vue +++ /dev/null @@ -1,134 +0,0 @@ - - - - - - - diff --git a/examples/index.js b/examples/index.js deleted file mode 100644 index b73873f..0000000 --- a/examples/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import example01 from './01-example.vue' -import example02 from './02-example.vue' -import example03 from './03-example.vue' -import example04 from './04-example.vue' - -export default { - example01, - example02, - example03, - example04 -} diff --git a/examples/nuxt-ssr-example/nuxt-quill-plugin.js b/examples/nuxt-ssr-example/nuxt-quill-plugin.js deleted file mode 100644 index 08b7a2c..0000000 --- a/examples/nuxt-ssr-example/nuxt-quill-plugin.js +++ /dev/null @@ -1,5 +0,0 @@ - -import Vue from 'vue' -import VueQuillEditor from 'vue-quill-editor/dist/ssr' - -Vue.use(VueQuillEditor) diff --git a/examples/nuxt-ssr-example/nuxt-ssr-example.vue b/examples/nuxt-ssr-example/nuxt-ssr-example.vue deleted file mode 100644 index 2f2b6ac..0000000 --- a/examples/nuxt-ssr-example/nuxt-ssr-example.vue +++ /dev/null @@ -1,66 +0,0 @@ - - - - - diff --git a/examples/nuxt-ssr-example/nuxt.config.js b/examples/nuxt-ssr-example/nuxt.config.js deleted file mode 100644 index f76f27f..0000000 --- a/examples/nuxt-ssr-example/nuxt.config.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports = { - // some nuxt config... - plugins: [ - { src: '~plugins/nuxt-quill-plugin.js', ssr: false } - ], - // some nuxt config... - css: [ - 'quill/dist/quill.snow.css', - 'quill/dist/quill.bubble.css', - 'quill/dist/quill.core.css' - ], - // some nuxt config... -}