Tinyeditor Der einfache und benutzerfreundliche HTML Wysiwyg Editor

Vor ein paar Tagen habe ich Ihnen einen inländischen XHTML -Editor vorgestellt. Heute möchte ich Ihnen Tinyeditor empfehlen. Es ist ein einfacher und benutzerfreundlicher HTML-Wysiwyg-Editor, der gerade von Leigeb.com veröffentlicht wurde, einem bekannten Blog für ausländische Webdesign.

• Es ist in JavaScript geschrieben und hängt nicht von anderen Bibliotheken ab
• Dies ist ein leichter Editor, und die zugerufenen Dateien sind nur 8 KB
• Es kann die meisten Anforderungen an die HTML-Formatierung erfüllen, und die integrierten Funktionen machen die generierten Tags so einfach wie möglich
• Das im Editor verwendete kleine Symbol verwendet die CSS -Sprite -Technologie, wodurch HTTP -Verbindungen reduziert werden
• Testpass in Mainstream -Browsern
• Kann in persönlichen oder kommerziellen Projekten nach der Creative Commons -Lizenz verwendet werden

1. Verweisen Sie auf die von TinyEditor in Webseitendateien bereitgestellten JS- und CSS -Dateien
2. Das Hinzufügen der vom Editor geforderten Tags in die Web -Seite -Datei ist wie folgt tatsächlich ein Textbereich

    <textarea id = Eingabestil = Breite: 400px; Höhe: 200px> </textArea>

   Beachten Sie, dass die in textarea definierte Länge und Breite die Größe des Editors sind.

3. Initialisieren Sie den Editor durch Skripte und konfigurieren Sie verschiedene Parameter wie folgt:

    new tiny.editor.edit ('editor', {id: 'input', // (must) Die Idwidth: 584 des im zweiten Schritts definierten TextArea -Defatierens. classrowclass:'teheader', // (optional) Editor button line classdividerclass:'tedivider', // (optional) Editor button style controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign', 'centerign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (Required) Add button Steuerelemente zum Editor nach Bedarf, wobei '|' die vertikale Split -Linie zwischen den Funktionstasten darstellt, und 'n' die geteilte Linie zwischen den Tastenlinien footer darstellt Der Editor generiert XHTML- oder HTML-Tag CSSFile: 'style.css', // (optional) externe CSS-Datei, um dem Editor-Inhalt beigefügt zu werden: 'Inhalt starten', // (optional) Legen Sie den ersten Inhalt im Bearbeitungsbereich des Editors ein. Bearbeitungsbereich IDFOOTERCLASS: 'TEFOOTER', // (optional) Setzen Sie den Editor Bottom ClasStoggle: {Text: 'Quellcode', ActiveText: 'Visualisierung', CSSCASS: 'Toggle'}, // (optional) Setzen Sie den Quellcode -Browsing -Toggle -Taste und Optional -Button -Button). Klasse});

   Es kann gesagt werden, dass es sehr konfigurierbar ist und die Konfigurationselemente relativ klar sind.

In der tatsächlichen Anwendung von TinyEditor sollte beachtet werden, dass vor dem Übermitteln des Editor -Inhalts die Funktion Instance.post () aufgerufen werden muss, um sicherzustellen, dass der neueste visuelle Inhalt im Bearbeitungsbereich in Tag -Text umgewandelt wird.

Beispiel anzeigen: http://sandbox.leigeber.com/tinyeeditor/