Làm thế nào để thêm hình ảnh trong Quill JS?

Question

Tôi không thể tìm ra cách để hình ảnh hoạt động như trong ví dụ trên http://quilljs.com/.

Tôi đã thử thêm <span title="Image" class="ql-format-button ql-image"></span> vào thanh công cụ, nút này thêm nút, nhưng việc nhấp vào nút sẽ không làm gì cả và tôi không thể tìm thấy bất kỳ thứ gì trong tài liệu. Bất kì lời đề nghị nào?

Answer 1

Cập nhật trả lời

Kể từ phiên bản 1.0 trở đi, bạn không còn cần thêm mô-đun đầu công cụ được bao gồm theo mặc định. Một ví dụ về làm thế nào để kích hoạt nó sẽ được điều này.

<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

Chỉnh sửa: Điều này không còn chính xác như 1.0. Chris Hawkes's answer là chính xác.

Rất tiếc, dường như không được ghi lại ở bất kỳ đâu nhưng bạn cần đưa mô-đun chú giải công cụ hình ảnh. Ví dụ, đây là những gì các biên tập viên trên trang chủ quilljs.com sử dụng:

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

Answer 3

cũng là câu trả lời ở trên là chính xác trong js, nhưng bạn phải thêm html để trình biên tập, ví dụ:

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

để sau đó đặt trong js

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