So verwenden Sie das JQuery-Editor-Plugin tinyMCE

Ändern Sie die vereinfachte Dateigröße und laden Sie das Beispiel herunter: Laden Sie die Datei auf Ihren lokalen Computer herunter. Sie können den neuesten jQuery-basierten Code auch von der offiziellen Website herunterladen: https://www.jb51.net/codes/44180.html

1 html

<textarea id="txtcontent" runat="server" name="elm1" rows="15" cols="80" style="width:80%"></textarea>

2 js Referenz

Referenzieren Sie zuerst tiny_mce.js und jquery-1.4.2.min.js

Aufruf von tinyMCE:

Parameterdetails:

Modus: Textbereiche oder exakt
Elemente: Wird im Modus „exact“ verwendet. Sein Wert ist die ID oder der Name des Textbereichs, der in HTML verwendet werden soll.
Thema: Der verwendete Stil
Skin: Den Style finden Sie im entsprechenden Skin-Verzeichnis
skin_variant: Die im Skin-Verzeichnis ausgewählte CSS-Datei, z. B.: skin_variant: "schwarz" bedeutet: skins\o2k7\ui_black.css
Plugins: Plugins im Plugins-Ordner auswählen und verwenden
theme_advanced_buttons1: Die erste Reihe der Funktionsbuttons wird angezeigt, usw. theme_advanced_buttons2 usw.
3. Fügen Sie über js ein Bild zum Eingabefeld hinzu und zeigen Sie es an. Der js-Code lautet wie folgt:
tinyMCE.execCommand('mceInsertContent',false,"<p><img src=\"../images/house.jpg\" alt=\"\" width=\"588\" height=\"419\" /></p>");
Holen Sie sich den Inhalt des Eingabefelds über js. Der Code lautet wie folgt:
tinyMCE.getInstanceById('txtcontent').getBody().innerHTML