Développement du plug-in TinyMCE: insérez le code HTML, PHP, SQL, JS et mettez en surbrillance le code

Auteur：Eve Cole Date de mise à jour：2025-03-28 20:48:02

Il y a quelques jours, j'ai senti que le code d'insertion du blog n'était pas facile à utiliser. Ainsi, l'éditeur HTML de Sina a été remplacé par TinyMCE. Et une simple insertion de code a été développée. . . Ce qui suit est mon processus de développement.

Tout d'abord, ma version TinyMCE est la version: 3.2.7 (2009-09-22).

Le code d'insertion TinyMCE nécessite d'appeler TinyMCE.ExecCommand («mceinsertContent», false, valeur); Méthode de TinyMCE. Les paramètres n'ont pas besoin d'être modifiés, la valeur est ce que vous souhaitez insérer.

Par exemple, j'ai écrit une fonction,

La copie de code est la suivante:

fonction inserthtml (valeur)

{

tinyMce.execCommand («mceinsertContent», false, valeur);

}

Plus tard, pour cet exemple, un téléchargement est fourni. Dans l'exemple. Il y a trois documents impliqués dans le total.

tinymce.html insertcode.php sauve.php ces trois fichiers.

TinyMCE.html est la page TinyMce Text Box.

Le code principal est le suivant:

La copie de code est la suivante:

tinyMce.init ({

// Options générales

convert_urls: false,

Mode: Exact,

Éléments: article_content,

// mode: textareas,

Thème: avancé,

Plugins: Safari, Pagebreak, style, couche, table, sauvegarde, advhr, advImage, advlink, émotions, iespell, inlinepopups, insertdatetime, aperçu, média, searchreplace, imprimer, contextmenu, pâte, directionnalité, plein écran, non-éditable, visualchars, non réchus

// Options de thème

thème_advanced_buttons1: sauvegarder, newDocument, |, audacieux, italique, souligner, strikethrough, |, justifyleft, justifier, justifyright, justifulfull, styleselect, formatselec

thème_advanced_buttons4: insertlayer, moveforward, movebackward, absolu, |, styleprops, |, citer, abbr, acronyment, del, ins, attribs, |, visualchars, non rakey, modèle, pagebreak,

thème_advanced_toolbar_location: en haut,

thème_advanced_toolbar_align: à gauche,

thème_advanced_statusbar_location: en bas,

thème_advanced_resize: true,

// Exemple de contenu CSS (devrait être votre site CSS)

contenu_css: css / contenu.css,

// Drop listes pour les boîtes de dialogue Link / Image / Media / Template

template_external_list_url: lists / template_list.js,

external_link_list_url: lists / link_list.js,

external_image_list_url: listes / image_list.js,

media_external_list_url: lists / media_list.js,

// remplacer les valeurs du plugin de modèle

template_replace_values: {

Nom d'utilisateur: un utilisateur,

Staffid: 991234

}

});

</cript>

fonction inserthtml (valeur)

{

tinyMce.execCommand («mceinsertContent», false, valeur);

}

</cript>

où le code JS est d'initialiser TinyMCE. L'exemple de téléchargement n'inclut pas TinyMCE, vous devez le télécharger vous-même. Modifiez ensuite le SRC du code JS.

La copie de code est la suivante:

<entrée name = bouton type = bouton onclick = window.open ('insertcode.php', 'insert code', 'height = 500, width = 600, top = 300, Left = 300, toolbar = no, menubar = no, scrollbars = no, resizable = no, location = no, status = no') value = cliquez ici pour inscrire le code />

Le code ci-dessus est utilisé pour ouvrir le fichier insertcode.php.

Ensuite, jetons un coup d'œil à INSERTCODE. Le code de ce fichier.

Tout d'abord, le code JS

La copie de code est la suivante:

fonction insertcode ()

{

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

var CodeType = $ ('# codeType'). Val ();

// window.oopener.inserthtml ('<TextArea Rows = 3 cols = 50 name = code class =' + codeType + '>' + value + '</ textarea>');

window.oopener.inserthtml ('<pren name = code class =' + codeType + '>' + value + '</ pre>');

window.close ();

}

</cript>

Ensuite, le code PHP et HTML

La copie de code est la suivante:

<? Php

error_reporting (0);

$ content = $ _post ['contenu'];

if (! vide ($ contenu))

{

$ CodeType = $ _POST ['CodeType'];

echo '<div id = postContent>';

$ content = htmlSpecialChars ($ contenu);

Echo $ Contenu;

écho '</div>

<entrée type = name cachée = codeType id = codeType Value = '. $ codeType.' />

<entrée type = Button Name = Soumider Value = Soumider onClick = insertCode () Style = Border: 1px Solid # 000; hauteur de ligne: 18px; Largeur: 60px; /> ';

}autre

{

<label> Sélectionnez le type de code à insérer

</lect>

</ label>

<étiquet>

</ label>

<p>

</ label>

</p>

</ form>

</div>

<? Php

}

Dans insertcode.php, la fonction insertcode () est utilisée pour appeler la fonction inserthtml () de la page tinyMCE.html et insérer le code dans la page tinyMCE.html.

Dans le code, pourquoi avons-nous besoin de «+ valeur +»?

Parce que nous affichons la page, nous utiliserons le plug-in SyntaxHighlighter pour mettre en surbrillance le code.

Un autre point à expliquer, ici, $ contenu = htmlSpecialChars ($ contenu); Nous avons effectué l'opération d'échappement HTMLSpecialCars pour le code lui-même. De cette façon, le code inséré dans la base de données sera sûr.

Ok, regardons à nouveau Save.php, cette page est utilisée pour afficher le contenu soumis.

Le code principal est le suivant:

La copie de code est la suivante:

$ Article_Content = $ _POST ['Article_Content'];

Fonction Transcode ($ str)

{

if (vide ($ str))

{

retourne false;

}

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

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

$ str = str_ireplace ('<pre', '<pré nom = code', $ str);

retour $ str;

}

Echo Transcode ($ Article_Content);

dp.syntaxhighlighter.highlightall ('code');

</cript>

Ok, c'est fini.