Come aggiungere l'immagine in Quill JS?

Question

Non riesco a capire come far funzionare le immagini come nell'esempio su http://quilljs.com/.

Ho provato ad aggiungere <span title="Image" class="ql-format-button ql-image"></span> alla barra degli strumenti, che aggiunge il pulsante, ma facendo clic sul pulsante non fa nulla e non riesco a trovare nulla nella documentazione. Qualche suggerimento?

Answer 1

risposta aggiornato

A partire dalla versione 1.0 e oltre non è più necessario aggiungere il modulo tool-tip che è incluso di default. Un esempio di come abilitarlo sarebbe questo.

<script> 
      var toolbarOptions = [ 
       ['bold', 'italic', 'underline', 'strike'],  // toggled buttons 
       ['blockquote', 'code-block'], 

       [{ 'header': 1 }, { 'header': 2 }],    // custom button values 
       [{ 'list': 'ordered'}, { 'list': 'bullet' }], 
       [{ 'script': 'sub'}, { 'script': 'super' }],  // superscript/subscript 
       [{ 'indent': '-1'}, { 'indent': '+1' }],   // outdent/indent 
       [{ 'direction': 'rtl' }],       // text direction 

       [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown 
       [{ 'header': [1, 2, 3, 4, 5, 6, false] }], 
       [ 'link', 'image', 'video', 'formula' ],   // add's image support 
       [{ 'color': [] }, { 'background': [] }],   // dropdown with defaults from theme 
       [{ 'font': [] }], 
       [{ 'align': [] }], 

       ['clean']           // remove formatting button 
      ]; 

     var quill = new Quill('#editor', { 
      modules: { 
       toolbar: toolbarOptions 
      }, 

      theme: 'snow' 
     }); 
    </script> 

Answer 2

Modifica: questo non è più accurato a partire da 1.0. Il numero answer di Chris Hawkes è corretto.

Questo purtroppo non sembra documentato da nessuna parte ma è necessario includere il modulo image-tooltip. Ad esempio, questo è ciò che l'editor sulla homepage quilljs.com usa:

quill = new Quill('#editor', { 
    modules: { 
    'toolbar': { container: '#toolbar' }, 
    'image-tooltip': true, 
    'link-tooltip': true 
    }, 
    theme: 'snow' 
}); 

Answer 3

bene la risposta di cui sopra è la corretta nei js, ma bisogna aggiungere html l'editor, ad esempio:

<span class="ql-format-group"> 
    <span title="Link" class="ql-format-button ql-link"></span> 
    <span class="ql-format-separator"></span> 
    <span title="Image" class="ql-format-button ql-image"></span> 
</span> 

modo dopo che ha messo in js

quill = new Quill('#editor', { 
    modules: { 
    'toolbar': { container: '#toolbar' }, 
    'image-tooltip': true, 
    'link-tooltip': true 
    }, 
    theme: 'snow' 
});