tinyMCE plug-in development: insert html, php, sql, js code and highlight the code

Author：Eve Cole Update Time：2025-03-28 20:48:02

A few days ago, I felt that the insertion code of the blog was not easy to use. So, sina's html editor was replaced with tinyMCE. And a simple insertion of code has been developed. . . The following is my development process.

First, my tinyMCE version is Version: 3.2.7 (2009-09-22).

tinyMCE insertion code requires calling tinyMCE.execCommand('mceInsertContent',false,value); method of tinyMCE. The parameters do not need to be changed, value is what you want to insert.

For example, I wrote a function,

The code copy is as follows:

function InsertHTML(value)

{

tinyMCE.execCommand('mceInsertContent',false,value);

}

Later, for this example, a download is provided. In the example. There are three documents involved in total.

tinyMCE.html insertcode.php save.php these three files.

tinyMCE.html is the tinyMCE text box page.

The main code is as follows:

The code copy is as follows:

tinyMCE.init({

// General options

convert_urls : false,

mode : exact,

elements: Article_Content,

//mode : textareas,

theme : advanced,

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,

// Theme options

theme_advanced_buttons1 : save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,fontsizeselect,

theme_advanced_buttons4: insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,

theme_advanced_toolbar_location : top,

theme_advanced_toolbar_align : left,

theme_advanced_statusbar_location : bottom,

theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)

content_css : css/content.css,

// Drop lists for link/image/media/template dialogs

template_external_list_url : lists/template_list.js,

external_link_list_url : lists/link_list.js,

external_image_list_url : lists/image_list.js,

media_external_list_url : lists/media_list.js,

// Replace values for the template plugin

template_replace_values : {

username : Some User,

staffid: 991234

}

});

</script>

function InsertHTML(value)

{

tinyMCE.execCommand('mceInsertContent',false,value);

}

</script>

where js code is to initialize tinyMCE. The download example does not include tinyMCE, you need to download it yourself. Then change the src of the js code.

The code copy is as follows:

The above code is used to open the insertcode.php file.

Next, let's take a look at insertcode. The code of this file.

First of all, the js code

The code copy is as follows:

function 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>');

window.close();

}

</script>

Next is PHP and html code

The code copy is as follows:

<?php

error_reporting(0);

$content = $_POST['content'];

if(!empty($content))

{

$codetype = $_POST['codetype'];

echo '<div id=postcontent>';

$content = htmlspecialchars($content);

echo $content;

echo '</div>

<input type=button name=Submit value=Submit onclick=insertcode() style=border:1px solid #000; line-height:18px; width:60px;/>';

}else

{

<label>Select the type of code to insert

</select>

</label>

<label>

</label>

<p>

</label>

</p>

</form>

</div>

<?php

}

In insertcode.php, the insertcode() function is used to call the insertHTMl() function of the tinyMCE.html page and insert the code into the tinyMCE.html page.

In the code, why do we need '+value+'?

Because we are displaying the page, we will use the SyntaxHighlighter plug-in to highlight the code.

Another point to be explained, here, $content = htmlspecialchars($content); We performed htmlspecialchars escape operation for the code itself. In this way, the code inserted into the database will be safe.

OK, let's look at save.php again, this page is used to display the submitted content.

The main code is as follows:

The code copy is as follows:

$Article_Content = $_POST['Article_Content'];

function transcode($str)

{

if(empty($str))

{

return false;

}

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

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

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

return $str;

}

echo transcode($Article_Content);

dp.SyntaxHighlighter.HighlightAll('code');

</script>

OK, it's over.