|
Detaillierte Erklärung der tinyMCE-Verwendung
Initialisierung
Beim Initialisieren von TinyMCE müssen Sie dem HEAD-Tag der Seite den folgenden Code hinzufügen. Gemäß den Einstellungen im folgenden Beispiel werden beim Laden der Seite alle TEXTAREA-Textfelder in Editoren umgewandelt. Darüber hinaus gibt es noch weitere Module, die wir später genauer beschreiben werden.
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
Modus: „Textbereiche“
});
</Skript>
<!-- /tinyMCE -->
Beachten Sie, dass der rote Teil oben der Speicherort der Skriptdatei tiny_mce.js ist, die den gesamten vom Editor benötigten Code enthält. Das Design und das Sprachpaket werden während der Initialisierung geladen.
Der blaue Teil ist der Initialisierungsaufruf, der eine globale Instanz von TinyMCE erstellt. Die Einstellungen und Name-Wert-Eigenschaften werden später beschrieben. aufstellen Die als Name-Wert-Attribute an die Init-Methode von tinyMCE übergebenen Einstellungen steuern das globale Verhalten der Anwendung. Alle Schlüssel und möglichen Schlüsselwerte sind in der folgenden Tabelle aufgeführt. Beachten Sie, dass in Klammern [] eingeschlossene Namen optionale und keine erforderlichen Einstellungen sind.
| Allgemeine Einstellungen | | Modus | Der Modus kann einen der folgenden Werte haben:
Textbereiche – Konvertieren Sie alle TEXTAREA-Komponenten beim Laden der Seite in Editoren.
specific_textareas – macht alle TEXTAREAs mit dem auf „true“ gesetzten Attribut „mce_editable“ zu Editoren.
exakt – Konvertieren Sie nur die exakten Komponenten, die in der Einstellung „Elemente“ angegeben sind. | | [Thema] | Geben Sie den Namen des zu verwendenden Designs an. Das Design wird im Themenverzeichnis von TinyMCE abgelegt. Der Standardwert ist „default“. TinyMCE verfügt über drei integrierte Designs: Einfach, Standard und Erweitert.
Wenn Sie Ihr eigenes Design erstellen möchten, lesen Sie den Abschnitt „Designs“ der Dokumentation sorgfältig durch. | | [Plugins] | Diese Option ist eine durch Kommas getrennte Liste von Design-Plugins (z. B. um nur den Bilddialog zu erweitern). Diese Plugins überschreiben die in den Designvorlagen definierte Funktionalität. Die Plugin-Logik sollte in einer Datei namens „editor_plugin.js“ enthalten sein, die die einzige Datei im Plugin-Verzeichnis ist.
Beispiel: „my_image_dialog,my_link_dialog“.
Wenn Sie Ihr eigenes Plugin erstellen möchten, lesen Sie bitte den Abschnitt „Themen“ der Dokumentation sorgfältig durch. | | [Sprache] | Das in TinyMCE verwendete Sprachpaket. Dies sollte ein FN-Code wie se, uk, us usw. sein. Es wird verwendet, um das Sprachpaket aus dem Verzeichnis „langs“ abzurufen. Der Standardwert für diese Einstellung ist „uk“.
Für chinesische Benutzer empfehlen wir die Verwendung von „zh-CN“ | | [Elemente] | Durch Kommas getrennte Liste der Komponenten, die in den Editor konvertiert werden sollen. Diese Option wird nur verwendet, wenn die Option „Modus“ auf „exakt“ eingestellt ist. Die Elemente in der Liste können beliebige HTML-Komponenten mit einem ID- oder Namensattribut sein. | | [fragen] | Wenn „Modus“ auf „Textbereiche“ oder „spezifische_Textbereiche“ eingestellt ist, wird diese Option verwendet und fragt den Benutzer, ob das Eingabefeld in einen Editor umgewandelt werden soll.
Wenn Sie diese Option verwenden möchten, setzen Sie sie auf „true“. | | [Textbereichsauslöser] | Die Eigenschaft des Textbereichsauslösers, der Standardwert ist „mce_editable“.
Diese Option wird nur verwendet, wenn „Modus“ auf „spezifische Textbereiche“ eingestellt ist. | | [gültige_Elemente] | Durch Kommas getrennte Liste der Komponententransformationsteile.
Zum Beispiel: a[href|target=_blank],strong/b,div[align],br.
Das obige Beispiel weist TinyMCE an, alle Komponenten außer „a, strong, div“ und „br“ zu entfernen, Element b in strong umzuwandeln, das Standardziel auf „_blank“ zu setzen und die Attribute href, target und align beizubehalten. Beim Abgleichen von Komponenten- und Attributnamen können Platzhalter wie *, + und ? verwendet werden.
Charakter:
| , | Trennzeichen zwischen Komponentendefinitionen. | | / | Trennzeichen zwischen zwei synonymen Komponenten. Die erste Komponente ist diejenige, die für die Ausgabe verwendet wird (d. h. die zweite Komponente wird durch die erste ersetzt). | | | | Trennzeichen zwischen Attributdefinitionen. | | [ | Definiert das Startsymbol der Eigenschaftenliste einer Komponente. | | ] | Definiert das Ende der Eigenschaftenliste einer Komponente. | | = | Legt den Standardwert einer Eigenschaft auf einen bestimmten Wert fest. Beispiel: „target=_blank“ | | : | Erzwingt den Wert einer Eigenschaft auf einen bestimmten Wert. Beispiel: „border:0“ | | < | Überprüfen Sie den Wert eines Attributs. Beispiel: „target<_blank?_self“ | | ? | Trennzeichen zwischen Attributprüfwerten, siehe oben. |
Spezielle Variablen:
{$uid} – Generiert eine eindeutige ID-Nummer. Beispiel: „p[id:{$uid}]“.
Der Standardwert für diese Option ist das folgende Muster:
"a[href|Ziel],strong/b[Klasse],em/i[Klasse],strike[Klasse],u[Klasse],p[Klasse|Ausrichten],ol,ul,li,br,
img[Klasse|Quelle|Rand=0|Alt|Höhe|V-Raum|Breite|Höhe|Ausrichtung],Sub,Summe,Blockquote[Dir|Stil],
Tabelle [Rand=0|Zellenabstand|Zellenpolster|Breite|Höhe|Klasse|Ausrichtung],tr[Zeilenspanne],
td[colspan|rowspan|width|height],div[class|align],span[class|align],pre[class|align],
Adresse [Klasse|Ausrichten], h1 [Klasse|Ausrichten], h2 [Klasse|Ausrichten], h3 [Klasse|Ausrichten],
h4[Klasse|Ausrichten],h5[Klasse|Ausrichten],h6[Klasse|Ausrichten],hr".
Um alle Komponenten und Attribute einzuschließen, verwenden Sie *[*]. Dies ist insbesondere bei Verwendung der Option invalid_elements nützlich. | | [erweiterte_gültige_Elemente] | Fügt am Ende der Liste „valid_elements“ eine gültige Komponente hinzu. Diese Option ist nützlich, wenn Sie der Standardliste nur einige Komponenten hinzufügen möchten.
Das Format ist dasselbe wie bei „valid_elements“. | | [ungültige Elemente] | Durch Kommas getrennte Liste der Komponentennamen, die von der Ausgabe ausgeschlossen werden sollen. | | trim_span_elemente | Option „Richtig/Falsch“. Wenn auf „true“ gesetzt, werden nicht benötigte Komponenten entfernt. Der Standardwert ist „true“. | | [CSS-Klassen überprüfen] | Option „Richtig/Falsch“. Wenn auf „true“ gesetzt, wird das CSS-Klassenattribut validiert. Der Standardwert ist „true“. | | [überprüfen_html] | Option „Richtig/Falsch“. Gibt an, ob der HTML-Inhalt validiert werden muss. Der Standardwert ist „true“. | | [URL-Konverter_Rückruf] | Der Name der Funktion, die aufgerufen werden soll, wenn der Sanitizer eine URL verarbeitet. Diese Funktion muss dem folgenden Format folgen: func(url, node, on_save) und die konvertierte URL zurückgeben. Diese Einstellung dient nur Integrationszwecken. Der Parameter „url“ stellt die zu konvertierende Adresse dar, „node“ stellt den Knoten dar, der die URL enthält, und „on_save“ ist ein Boolescher Wert (wahr, wenn der Benutzer das Formular übermittelt). | | [vorformatiert] | Option „Richtig/Falsch“. Wenn der Wert auf „true“ gesetzt ist, konvertiert der Editor Tabulatoren in Einrückungen, behält aber andere Leerzeichen bei, genau wie die Wirkung von PRE in HTML-Tags. Der Standardwert ist „false“. | | [Link_Rückruf einfügen] | Der Name der Funktion, die aufgerufen werden soll, wenn der Befehl „insertlink“ ausgeführt wird. Diese Funktion ruft die Adresse und das Ziel des ausgewählten Links ab und gibt ein Array mit „href“, „target“ und „title“ als Sammlungsnamen zurück. Bei Verwendung eines neuen Fensters wird tinyMCE.insertLink aus Gründen der Mozilla-Kompatibilität in window.opener aufgerufen. | | [Bildrückruf einfügen] | Der Name der Funktion, die aufgerufen werden soll, wenn der Befehl „insertimage“ ausgeführt wird. Diese Funktion ruft die URL des ausgewählten Bildes ab und gibt ein Array mit src und alt als Sammlungsnamen zurück. Bei Verwendung eines neuen Fensters wird tinyMCE.insertImage aus Kompatibilitätsgründen mit Mozilla in window.opener aufgerufen.
Funktionsformat: Bild einfügen (Quelle, Alt, Rahmen, Hspace, Vspace, Breite, Höhe, Ausrichtung, Titel, beim Mausüberfahren, beim Mausüberfahren, Aktion). | | [Inhaltsrückruf einrichten] | Der Name der Funktion, die beim Initialisieren des Editors aufgerufen werden soll. Funktionsformat: setupContentCallback(editor_id, node), wobei editor_id die ID des Editors ist und node der Body-Komponentenknoten, in dem sich der Editor befindet. | | [Rückruf speichern] | Der Name der Funktion, die aufgerufen werden soll, wenn der Befehl „triggerSave“ aufgerufen wird. Funktionsformat: speichern(ID, Inhalt, Knoten). Wenn ein bestimmter Rückgabewert vorhanden ist, wird sein Wert der HTML-Formularkomponente hinzugefügt. Sie können diese Funktion also verwenden, um die Benutzerkonvertierungslogik anzupassen. | | [Dokumentensprache] | Die in TinyMCE-Dokumenten verwendete Sprache. Dies sollte ein FN-Code wie se, uk, us usw. sein. Er wird verwendet, um Dokumente aus dem Verzeichnis „<theme>/docs/<lang>“ abzurufen. Der Standardwert dieser Option ist derselbe wie der Sprachoption. | | [Breite] | Die Breite des Editors. Seine Standardbreite ist die Breite der Komponente, die ursprünglich ersetzt wurde. | | [Höhe] | Die Höhe des Editors. Seine Standardhöhe ist die Höhe der Komponente, die ursprünglich ersetzt wurde. | | [Inhalt_CSS] | Die im Bearbeitungsfenster zu verwendende CSS-Datei. Ihr Pfad sollte relativ zur Seite sein. | | [Popups_css] | CSS-Dateien, die beim Einfügen von Links und Bildern in Popup-Fenstern verwendet werden, sollten Pfade relativ zur Seite haben. | | [editor_css] | Die vom Editor verwendete CSS-Datei. Ihr Pfad sollte relativ zur Seite sein. | | [Codierung] | Die Ausgabekodierung des Editors. Diese Option kann derzeit nur "html" oder leer sein. Wenn der Wert auf „html“ gesetzt ist, wird die Ausgabe des Editors HTML-codiert.
Beispielsweise wird aus < < usw. Der Standardwert ist leer. | | [debuggen] | Option „Richtig/Falsch“. Wenn auf „true“ gesetzt, werden Debuginformationen wie CSS-Dateipfade angezeigt. | | [visuell] | Option „Richtig/Falsch“. Wenn der Wert auf „true“ gesetzt ist und der Rahmen auf 0 gesetzt ist, hat die Tabelle im Editor für einen besseren visuellen Effekt eine gepunktete Linie.
Der Standardwert ist „true“. | | [visueller Tabellenstil] | Benutzer können den Stil der Tabelle anpassen, der Standardwert ist: „Rand: 1px gestrichelt #BBBBBB“. | | [Formular-Übermittlungstrigger hinzufügen] | Option „Richtig/Falsch“. Wenn der Wert auf „true“ gesetzt ist, wird die Ereignisbehandlung „onsubmit“ aller Formulare erzwungen und ein Speichern ausgelöst. Der Standardwert dieser Option ist true. | | [Trigger zum Entladen hinzufügen] | Option „Richtig/Falsch“. Wenn der Wert auf „true“ gesetzt ist, wird ein „triggerSave“-Aufruf an das aktuelle Fenster gesendet, wenn das Ereignis „onunload“ eintritt. Dieser Aufruf von „triggerSave“ führt keine Bereinigung durch, da er für die Handhabung der Vorwärts-/Zurück-Schaltflächen gedacht ist. Der Standardwert dieser Option ist true. | | [erzwinge_br_newlines] | Option „Richtig/Falsch“. Diese Option zwingt den Editor, Absatzzeichen (P) durch Zeilenumbrüche (BR) zu ersetzen. Der Standardwert dieser Option ist „false“. (Experimentelles Stadium) | | [erzwinge_p_newlines] | Option „Richtig/Falsch“. Wenn diese Option aktiviert ist, generieren die Browser Mozilla/Firefox beim Drücken der Eingabetaste Absatzzeichen (P) und beim Drücken von Umschalt+Eingabe Zeilenumbrüche (BR). Der Standardwert dieser Option ist „true“. | | [relative_URLs] | Option „Richtig/Falsch“. Wenn auf „true“ gesetzt, werden absolute Pfade in relative Pfade umgewandelt. Der Standardwert ist „true“. | | [Skripthost entfernen] | Option „Richtig/Falsch“. Wenn auf „true“ gesetzt, werden der Hostname und die Portnummer in der URL entfernt, wenn sie mit dem aktuellen Standort des Editors übereinstimmen.
Befindet sich der Editor beispielsweise unter http://www.somesite.com, wird der folgende Link http://www.somesite.com/somedir/somepage.html in /somedir/somepage.html umgewandelt.
Diese Option ist standardmäßig auf „true“ eingestellt, wenn „relative_urls“ auf „false“ gesetzt ist. | | [Fokusalarm] | Option „Richtig/Falsch“. Wenn der Wert auf „true“ gesetzt ist, wird ein störendes Warnfeld angezeigt, wenn der Editor den Fokus verliert. Der Standardwert ist „true“. | | [Dokumentenbasis-URL] | Die URL des Dokuments wird beim Konvertieren eines absoluten Pfads in einen relativen Pfad verwendet. Diese Option gibt das aktuelle Standarddokument des Editors an.
Hinweis: Wenn diese Option einen Domänennamen angibt, fügen Sie das Protokollpräfix hinzu und beenden Sie es mit einem Schrägstrich. Beispiel: http://www.somehost.com/mydir/ | | [benutzerdefiniert_rückgängig_wiederherstellen] | Option „Richtig/Falsch“. Diese Option erweitert die Rückgängig-/Wiederholen-Funktionalität. Der Standardwert ist „true“. | | [benutzerdefinierte_Rückgängig_Wiederherstellen_Ebenen] | Passen Sie die maximale Anzahl der Rückgängig-Vorgänge an. Der Standardwert ist unbegrenzt. | | [benutzerdefinierte_Rückgängig_Wiederherstellen_Tastaturkürzel] | Bei Verwendung kann der Editor die Tastenkombinationen Strg+Z und Strg+Y zum Rückgängigmachen und Wiederherstellen verwenden. Standardmäßig zulässig. | | [Inhaltsduplikation beheben] | Option „Richtig/Falsch“. Diese Option behebt einen Fehler bei der Inhaltsduplizierung in MSIE. Standardmäßig aktiviert, kann aber aus Kompatibilitätsgründen deaktiviert (false) werden. | | [Richtung] | Mit dieser Option kann die Textrichtung für Sprachen wie Arabisch festgelegt werden. Mögliche Werte sind: ltr, rtl. Standardwert: ltr (von links nach rechts). | | [auto_cleanup_word] | Wenn aktiviert, wird aus MS Office/Word eingefügtes HTML automatisch bereinigt. Der Standardwert dieser Option ist „false“.
Hinweis: Dieser Vorgang wird derzeit nur in MSIE unterstützt. | | [Bereinigung beim Start] | Wenn aktiviert, werden Textfelder und Komponenten beim Initialisieren des Editors bereinigt. Der Standardwert ist „false“. | | [Inline-Stile] | Wenn aktiviert, werden Eigenschaften wie Breite, Höhe, vspace, hspace und Ausrichtung durch Stilattribute ersetzt. Der Standardwert ist „false“.
Denken Sie daran, die Stileigenschaften auf die richtige Komponente anzuwenden, wenn Sie diese Option verwenden. | | [Zeilenumbrüche in Zeilenumbrüche umwandeln] | Wenn aktiviert, werden alle \n (neue Zeilen) beim Start des Editors in <br />-Komponenten konvertiert. Der Standardwert dieser Option ist „false“. | | [auto_reset_designmode] | Da beim Aufrufen der none/block-Methoden von style.display zum Anzeigen/Ausblenden eines TinyMCE-Editors ein Fehler auftritt, muss der Entwurfsmodus zurückgesetzt werden. Wenn diese Option aktiviert ist, wird sie automatisch zurückgesetzt, wenn der Editor fokussiert ist. Der Standardwert ist „false“. | | [Entitäten] | Eine Tabelle mit Zeichencodes zum Nachschlagen von Namen, wobei die Elemente durch Kommas getrennte Listen von Entitäten sind. Die Liste ist in Elemente mit ungeraden und mit geraden Nummern unterteilt, wobei die Elemente mit ungeraden Nummern die für die Konvertierung verwendeten Zeichencodes und die Elemente mit geraden Nummern die Entitätsnamen sind, die diesen Zeichencode darstellen. Beispiel: „8205,zwj,8206,lrm,8207,rlm,173,shy“. | | [Bereinigungs-Rückruf] | Benutzerdefinierte Bereinigungsfunktion. Mit dieser Option kann der Benutzer die Standardbereinigung erweitern. Dieser Funktionsaufruf ist vom Standardaufruf getrennt und ersetzt nicht die Standardbereinigungsfunktion, sondern erweitert sie lediglich. Klicken Sie auf „Plugin-Bereinigung“, um weitere Einzelheiten zu erfahren. | | Erweiterte themenspezifische Einstellungen | | [Standort der erweiterten Symbolleiste] | Mit dieser Option können Sie die Standardposition der Symbolleiste ändern. Mögliche Werte sind: „top“ und „bottom“. Der Standardwert ist „unten“. | | Ausrichtung der Symbolleiste | Mit dieser Option können Sie die Ausrichtung der Symbolleiste auf links, zentriert oder rechts festlegen. Der Standardwert ist „Mitte“. | | [Theme_erweiterte_Stile] | Mit dieser Option können CSS-Klassen und -Namen zur Stil-Dropdown-Liste hinzugefügt werden. Das Format ist wie folgt: „<Titel>=<Klasse>;..“.
Wenn diese Option nicht angegeben ist, werden die CSS-Klassen des Hauptinhaltsabschnitts automatisch importiert.
Beispiel: „Überschrift 1=Überschrift1;Überschrift 2=Überschrift2;Überschrift 3=Überschrift3“ | | [Theme_erweiterte_Schaltflächen1] | Eine durch Kommas getrennte Liste von Schaltflächen, die in die erste Zeile der Symbolleiste aufgenommen werden sollen. Beispiel: „fett, kursiv, unterstrichen“.
Die zulässigen Schaltflächennamen sind:
Fett, Kursiv, Unterstrichen, Durchgestrichen, Linksbündig ausrichten, Zentrieren, Rechtsbündig ausrichten, Vollbündig ausrichten, Stilauswahl, Bullist, Nummernliste, Ausrücken, Einrücken, Rückgängig, Wiederherstellen, Verknüpfen, Verknüpfung aufheben, Bild, Bereinigen, Hilfe, Code, Tabelle, Zeile_vorher, Zeile_nachher, Zeile_löschen, Trennzeichen, Zeilentrennzeichen, Spalte_vorher, Spalte_nachher, Spalte_löschen, hr, Format entfernen, Sub, Sup, Formatauswahl, Schriftauswahl, Schriftgrößenauswahl, Vorderfarbe, Charmap, Visual Aid, Abstandshalter, Ausschneiden, Kopieren, Einfügen | | [Theme_Advanced_Buttons2] | Wie oben, der Unterschied besteht darin, dass es die zweite Zeile der Symbolleiste angibt. | | [Theme_Advanced_Buttons3] | Wie oben, der Unterschied besteht darin, dass es die dritte Zeile der Symbolleiste angibt. | | [theme_advanced_buttons<N>_add] | Fügt einer bestimmten Zeile N auf der Symbolleiste zusätzliche Steuerelemente/Schaltflächen hinzu. Beispiel: theme_advaned_buttons3_add: "iespell". | | [theme_advanced_buttons<N>_add_before] | Fügt in der angegebenen N-ten Zeile der Symbolleiste zusätzliche Steuerelemente/Schaltflächen vor den Standardschaltflächen hinzu. Beispiel: theme_advaned_buttons3_add_before: "iespell". | | [Theme_Advanced_Disable] | Durch Komma getrennte Liste der zu deaktivierenden Schaltflächen/Komponenten. Beispiel: „formatselect“. | | [Theme_Advanced_Source_Editor_Breite] | Die Breite des Quelleditorfensters. | | [Theme_Advanced_Source_Editor_Höhe] | Die Höhe des Quelleditorfensters. | | [Theme_Advanced_Pfad_Standort] | Die Position der Komponentenpfadliste, mögliche Werte sind: „oben“ oder „unten“. Standardwert: „keine“ | | [theme_advanced_blockformats] | Die Formatauswahlliste ist eine durch Kommas getrennte Liste der zu blockierenden Formate. Standardwert: p,Adresse,pre,h1,h2,h3,h4,h5,h6. |
Das Folgende ist ein komplexeres Initialisierungsbeispiel:
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
Modus: "exakt",
Thema: "Mytheme",
Sprache: "se",
Elemente: "elm1,elm2"
});
</Skript>
<!-- /tinyMCE -->
Funktionen (für erweiterte Nutzung)
TinyMCE verfügt über eine globale Instanz, die einige allgemeine Funktionen bereitstellt, die von der Seite aufgerufen werden können.
--------------------------------------------------------------------------------
Syntax: tinyMCE.triggerSave([skip_cleanup]);
Beschreibung: Führt einen Löschvorgang aus und verschiebt den Editorinhalt zurück in das Formularfeld. tinyMCE ruft diese Funktion automatisch auf, indem es der Übermittlungsmethode des Formulars einen Trigger hinzufügt.
Parameter:
[skip_cleanup] – Deaktiviert die Bereinigungsfunktion des Speichertriggers. Standardmäßig auf „false“ eingestellt. (Optional)
Rückgaben: Keine
--------------------------------------------------------------------------------
Syntax: tinyMCE.updateContent(Formularelementname);
Beschreibung: Überträgt den Inhalt der Formularkomponente in den Editor. Diese Operation ist das Gegenteil von triggerSave(). Diese Methode kann verwendet werden, wenn Sie den Editorinhalt dynamisch ändern möchten.
Parameter:
form_element_name – Der Name des Formulars, dessen Komponente Sie den Inhalt abrufen möchten.
Rückgaben: Keine
--------------------------------------------------------------------------------
Syntax: tinyMCE.execInstanceCommand(editor_id, Befehl, [Benutzeroberfläche], [Wert]);
Beschreibung: Diese Methode findet eine Editorinstanz über den Parameter editor_id und führt einen Befehl auf diesem Editor aus.
Parameter:
editor_id – Die Editor-Instanz-ID oder die Komponenten-ID/der Komponentenname, wenn sie ersetzt wird.
Befehl – Der auszuführende Befehl. Weitere Einzelheiten finden Sie in der execCommand-Funktion.
[Benutzeroberfläche] – Gibt an, ob die Benutzeroberfläche verwendet werden soll.
[Wert] – Der bei der Ausführung des Befehls zu übergebende Parameter, beispielsweise eine URL.
Rückgaben: Keine
--------------------------------------------------------------------------------
Syntax: tinyMCE.execCommand(Befehl, [Benutzeroberfläche], [Wert]);
Beschreibung: Diese Methode führt einen bestimmten Befehl mit Namen im ausgewählten Editor aus.
Parameter:
Befehl - Der auszuführende Befehl, zum Beispiel: „Fett“ oder „Kursiv“. Sie können die Mozilla Midas-Spezifikation unter diesem Link ansehen. tinyMCE verfügt jedoch auch über einige spezielle Befehle, wie in der folgenden Tabelle gezeigt:
| mceLink | Öffnet das Dialogfeld „Link einfügen“ und fügt einen Link ein. | | Bild | Öffnet das Dialogfeld „Bild einfügen“ und fügt ein Bild ein. | | mceCleanup | Entfernen Sie unnötige Komponenten und Attribute aus dem HTML-Code. | | mceHilfe | Öffnen Sie die Dokumentationsseite. | | mceEinfügetabelle | Fügt an der Mausposition eine Tabelle ein, die Standardgröße ist: 2×2. Wenn der Wertparameter in der Funktion „execCommand“ angegeben ist, muss sein Format ein Array in der Form „Name/Wert“ sein, wobei „Name“ die folgenden Optionen hat: Spalten, Zeilen, Rahmen, Zellenabstand, Zellenpolster. Die Standardgröße des Rahmens ist: 0. | | mceTableInsertRowBefore | Fügt eine Zeile vor der aktuellen Cursorposition ein. | | mceTableInsertRowAfter | Fügt nach der aktuellen Cursorposition eine Zeile ein. | | mceTableDeleteRow | Löscht die Zeile, in der sich die Maus aktuell befindet. | | mceTableInsertColBefore | Fügt eine Spalte vor der aktuellen Cursorposition ein. | | mceTableInsertColAfter | Fügt eine Spalte nach der aktuellen Cursorposition ein. | | mceTableDeleteCol | Löschen Sie die Spalte, in der sich die Maus aktuell befindet. | | mceAddControl | Fügt dem Editor ein Komponentensteuerelement hinzu, dessen ID/Name durch den Wert angegeben wird. | | mceRemoveControl | Entfernt ein bestimmtes Steuerelement anhand des Editor-ID-Namens. value ist die zu entfernende editor_id (Editor-ID). Das Editor-ID-Format lautet wie folgt: „mce_editor_<index>“.
Sie können auch DOM-Komponenten-IDs und Formularnamen verwenden. | | mceFocus | Gibt dem Editor mit ID-Wert den Fokus. Das Editor-ID-Format lautet: „mce_editor_<index>“. Sie können auch DOM-Komponenten-IDs und Formularnamen verwenden. | | mceSetCSSClass | Legen Sie CSS-Klasseneigenschaften fest oder erstellen Sie einen neuen Bereich im Auswahlfeld. Der Wert von value ist der CSS-Klassenname, der der ausgewählten Komponente zugewiesen werden soll, oder der Name der zu erstellenden Span-Komponente. | | mceInsertContent | Fügt den Inhalt des Wertes an der aktuellen Cursorposition ein. | | mceErsetzenInhalt | Ersetzt die aktuelle Auswahl durch den HTML-Code im Wert. Die Variable {$selection} wird durch den Textinhalt der aktuellen Auswahl ersetzt. | | mceSetAttribute | Legt Eigenschaften für die aktuell ausgewählte Komponente fest. Der Wert dieses Befehls sollte ein Name/Wert-Array mit den folgenden Parametern sein:
Name – der Name der festzulegenden Eigenschaft.
Wert – der festzulegende Eigenschaftswert.
[targets] – Die Zielkomponente, der das Attribut hinzugefügt werden soll. Der Standardwert ist: p,img,span,div,td,h1,h2,h3,h4,h5,h6,pre,address.
Anwendungsbeispiel:
tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'}); | | mceToggleVisualAid | Ob der visuelle Unterstützungsmodus aktiviert werden soll | | mceAnchor | Fügt einen Namensanker ein. Wert ist der Name des Ankerpunkts. | | mceResetDesignMode | Setzt den Entwurfsmodusstatus aller Editorinstanzen zurück. In Firefox ist dieser Befehl nützlich, wenn der Editor in einem Tab platziert oder mit style.display="none/block" ausgeblendet ist. Dieser Befehl wird aufgerufen, wenn der Editor erneut angezeigt wird. | | mceSelectNode | Wählt den durch den Wert angegebenen Knoten/die angegebene Komponente aus. Gleichzeitig scrollt dieser Befehl den Editor zum Speicherort dieser Komponente. | | mceSelectNodeDepth | Wählt den angegebenen Knoten/die angegebene Komponente aus dem aktuellen Knoten anhand der Tiefenbeziehung aus. Ein Wert von 0 wählt also den aktuell fokussierten Knoten aus. Gleichzeitig scrollt dieser Befehl den Editor zum Speicherort dieser Komponente. |
user_interface – Gibt an, ob ein Befehl eine Benutzeroberfläche anzeigt. Option „Richtig/Falsch“.
Wert – Der an den Befehl zu übergebende Wert. Wenn Sie beispielsweise einen Link einfügen, ist dies die URL des Links.
Rückgaben: Keine
Beispiel: | <a href="javascript :tinymce.execCommand('Fett'); "> [Fett machen]</a> |
Syntax: tinyMCE.insertLink(href, ziel);
Beschreibung: Diese Methode fügt an der Cursorposition der aktuell ausgewählten Editorinstanz einen Link ein oder aktualisiert einen vorhandenen Link mit neuen Daten. Wenn Sie Ihr eigenes Design erstellen, sollte diese Methode aufgerufen werden, wenn im Popup-Fenster, das den Link einfügt, die Schaltfläche „OK“ gedrückt wird.
Parameter:
href – Die Adresse/URL des Links.
Ziel – das Ziel des Links.
Rückgaben: Keine
Syntax: tinyMCE.insertImage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);
Beschreibung: Diese Methode fügt an der Cursorposition der aktuell ausgewählten Editorinstanz ein Bild ein oder aktualisiert ein vorhandenes Bild mit neuen Daten. Wenn Sie Ihr eigenes Design erstellen, sollte diese Methode aufgerufen werden, wenn im Popup-Fenster, das das Bild einfügt, auf die Schaltfläche „OK“ geklickt wird.
Parameter:
src: Die Bildadresse.
alt – Alternativtext für das Bild.
Rahmen – Der Bildrahmen.
hspace – Horizontaler Bildabstand.
vspace – vertikaler Abstand des Bildes.
Breite – Breite des Bildes.
Höhe – Bildhöhe.
align – Bildausrichtung.
Titel – Der Titel des Bildlinks.
onmouseover – Ereignishandler für den Fall, dass sich die Maus über dem Bild befindet.
onmouseout – Ereignishandler für den Fall, dass die Maus aus dem Bild herausbewegt wird.
Rückgaben: Keine
Syntax: tinyMCE.triggerNodeChange();
Beschreibung: Diese Methode wird aufgerufen, wenn der Editor externe Änderungen erfährt. Diese Methode ruft dann die Methode „handleNodeChangeCallback“ des Subjekts zurück.
Parameter: Keine
Rückgaben: Keine
Syntax: tinyMCE.getContent();
Beschreibung: Diese Methode gibt den HTML-Inhalt im aktuell ausgewählten Editor zurück. Wenn kein Editor ausgewählt ist, gibt die Methode null zurück.
Parameter: Keine
Gibt zurück: Den HTML-Inhalt des aktuell ausgewählten Editors oder null.
Syntax: tinyMCE.setContent(html);
Beschreibung: Diese Methode legt den HTML-Inhalt des aktuell ausgewählten Editors fest.
Parameter:
html – Der festzulegende HTML-Quellcode.
Rückgaben: Keine.
Syntax: tinyMCE.getEditorInstance(editor_id);
Beschreibung: Diese Methode gibt eine Editorinstanz nach Editor-ID zurück.
Parameter:
editor_id – Die abzurufende Editorinstanz.
Gibt zurück: Editorinstanz (TinyMCEControl).
Syntax: tinyMCE.importThemeLanguagePack([Thema]);
Beschreibung: Diese Methode importiert ein bestimmtes Sprachpaket in das Design. Diese Methode kann in benutzerdefinierten Designs aufgerufen werden.
Parameter:
[Thema] – Der Name des aktuellen Themas. Diese Option ist optional und entspricht standardmäßig der globalen „Design“-Einstellung. Dieser Parameter ist in Theme-Plugins sehr nützlich.
Rückgaben: Keine.
Syntax: tinyMCE.importPluginLanguagePack(plugin, gültige_Sprachen);
Beschreibung: Diese Methode importiert ein Plugin-spezifisches Sprachpaket. Diese Methode kann von benutzerdefinierten Plugins aufgerufen werden.
Parameter:
Plugin – Der Name des aktuellen Plugins.
valid_languages – Eine durch Kommas getrennte Liste unterstützter Sprachpakete.
Rückgaben: Keine.
Syntax: tinyMCE.applyTemplate(html);
Beschreibung: Diese Methode ersetzt die Einstellungen und Sprachvariablen im Design.
Parameter:
html – HTML-Code zum Ersetzen von Designvariablen.
Gibt zurück: Den konvertierten HTML-Code.
Syntax: tinyMCE.openWindow(Vorlage, [Argumente]);
Beschreibung: Diese Methode öffnet ein neues Fenster, indem sie die Breite, Höhe und HTML-Daten aus dem angegebenen Vorlagenparameter abruft. Der Array-Parameter args enthält die zu ersetzenden Variablennamen.
Es gibt auch einige benutzerdefinierte Fensterparameter:
mce_replacevariables – Aktivieren/Deaktivieren des Sprach-/Variablenersatzes in HTML-Dokumenten. Standardmäßig aktiviert.
mce_windowresize – Aktivieren/Deaktivieren der automatischen Größenanpassungsfunktion von Popup-Fenstern, standardmäßig aktiviert.
Parameter:
Vorlage – Name/Wert-Array mit Breite, Höhe, HTML und Datei als Schlüssel.
[args] – Ein Name/Wert-Array, das die zu ersetzenden Variablennamen enthält. Schlüssel-Wert-Variablen in der Vorlagendatei werden durch die Parameterliste ersetzt.
Beispielsweise wird image.php?src={$src} ersetzt durch: image.php?src=image.gif.
Rückgaben: Keine.
Syntax: tinyMCE.getWindowArg(name, [Standardwert]);
Beschreibung: Diese Methode gibt die Fensterparameter nach Namen zurück. Sie kann in Popup-Fenstern im Design verwendet werden, um die Parameter im Dialogfeld abzurufen.
Parameter:
Name – der Name des abzurufenden Fensterparameters.
[Standardwert] – Der Standardwert, der zurückgegeben wird, wenn der Fensterparameter fehlt.
Gibt zurück: den Wert des Fensterparameters.
Syntax: tinyMCE.setWindowArg(Name, Wert);
Beschreibung: Diese Methode setzt Fensterparameter nach Namen. Dies ist beispielsweise sehr nützlich, wenn ein Plug-In andere Plug-Ins aufruft.
Parameter:
Name – Der festzulegende Fensterparameter.
Wert – Der im Fensterparameter festzulegende Wert.
Gibt zurück: Fensterparameterwert.
Syntax: tinyMCE.getParam(Name, [Standardwert], [Leerzeichen entfernen]);
Beschreibung: Diese Methode gibt die Konfigurationsparameter von TinyMCE zurück.
Parameter:
Name – Der Name des abzurufenden Fensterparameters.
[Standardwert] – Der Standardwert, der zurückgegeben wird, wenn der Fensterparameter fehlt.
[strip_whitespace] – Wenn wahr, werden alle Leerzeichen im Rückgabewert entfernt. Standardmäßig: „false“. TinyMce Benutzererfahrung
tinyMce ist ein leistungsstarker Rich-Text-Editor auf JS-Basis.
Offizielle Homepage: http://www.tinymce.com/
Jetzt ist die neueste Version 3.4.7. Die Funktionen dieses Editors sind fast mit denen von Microsoft Office vergleichbar. Alle Bearbeitungswerkzeuge im Editor können angepasst werden und die meisten erweiterten Funktionen werden in Form von Plug-Ins hinzugefügt. Entwickler können nach Bedarf eigene Funktionen hinzufügen/löschen.
Laden Sie zuerst das tinyMce-Entwicklungskit herunter (es wird empfohlen, die Entwicklerversion herunterzuladen, die eine große Anzahl von Beispielen enthält und Sie können auch den Quellcode anzeigen).
Download-Link: https://www.jb51.net/codes/44180.html http://www.tinymce.com/download/download.php
Fügen Sie dann die tinyMce-Datei zur Webseite hinzu, die Sie verwenden möchten
<script type="text/javascript" src="common/tiny_mce/tiny_mce_src.js"></script>
Sie müssen nur eine JS-Datei hinzufügen und tinyMce lädt die anderen benötigten CSS- und JS-Dateien.
Fügen Sie dann eine <textarea id="myRTE"></textarea> in den <body> der Seite ein.
Verwenden Sie abschließend die Init-Methode von tinyMce und binden Sie den Textbereich in der Methodenkonfiguration ein.
JSP-Seitencode
<%@ Seitensprache="java" import="java.util.*" Seitenkodierung="UTF-8"%> <% Zeichenfolgenpfad = request.getContextPath(); Zeichenfolge basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <Kopf> <title>Beispiel für Textverarbeitung</title> <meta http-equiv="X-UA-kompatibel" content="IE=edge" /> <!-- TinyMCE --> <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script> <Skripttyp="text/javascript"> tinyMCE.init({ // Allgemeine Optionen Modus: "Textbereiche", Thema: "fortgeschritten", Haut: "o2k7", Plugins: „Autolink, Listen, Seitenumbruch, Stil, Ebene, Tabelle, Speichern, Advhr, Advimage, Advlink, Emotionen, Iespell, Insertdatetime, Vorschau, Medien, Suchen/Ersetzen, Drucken, Kontextmenü, Einfügen, Richtung, Vollbild, nicht editierbar, VisualChars, geschützt, XHTMLXtras, Vorlage, Inline-Popups, automatisches Speichern“, // Designoptionen theme_advanced_buttons1 : "Speichern, Neues Dokument,|, Fett, Kursiv, Unterstrichen, Durchgestrichen,|, Linksbündig ausrichten, Zentriert ausrichten, Rechtsbündig ausrichten, Vollbündig ausrichten,|, Stilauswahl, Formatauswahl, Schriftartauswahl, Schriftgrößeauswahl", theme_advanced_buttons2 : "Ausschneiden, Kopieren, Einfügen, Text einfügen, Wort einfügen, |, Suchen, Ersetzen, |, Bulllist, Numlist, |, Einzug verkleinern, Einzug, Blockzitat, |, Rückgängig machen, Wiederherstellen, |, Verknüpfen, Verknüpfung aufheben, Anker, Bild, Bereinigen, Hilfe, Code, |, Datum einfügen, Zeit einfügen, Vorschau, |, Vorderfarbe, Hintergrundfarbe", theme_advanced_buttons3 : "Tabellensteuerungen,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "Ebene einfügen, vorwärts verschieben, rückwärts verschieben, absolut, |, Styleprops, |, zitieren, Abkürzung, Akronym, del, ins, Attribute, |, visuelle Zeichen, nicht umbrechend, Vorlage, Seitenumbruch, wiederhergestellter Entwurf", theme_advanced_toolbar_location : "oben", theme_advanced_toolbar_align : "links", theme_advanced_statusbar_location : "unten", theme_advanced_resizing: wahr, // Beispiel für Word-Inhalts-CSS (sollte das CSS Ihrer Site sein), hier werden Absatzränder entfernt content_css: "css/word.css", // Drop-Listen für Link-/Bild-/Medien-/Vorlagendialoge template_external_list_url: "Listen/template_list.js", external_link_list_url: "Listen/link_list.js", external_image_list_url: "Listen/image_list.js", media_external_list_url: "Listen/media_list.js", //Werte für das Template-Plugin ersetzen template_replace_values : { Benutzername: "Einiger Benutzer", Personal-ID: "991234" } }); </Skript> <!-- /TinyMCE --> </Kopf> <Text> <form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true"> <h3>Beispiel für Textverarbeitung</h3> <p> Auf dieser Seite erfahren Sie, wie Sie TinyMCE so konfigurieren, dass es eher wie herkömmliche Textverarbeitungsprogramme funktioniert. Weitere Beispiele zur Verwendung von TinyMCE finden Sie im Wiki. </p> <!-- Wird durch TinyMCE ersetzt. Denken Sie daran, dass HTML in einem Textbereich codiert werden sollte --> <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> <p>Dies ist der erste Absatz.</p> <p>Dies ist der zweite Absatz.</p> <p>Dies ist der dritte Absatz.</p> </textarea> <input type="submit" name="speichern" value="Senden" /> <input type="zurücksetzen" name="zurücksetzen" value="Zurücksetzen" /> </form> <Skripttyp="text/javascript"> wenn (Dokument.Standort.Protokoll == 'Datei:') { alert("Die Beispiele funktionieren auf dem lokalen Dateisystem möglicherweise aufgrund der Sicherheitseinstellungen Ihres Browsers nicht richtig. Bitte verwenden Sie einen echten Webserver."); } </Skript> </body> </html>
Darüber hinaus befinden sich alle erforderlichen JS-Dateien in den Jscripts unter der von der offiziellen Website heruntergeladenen Datei tinymce_3.5_dev. Legen Sie diesen Ordner unter dem Webroot in MyEclipse ab
|
