TinyEditor ist ein einfacher und benutzerfreundlicher HTML-WYSIWYG-Editor

Vor einigen Tagen habe ich Ihnen einen inländischen XHTML-Editor vorgestellt. Heute möchte ich Ihnen TinyEditor empfehlen, einen einfachen und benutzerfreundlichen HTML-WYSIWYG-Editor, der gerade vom bekannten ausländischen Webdesign-Blog leigeber.com veröffentlicht wurde.

TinyEditor hat die folgenden Funktionen

• Es ist in Javascript geschrieben und ist nicht von anderen Bibliotheken abhängig.
• Dies ist ein leichter Editor, die aufzurufende Datei ist nur 8 KB groß
• Es kann die meisten HTML-Formatierungsanforderungen bewältigen und verfügt über eine integrierte Funktion, um das generierte Markup so präzise wie möglich zu halten.
• Die im Editor verwendeten kleinen Symbole nutzen die CSS-Sprite-Technologie, um die Anzahl der HTTP-Verbindungen zu reduzieren.
• Getestet in den wichtigsten Browsern
• Kann in persönlichen oder kommerziellen Projekten unter der Creative Commons-Lizenz verwendet werden

So verwenden Sie es:

1. Verweisen Sie in der Webseitendatei auf die von TinyEditor bereitgestellten JS- und CSS-Dateien
2. Fügen Sie die vom Editor benötigten Tags in die Webseitendatei ein, die eigentlich ein Textbereich ist, und zwar wie folgt

    < Textbereich -ID = "Eingabe" Stil = "Breite: 400px; Höhe: 200px" >< / Textbereich >

   Beachten Sie, dass die im Textbereich definierte Länge und Breite der Größe des Editors entsprechen.

3. Initialisieren Sie den Editor über das Skript und konfigurieren Sie verschiedene Parameter wie folgt:

    neuer TINY.editor . edit ( 'editor' , {
   	ID : "Eingabe" , 
   // (Erforderlich) Die ID des Textbereichs, der in Schritt 2 oben definiert wurde
   	Breite : 584 , 
   // (optional) Editorbreite
   	Höhe : 175 ,
    // (optional) Editorhöhe
   	CSS-Klasse : "te" ,
    // (optional) Die Klasse des Editors, die verwendet wird, um den Stil über CSS zu steuern
   	Kontrollklasse : „tecontrol“ ,
    // (optional) Klasse des Editor-Buttons
   	Zeilenklasse : "teheader" ,
    // (optional) Klasse für die Editor-Schaltflächenzeile
   	Teilerklasse : "tedivider" , 
   // (optional) Der Stil der Trennlinie zwischen den Editor-Schaltflächen
   	Steuerelemente : [ „Fett“ , „Kursiv“ , „Unterstrichen“ , „Durchgestrichen“ , „|“ , „Tiefgestellt“ , „Hochgestellt“ , „|“ , „Sortierte Liste“ , „Unsortierte Liste“ , „|“ , „Ausrücken“ , „Einrücken“ , „|“ , „Linksbündig“ , „Zentrieren“ , „Rechtsbündig“ , „Blockbündig“ , „|“ , „Formatierung aufheben“ , „|“ , „Rückgängig machen“ , „Wiederholen“ , „n“ , „Schriftart“ , „Größe“ , „Stil“ , „|“ , „Bild“ , „hr“ , „Link“ , „Verknüpfung aufheben“ , „|“ , „Ausschneiden“ , „Kopieren“ , „Einfügen“ , „Drucken“ ] ,
    // (Erforderlich) Fügen Sie dem Editor nach Bedarf Schaltflächensteuerelemente hinzu, wobei „|“ die vertikale Trennlinie zwischen Funktionsschaltflächen und „n“ die Trennlinie zwischen Schaltflächenreihen darstellt
   	Fußzeile : wahr , 
   // (Optional) Ob der untere Teil des Editors angezeigt werden soll
   	Schriftarten : [ 'Verdana' , 'Arial' , 'Georgia' , 'Trebuchet MS' ] ,  
   // (optional) Schriftarten, die im Editor ausgewählt werden können
   	xhtml : wahr , 
   // (optional) Ob der Editor xhtml oder html Tags generiert
   	CSS-Datei : „style.css“ , 
   // (optional) externe CSS-Datei zum Anhängen an den Editor
   	Inhalt : „Startinhalt“ , 
   // (optional) Legen Sie den anfänglichen Inhalt im Bearbeitungsbereich des Editors fest
   	css : 'body{Hintergrundfarbe:#ccc}' ,
    // (optional) Hintergrund für den Bearbeitungsbereich des Editors festlegen
   	bodyid : "Editor" , 
   // (optional) Festlegen der Bearbeitungsbereichs-ID
   	Fußzeilenklasse : "tefooter" , 
   // (optional) Setze die unterste Klasse des Editors
   	Umschalten : { Text : 'Quellcode' , ActiveText : 'Visualisierung' , CSS-Klasse : 'Umschalten' } ,
    // (Optional) Legen Sie den Quellcode-Browsing-Umschalttext und die Umschalttastenklasse fest
   	Größe ändern : { cssclass : 'Größe ändern' } 
   // (optional) Legen Sie die Klasse der Schaltfläche zur Größenänderung des Editors fest
   } ) ;

   Man kann sagen, dass es in hohem Maße konfigurierbar ist und die Konfigurationselemente relativ klar sind.

Bei der tatsächlichen Anwendung von TinyEditor ist zu beachten, dass vor dem Senden des Editorinhalts die Funktion instance.post () aufgerufen werden muss, um sicherzustellen, dass der neueste visuelle Inhalt im Bearbeitungsbereich in Markup-Text umgewandelt wird.

Siehe Beispiel: http://sandbox.leigeber.com/tinyeditor/
Download: TinyEditor-Quellcode und Beispieldateien