2015-03-12 11 views
10

Ich kann nicht herausfinden, wie man Bilder wie im Beispiel http://quilljs.com/ zum Arbeiten bringt.Wie füge ich Bild in Quill JS hinzu?

Ich habe versucht, <span title="Image" class="ql-format-button ql-image"></span> der Symbolleiste hinzuzufügen, die die Schaltfläche hinzufügt, aber das Klicken auf die Schaltfläche tut nichts und ich kann nichts in der Dokumentation finden. Irgendein Vorschlag?

Antwort

6

aktualisiert Antwort

Ab Version 1.0 muss das Tool-Tip-Modul, das standardmäßig enthalten ist, nicht mehr hinzugefügt werden. Ein Beispiel für die Aktivierung wäre dies.

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

können wir ein großes Bild hochladen? und speichern Sie es auf dem Server und speichern Pfad des Bildes anstelle von Base64-Daten – hardik

+0

Dieser Beitrag ist sehr hilfreich. Ich habe gerade dieses Array hinzugefügt und die Optionen wie gezeigt eingestellt und es gab mir einen vollständig eingerichteten Badass-Editor, der mich jetzt denken lässt, dass JIRA/Confluence Quill verwendet. – agm1984

+0

Wo sind all diese magischen Strings definiert? –

10

Edit: Dies ist nicht mehr genau ab 1,0. Chris Hawkes answer ist korrekt.

Dies scheint leider nirgendwo dokumentiert, aber Sie müssen das Image-Tooltip-Modul enthalten. Zum Beispiel ist es das, was der Editor auf der quilljs.com Homepage benutzt:

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

auch die oben genannte Antwort die richtige in der js ist, aber Sie haben html Editor Beispiel hinzuzufügen:

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

so nach, dass put in der js

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

Warum erstellt keines der Beispiele zum Erstellen der Symbolleiste tatsächlich die Symbolleiste oberhalb der Beispiele? Oder ein Beispiel was die "Titel" Dinge sind, warum die Beispiele nicht einmal enthalten? – Michael

+1

Ich bin so frustriert mit ihren schrecklichen Beispielen und Dokumentation. Es ist eine Schande, dieses Tool ist genau das, was ich brauche - aber, wow. "Ja wirklich?" Ich meine, niemand mag Dokumentation, aber OH MIR nimmt das den Kuchen – scniro

+0

und was ist das, dass Sie nicht verstehen können? –

Verwandte Themen