TINYMCE-Plug-in-Entwicklung: Einfügen von HTML, PHP, SQL, JS-Code ein und markieren Sie den Code

Autor：Eve Cole Aktualisierungszeit：2025-03-28 20:48:02

Vor ein paar Tagen hatte ich das Gefühl, dass der Insertionscode des Blogs nicht einfach zu bedienen war. Sinas HTML -Redakteur wurde also durch Tinymce ersetzt. Es wurde eine einfache Insertion von Code entwickelt. . . Das Folgende ist mein Entwicklungsprozess.

Erstens ist meine Tinymce-Version Version: 3.2.7 (2009-09-22).

Tinymce Insertion Code erfordert, Tinymce.execcommand ('McEinsertContent', False, Value) aufzurufen. Methode der Tinymce. Die Parameter müssen nicht geändert werden, der Wert ist das, was Sie einfügen möchten.

Zum Beispiel habe ich eine Funktion geschrieben,

Die Codekopie lautet wie folgt:

Funktion Inserthtml (Wert)

{

Tinymce.execcommand ('McEinsertContent', False, Value);

}

Später wird für dieses Beispiel ein Download bereitgestellt. Im Beispiel. Insgesamt sind drei Dokumente beteiligt.

Tinymce.html InsertCode.php SAVE.PHP Diese drei Dateien.

tinymce.html ist die Tinymce -Textfeldseite.

Der Hauptcode lautet wie folgt:

Die Codekopie lautet wie folgt:

tinymce.init ({{{

// Allgemeine Optionen

convert_urls: false,

Modus: genau,

Elemente: article_content,

// Modus: Textbereich,

Thema: Fortgeschrittene,

plugins: safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,

// Themenoptionen

themen_advanced_buttons1: speichern, newdokument, |, mutig, italisch, unterstreich, striften, |, justifyleft, justifyCenter, justifyright, gerechtfertigen

themen_advanced_buttons4: InsertLayer, Moveforward, Movebackward, Absolute, |, StyleProps, |, CITE, ABBR, Akronym, Del, Ins, Attribs, |, VisualChars, Nicht -Breaking, Vorlage, Page Break,

themen_advanced_toolbar_location: oben,

themen_advanced_toolbar_align: links,

themen_advanced_statusbar_location: unten,

themen_advanced_resizing: true,

// Beispielinhalte CSS (sollte Ihre Website CSS sein)

content_css: css/content.css,

// Droplisten für Link/Image/Media/Vorlage Dialoge

template_external_list_url: lists/template_list.js,

external_link_list_url: lists/link_list.js,,

external_image_list_url: lists/image_list.js,,

medi_external_list_url: lists/media_list.js,,

// Werte für das Vorlagen -Plugin ersetzen

template_replace_values: {

Benutzername: Ein Benutzer,

StaffId: 991234

}

});

</script>

Funktion Inserthtml (Wert)

{

Tinymce.execcommand ('McEinsertContent', False, Value);

}

</script>

Wo JS -Code Tinymce initialisieren soll. Das Download -Beispiel enthält keine Tinymce, Sie müssen es selbst herunterladen. Ändern Sie dann die SRC des JS -Code.

Die Codekopie lautet wie folgt:

<Eingabename = Taste type type = button onclick = window.open ('insertCode.php', 'code einfügen', 'hohsta

Der obige Code wird verwendet, um die Datei insertCode.php zu öffnen.

Schauen wir uns als nächstes einen InsertCode an. Der Code dieser Datei.

Zunächst der JS -Code

Die Codekopie lautet wie folgt:

Funktion InsertCode ()

{

var value = $ ('#postcontent'). html ();

var codetype = $ ('#codetype'). val ();

// window.opener.inSerthtml ('<textarea rows = 3 cols = 50 name = code class ='+codetype+'>'+value+'</textArea>');

window.opener.inSerthtml ('<pre name = code class ='+codetype+'>'+value+'</pre>');

Fenster.CLOSE ();

}

</script>

Als nächstes kommt der PHP- und HTML -Code

Die Codekopie lautet wie folgt:

<? Php

error_reporting (0);

$ content = $ _post ['content'];

if (! leer ($ content))

{

$ codetype = $ _post ['codetyp'];

echo '<div id = postcontent>';

$ content = htmlSpecialChars ($ content);

echo $ content;

echo '</div>

<Eingabe type = Taste name = value = Senden onclick = InsertCode () style = border: 1px fest #000; Zeilenhöhe: 18px; Breite: 60px;/> ';

}anders

{

<Label> Wählen Sie den Codentyp zum Einfügen aus

</select>

</label>

<Label>

</label>

<p>

</label>

</p>

</form>

</div>

<? Php

}

In InsertCode.php wird die Funktion InsertCode () verwendet, um die Funktion von Inserthtml () der Seite TinyMCE.html aufzurufen und den Code in die Seite "Tinymce.html" einzufügen.

Warum brauchen wir im Code '+Wert+'?

Da wir die Seite anzeigen, verwenden wir das Syntaxhighlighter-Plug-In, um den Code hervorzuheben.

Ein weiterer zu erklärender Punkt, hier, $ content = htmlspecialChars ($ content); Wir haben HTMLSpecialChars Escape Operation für den Code selbst durchgeführt. Auf diese Weise ist der in die Datenbank eingefügte Code sicher.

OK, schauen wir uns Save.php erneut an, diese Seite wird verwendet, um den eingereichten Inhalt anzuzeigen.

Der Hauptcode lautet wie folgt:

Die Codekopie lautet wie folgt:

$ Article_content = $ _post ['article_content'];

Funktion transcode ($ str)

{

if (leer ($ str))

{

false zurückgeben;

}

$ str = str_replace ('', '', $ str);

$ str = str_ireplace ('<br>', n, $ str);

$ str = str_ireplace ('<pre', '<pre name = code', $ str);

kehren $ str;

}

echo transcode ($ article_content);

dp.syntaxhighlighter.Highlightall ('Code');

</script>

OK, es ist vorbei.