Jak dodać obraz w Quill JS?

Question

Nie mogę dowiedzieć się, jak uzyskać obrazy do pracy, jak w przykładzie na http://quilljs.com/.

Próbowałem dodać <span title="Image" class="ql-format-button ql-image"></span> do paska narzędzi, który dodaje przycisk, ale kliknięcie przycisku nic nie robi i nie mogę znaleźć niczego w dokumentacji. Jakieś sugestie?

Answer 1

Updated Odpowiedź

Od wersji 1.0 i późniejszych nie trzeba już dodawać modułu końcówki narzędzia, który jest domyślnie dołączony. Przykładem tego jest włączenie.

<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

Edycja: Nie jest już dokładna od wersji 1.0. Chris Hawkes's answer jest poprawny.

To niestety nie wydaje się udokumentowane w żadnym miejscu, ale należy dołączyć moduł obrazu-podpowiedzi. Na przykład, to co redaktor na stronie głównej quilljs.com używa:

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

Answer 3

dobrze powyższego odpowiedź jest poprawna w js, ale trzeba dodać HTML do edytora, np:

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

tak potem umieścić w js

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