vue quill editor

Vue-Quill-编辑

VUE（2）的Quill Editor组件。

---

弃用‼️

不幸的是，由于Quill项目已有效地停止了维护， vue-quill-editor将被弃用，并且将不再支持Vue3；如果您正在寻找丰富的文本编辑器，我建议迁移到Tiptap ，这是更好的选择。

如果Quill曾经更新v2.0，则此项目可能会继续更新。我鼓励人们分叉这个存储库，如果叉子很受欢迎，我将在此读书中链接到它。

在这些问题中可以找到停滞的鹅毛笔项目：

• 奎尔死了吗？
• 项目还活跃吗？
• 切换编辑lib，因为Quilljs已死
• 这个项目的状态如何？自1.3.7发布以来已经超过2年了。

---

例子

• 组件示例
• CDN示例

文档

• 奎尔指南
• 奎尔apis
• 奎尔文档

安装

NPM

npm install vue-quill-editor --save

yarn add vue-quill-editor

CDN

 < link rel =" stylesheet " href =" path/to/quill.core.css " />
< link rel =" stylesheet " href =" path/to/quill.snow.css " />
< link rel =" stylesheet " href =" path/to/quill.bubble.css " />
< script type =" text/javascript " src =" path/to/quill.js " > </ script >
< script type =" text/javascript " src =" path/to/vue.min.js " > </ script >
< script type =" text/javascript " src =" path/to/dist/vue-quill-editor.js " > </ script >
< script type =" text/javascript " >
  Vue . use ( window . VueQuillEditor )
</ script >

用法

全局组件

 import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue . use ( VueQuillEditor , /* { default global options } */ ) 

本地组件

 import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components : {
    quillEditor
  }
}

SSR组件

请参阅NUXT.JS示例代码。

注册Quill模块

 import Quill from 'quill'
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
Quill . register ( 'modules/yourQuillModule' , yourQuillModule )

// Vue app...

成分

< template >
  <!-- 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
  import Quill from ' quill '
  import someModule from ' ../yourModulePath/someQuillModule.js '
  Quill . register ( ' modules/someModule ' , someModule)
  
  export default {
    data () {
      return {
        content : ' <h2>I am Example</h2> ' ,
        editorOption : {
          // Some Quill options...
        }
      }
    },
    methods : {
      onEditorBlur ( quill ) {
        console . log ( ' editor blur! ' , quill)
      },
      onEditorFocus ( quill ) {
        console . log ( ' editor focus! ' , quill)
      },
      onEditorReady ( quill ) {
        console . log ( ' editor ready! ' , quill)
      },
      onEditorChange ({ quill, html, text }) {
        console . log ( ' editor change! ' , quill, html, text)
        this . content = html
      }
    },
    computed : {
      editor () {
        return this . $refs . myQuillEditor . quill
      }
    },
    mounted () {
      console . log ( ' this is current quill instance object ' , this . editor )
    }
  }
</ script >

问题

• 添加工具栏选项的属性
• 从URL插入图像的选项
• Vue-Quill-编辑器如何与亮点的语法荧光笔模块结合
• 配合元素-UI实现上传图片/视频到七牛演示
• 如何修复“找不到变量：quill”，“ quill是不确定的”，“ window.quill是未定义的”错误时，尝试使用在NUXT/SSR中使用WebPack的Quill模块时

奎尔模块

• quill-image-extend模块
• Quill-image-resize模块
• Quill-image-Drop模块
• quilljs-table
• 更多模块...

ChangElog

每个版本的详细更改记录在发行说明中。

执照

根据MIT许可获得许可。