CKEditor
0 
Felix Riesterer
0 0 Felix Riesterer
0
CKEditor
Hallo,
hat jemand Erfahrung mit dem CKEditor? Ich möchte gerne den "Balloon Editor" verwenden:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#balloon-editor
Da steht ich soll dieses so einbauen
<div id="editor">
<p>This is some sample content.</p>
</div>
Ein DIV bringt mir aber nichts, wenn ich die Daten in die Datenbank schicken möchte, dazu benötige ich eine
<label for="n_news" class="textarea">News</label>
<textarea name="n_news" id="n_news"></textarea>
Aktiviert wird dieses so
BalloonEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
Wenn ich bei querySelector mein #n_news anspreche funktioniert dieses nicht. Er mag einfach keine textarea.
Habt ihr eine Idee? Oder kann ich ein $_POST auch ohne textarea abschicken?
-
Lieber Bernd,
hat jemand Erfahrung mit dem CKEditor?
nö, aber dem TinyMCE.
Ich möchte gerne den "Balloon Editor" verwenden:
Was genau ist der "Baloon Editor"? Was unterscheidet ihn von anderen Formen des CKEditors?
Da steht ich soll dieses so einbauen
<div id="editor"> <p>This is some sample content.</p> </div>Da wirst Du wohl in der Konfiguration Deines Editors einen Namen vergeben müssen (wahrscheinlich gilt bereits der ID-Wert Deines Container-Elements), der dann als POST-Parameter verwendet wird.
<label for="n_news" class="textarea">News</label> <textarea name="n_news" id="n_news"></textarea>Beim TinyMCE wäre das auch OK.
Wenn ich bei querySelector mein #n_news anspreche funktioniert dieses nicht. Er mag einfach keine textarea.
Wenn Du einen WYSIWYG-Editor verwendest, dann musst Du das Editor-Objekt ansprechen, welches Dir mit seinen Methoden den aktuellen HTML-Code seines Inhalts liefern kann - ansonsten kommt der via HTTP-POST-Request.
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
nö, aber dem TinyMCE.
hatte ich auch erst vor, aber die wollen ein Key haben, das heißt man muss seine Webseite hinterlegen. Sehe ich nicht ein.
Was genau ist der "Baloon Editor"? Was unterscheidet ihn von anderen Formen des CKEditors?
Da erscheint die Bearbeitungsleiste erst wenn du ein Wort oder Absatz mit der Maus markiert hast.
Da wirst Du wohl in der Konfiguration Deines Editors einen Namen vergeben müssen (wahrscheinlich gilt bereits der ID-Wert Deines Container-Elements), der dann als POST-Parameter verwendet wird.
hatte ich auf #n_news angepasst. Dann funktioniert es auch, aber wie erwähnt leider nicht innerhalb einer textarea.
<label for="n_news" class="textarea">News</label> <textarea name="n_news" id="n_news"></textarea>Beim TinyMCE wäre das auch OK.
Wenn ich den Classic editor nutze funktioniert dieses auch:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#classic-editorWenn Du einen WYSIWYG-Editor verwendest, dann musst Du das Editor-Objekt ansprechen, welches Dir mit seinen Methoden den aktuellen HTML-Code seines Inhalts liefern kann - ansonsten kommt der via HTTP-POST-Request.
Verstehe ich ehrlich gesagt nicht.
EDIT: Hier steht wie ich es umsetzten könnte, verstehe nur nicht so recht, was ich da machen soll:
-
Lieber Bernd,
aber die [TinyMCE-Leute aka Ephox] wollen ein Key haben, das heißt man muss seine Webseite hinterlegen. Sehe ich nicht ein.
diese Notwendigkeit stellt sich nur, wenn Du die TinyMCE-Dateien nicht selbst hosten möchtest, sondern deren CDN benutzt.
Da erscheint die Bearbeitungsleiste erst wenn du ein Wort oder Absatz mit der Maus markiert hast.
Das entspricht wohl dem Inline-Editor bei TinyMCE.
hatte ich auf #n_news angepasst. Dann funktioniert es auch, aber wie erwähnt leider nicht innerhalb einer textarea.
Als ich vor Jahren den CKEditor ausprobiert hatte, gab es auch eine Möglichkeit, ihn mit einer Textarea zu nutzen, die er natürlich visuell versteckt hielt, wie das TinyMCE ebenfalls tut.
Wenn Du einen WYSIWYG-Editor verwendest, dann musst Du das Editor-Objekt ansprechen, welches Dir mit seinen Methoden den aktuellen HTML-Code seines Inhalts liefern kann - ansonsten kommt der via HTTP-POST-Request.
Verstehe ich ehrlich gesagt nicht.
Die ursprüngliche Textarea ist ein reines Texteingabefeld mit Mehrzeilenunterstützung. WYSIWYG geht damit nicht. Um nun einen WYSIWYG-Editor haben kannst, musst Du mit JavaScript einen besonderen Modus des Browsers nutzen (Stichwort contenteditable), der grundlegende Bearbeitungsmöglichkeiten innerhalb eines Elements erlaubt. Üblicherweise nutzen Editoren wie CKEditor und TinyMCE dieses Feature und - das Wichtigste überhaupt - sorgen dafür, dass es sich bei allen Browsern gleichermaßen bedienen lässt. Zusätzlich bieten sie bequeme Dialoge, um diverse Dinge mit dem Inhalt anzustellen (Bilder-, Links- und Tabellen-Handling etc.).
Da diese Editoren mit JavaScript umgesetzt sind, stellen sie aus Sicht von JavaScript Objekte dar. Möchtest Du z.B. mehrere Editoren auf einer Seite einsetzen, dann ist das ja problemlos möglich. Bei TinyMCE kannst Du den Hinhalt eines Editors so erhalten:
// Editor Nummer 1 ist tinymce.editors[0] var html = tinymce.editors[0].getContent();Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
ich habe jetzt mal den tinymce heruntergeladen und eingebunden
<script src="js/tinymce/tinymce.min.js"></script> tinymce.init({ selector: '#n_news', height: 500, menubar: false, toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat', });Allerdings werden sämtliche Optionen überhaupt nicht eingeblendet
Und wirklich schön sieht dieser Editor leider auch nicht aus. Und wenn du den mit CSS System willst musst du dich durch hunderte von DIVs kämpfen. Ich weiß nicht ob dieser wirklich der richtige ist.
Hier siehst du alle Symbole, die ich auch gerne hätte, abgesehen von der ersten Leiste mit den Wörtern: https://codepen.io/tinymce/pen/NGegZK
-
Lieber Bernd,
Allerdings werden sämtliche Optionen überhaupt nicht eingeblendet
was genau möchtest Du erreichen?
Und wirklich schön sieht dieser Editor leider auch nicht aus.
Wie genau soll er denn aussehen? Es gibt verschiedene Skins...
Und wenn du den mit CSS System willst musst du dich durch hunderte von DIVs kämpfen.
Nein, Du willst anscheinend etwas anderes... aber was genau?
Ich weiß nicht ob dieser wirklich der richtige ist.
Das kannst nur Du beurteilen, wenn Du festgelegt hast, was Du genau willst.
Liebe Grüße,
Felix Riesterer.
-
Hallo,
ich habe meinen Beitrag oben nochmals bearbeitet, kurz bevor du deinen wohl abgeschickt hattest. Es geht mir um diese vollständige Leiste:
Die ersten 4 Symbole benötige ich nicht genauso wie das letzte.
Hier habe ich ein Link gefunden wo alle Symbole aufgelistet sind die ich benötige:
https://codepen.io/tinymce/pen/NGegZK-
Lieber Bernd,
hinter manchen Icons verstecken sich Funktionalitäten, die von Plugins bereitgestellt werden. Diese müssen in der
plugins-Eigenschaft Deines Konfigurationsobjekts erwähnt werden, damit der Editor diese Plugins lädt. Um dann deren Buttons angezeigt zu bekommen, erfordert ihre Nennung in dertoolbar1-Eigenschaft.Welche Funktionalitäten möchtest Du denn anbieten? Die Möglichkeit für Undo oder Redo möchtest Du doch sicherlich belassen, oder nicht?
Anstelle eines Codepen empfehle ich ein TinyMCE-Fiddle!
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
wie gesagt möchte ich nur die Basic Funktionen haben
Vielleicht kann sogar auch der Paragraph raus.
-
OK, ich habe es
tinymce.init({ selector: '#n_news', height: 500, menubar: false, plugins: [ "colorpicker", " lists link", " textcolor" ], toolbar: 'bold italic strikethrough forecolor backcolor | link | numlist bullist | removeformat', });
-
-
-
-
-
-
-
-
