vue quill editor Download - vue quill editor Quellcode Download

vue quill editor

Andere Ressourcen

1.0.0

Herunterladen

Vue-Quill-Eduitor

Quilleditor -Komponente für Vue (2).

VERALTET ‼ ️

Da das Quill-Projekt effektiv aufrechterhalten wird, wird vue-quill-editor veraltet und VUE3 nicht mehr unterstützt. Wenn Sie nach einem reichen Texteditor suchen, empfehle ich, auf Zehenspitzen zu migrieren, was eine viel bessere Alternative ist.

Wenn Quill jemals V2.0 aktualisiert, wird dieses Projekt wahrscheinlich auch weiterhin aktualisiert. Ich ermutige die Leute, dieses Repository zu forkieren, und wenn eine Gabel populär wird, werde ich in diesem Readme darauf verlinken.

Das bestandene Quill -Projekt finden Sie in diesen Problemen:

Ist Quill tot?
Projekt noch aktiv?
Der Schalteditor Lib als Quilljs ist tot
Wie ist der Status dieses Projekts? Es ist über 2 Jahre seit der Veröffentlichung von 1.3.7 vergangen.

Beispiel

Komponentenbeispiele
CDN -Beispiele

Dokumentation

Federführer
Feder APIs
Quill -Dokumentation

Installieren

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 >

Verwendung

Globale Komponente

 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 } */ )

Lokale Komponente

 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 -Komponente

Siehe Beispielcode Nuxt.js.

Registrieren Sie das Quill -Modul

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

// Vue app...

Komponente

< 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 >

Probleme

Fügen Sie Attribute aus Symbolleistenoptionen hinzu
Option zum Einfügen eines Bildes aus einer URL
Wie Vue-Quill-Eduitor mit dem Syntax Highlighter-Modul von highlight.js kombiniert
配合 Element-ui 实现上传图片/视频到七牛 Demo
So beheben Sie "Variable können nicht finden: Quill", "Quill ist undefiniert", "window.quill ist undefined" Fehler, wenn Sie versuchen, Quill -Module zu verwenden, die Webpack in Nuxt/SSR verwenden