vue quill editor Download - vue quill editor de código fonte download

vue quill editor

Outros recursos

1.0.0

Baixar

Vue-Quill-Editor

Componente do Editor de Quill para Vue (2).

Descontinuado ‼ ️

Infelizmente, como o projeto Quill parou efetivamente de ser mantido, vue-quill-editor será preterido e não apoiará mais o VUE3; Se você está procurando um editor de texto rico, recomendo migrar para a Tipptap , o que é uma alternativa muito melhor.

Se a Quill atualizar v2.0, este projeto provavelmente continuará sendo atualizado também. Encorajo as pessoas a bifurcar este repositório e, se um garfo for popular, vou vincular -se a ele neste Readme.

O projeto de quill paralisado pode ser encontrado nessas questões:

Quill está morto?
Projeto ainda ativo?
O editor de troca Lib como Quilljs está morto
Qual é o status deste projeto? Faz mais de 2 anos desde 1.3.7 lançamento.

Exemplo

Exemplos de componentes
Exemplos de CDN

Documentação

Guias de pena
Quill APIs
Documentação de Quill

Instalar

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 >

Uso

Componente global

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

Componente local

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

Componente SSR

Consulte o código de exemplo nuxt.js.

Registre o módulo Quill

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

// Vue app...

Componente

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

Problemas

Adicione atributos das opções da barra de ferramentas
Opção para inserir uma imagem de um URL
Como se combinam como vue-quill-editor com o módulo de marcador de sintaxe de destaque.js
配合 Element-ui 实现上传图片/视频到七牛 Demo
Como corrigir “Não é possível encontrar variável: quill”, “quill é indefinido”, “window.quill é indefinido” erros ao tentar usar módulos de quill que usam webpack em nuxt/ssr