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 में सही है, लेकिन आप संपादक, उदाहरण के लिए एचटीएमएल जोड़ने के लिए:

<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' 
});