vue quill editor

Vue-Quill-Editor

VUE（2）のクイルエディターコンポーネント。

---

非推奨！️

残念ながら、Quillプロジェクトは効果的に維持を停止しているため、 vue-quill-editor廃止され、Vue3をサポートしなくなります。リッチなテキストエディターを探している場合は、 Tiptapに移行することをお勧めします。これははるかに優れた代替手段です。

QuillがV2.0を更新した場合、このプロジェクトもおそらく更新され続けるでしょう。私は人々にこのリポジトリをフォークすることをお勧めします、そして、フォークが人気になったら、私はこのreadmeでそれにリンクします。

失速したクイルプロジェクトは、これらの問題にあります。

• クイルは死んでいますか？
• プロジェクトはまだアクティブですか？
• Quilljsとして編集者LIBを切り替えてください
• このプロジェクトのステータスは何ですか？ 1.3.7リリースから2年以上が経ちました。

---

例

• コンポーネントの例
• CDNの例

ドキュメント

• クイルガイド
• クイルAPI
• クイルドキュメント

インストール

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の例コードを参照してください。

クイルモジュールを登録します

 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-EditorがHighlight.jsの構文ハイライターモジュールとどのように組み合わされるか
• 配合element-ui实现上传图片/视频到七牛デモ
• 「変数を見つけることができない：Quill：Quill Is Undefined」、「Window.Quillは未定義」エラーを修正する方法Nuxt/SSRでWebpackを使用するQuillモジュールを使用しようとすると

クイルモジュール

• Quill-Image-Extendモジュール
• Quill-Image-Resize-Module
• クイルイメージドロップモジュール
• quilljs-table
• その他のモジュール...

Changelog

各リリースの詳細な変更は、リリースノートに文書化されています。

ライセンス

MITライセンスに基づいてライセンスされています。