Как добавить изображение в Quill JS?

Question

Я не могу понять, как заставить изображения работать, как в примере на http://quilljs.com/.

Я попытался добавить <span title="Image" class="ql-format-button ql-image"></span> к панели инструментов, которая добавляет кнопку, но нажатие на кнопку ничего не делает, и я не могу найти что-либо в документации. Любое предложение?

Answer 1

Обновлено Ответ

Начиная с версии 1.0 и выше вам больше не нужно добавлять модуль подсказки, он включен по умолчанию. Примером того, как включить его, было бы это.

<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

Редактировать: актуально не более 1.0. answer соответствует требованиям Криса Хокса.

Это, к сожалению, не документировано нигде, но вам необходимо включить модуль подсказки изображения. Например, это то, что редактор на quilljs.com домашнюю страницу использует:

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

Answer 3

хорошо выше ответ является правильным в JS, но вы должны добавить HTML в редакторе, например:

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

так что после этого положить в JS

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