Beste JavaScript WYSIWYG-Lösung für eine feste Box
Ich habe eine Box, die genau 425px x 100px ist und ich möchte, dass meine Benutzer diesen Boxinhalt mit einem WYSIWYG-Editor gestalten. Sie sollten fast jeden HTML-Code in dieser Box verwenden können.
Nein, ich bin auf der Suche nach einem richtigen WYSIWYG-Editor, ich habe TinyMCE für diese Art von Problemen verwendet, aber ich denke sein Bestes für einen langen fortlaufenden Text, aber im Moment habe ich eine feste Box.
Es wäre großartig, wenn der Editor Text und Bilder absolut positionieren könnte, damit der Benutzer seinen Inhalt innerhalb dieser Box positionieren kann.
5 Antworten
ich fand ckeditor nützlich, haben reiche Funktionalität in Bezug auf Bild oder Text, ermöglichen Ihnen sowohl WYSIWYG und HTML-Quellformatierung Methoden, und es haben auch Fixgröße "Leinwand" den Benutzer nach Bedarf anpassen konnte,
Bildschirm meines praktischen Gebrauches davon drucken,
und hier ist der Quellbildschirm
und schließlich benutze ich eine Leinwand im Format 800x500 mit fester Größe
Sie können dies mit tinymce tun. Um Text und Bilder zu fixieren, benötigen Sie einen eigenen Inhalt css (siehe tinymce Dokumentation für den Konfigurationsparameter content_css ). Sie können sogar die Breite von Absätzen des Tinymce-Inhalts in diesem CSS definieren und so Ihr Box-Problem lösen. Das CSS (in Ihrer eigenen CSS-Datei) für Ihr Box-Problem würde wie folgt aussehen:
%Vor%In Bezug auf die Länge (oder bessere Höhe) müssen Sie möglicherweise ein eigenes Plugin implementieren und dort auf die Länge des Editor-Inhalts prüfen. Wenn diese Länge bereits erreicht wurde, entfernen Sie den Buchstaben / Inhalt, den der Benutzer gerade eingefügt hat.
Eine einfache, aber effektive Lösung wäre PageDown . Es verwendet Markdown, so dass es HTML-Formatierung erlaubt. PageDown enthält jedoch zwei Skripts, um den Inhalt zu bereinigen. Mit ein wenig Bastelei können Sie zusätzliche Tags erlauben oder einschränken.
Was die Positionierung anbetrifft, wie Thariama sagte, kann das leicht von Ihrem CSS kontrolliert werden, also ist es kein Problem für WYSIWYG-Editoren.
Tags und Links javascript html tinymce wysiwyg