Insert HTML, PHP, SQL, and JS Code in tinymce plug-in development and highlight the code

Source: Internet
Author: User

The following is my development process.
First, my tinymce version is version: 3.2.7 ).
Http://www.jb51.net/codes/17198.html
Tinymce insert Code , You need to call tinymce.exe ccommand ('mceinsertcontent', false, value); method of tinymce. The parameter does not need to be changed. value is the content you want to insert,
For example, if I write a function, Copy code The Code is as follows: function inserthtml (value)
{
Tinymce.exe ccommand ('mceinsertcontent', false, value );
}

For this example, download is provided later. In the example. A total of three files are involved.
Tinymce.html insertcode. php save. php files.
Tinymce.html is the tinymce text box page.
The main code is as follows: Copy code The Code is as follows: <SCRIPT type = "text/JavaScript" src = "http://www.jb51.net/tinymce/tiny_mce.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
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
Keywords: "Save, newdocument, |, bold, italic, underline, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect, formatselect, fontselect, fontsizeselect ",
Theme_advanced_buttons2: "Cut, copy, paste, pastetext, pasteword, |, search, replace, |, bullist, numlist, |, outdent, indent, BLOCKQUOTE, |, undo, redo, |, Link, unlink, anchor, image, cleanup, help, code, |, insertdate, inserttime, preview, |, forecolor, backcolor ",
Theme_advanced_buttons3: "tablecontrols, |, HR, removeformat, visualaid, |, sub, sup, |, charmap, emotions, iespell, media, advhr, |, print, |, LTr, RTL, |, fullscreen ",
Authorization: "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 (shocould 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>
<SCRIPT type = "text/JavaScript">
Function inserthtml (value)
{
Tinymce.exe ccommand ('mceinsertcontent', false, value );
}
</SCRIPT>

The JS Code initializes tinymce. The download example does not contain tinymce. You need to download it by yourself. Then, modify the SRC of the JS Code.Copy codeThe Code is as follows: <input name = "button" type = "button" onclick = "window. open ('insert' code. php', 'insert Code', 'height = 500, width = 600, Top = 300, Left = 300, toolbar = No, menubar = No, scrollbars = No, resizable = No, location = No, status = no') "value =" Click here to insert code "/>

The above code is used to open the insertcode. php file.
Next, let's take a look at insertcode. PHP file code.
First, JS CodeCopy codeThe Code is as follows: <script language = "JavaScript" src = "http://www.gosoa.com.cn/js/jquery.js"> </SCRIPT>
<Script language = "JavaScript">
Function insertcode ()
{
VaR value = comment ('{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>

Followed by PHP and HTML code Copy code The Code 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 = "hidden" name = "codetype" id = "codetype" value = "'. $ codetype.'"/>
<Input type = "button" name = "Submit" value = "Submit" onclick = "insertcode ()" style = "border: 1px solid #000; line-Height: 18px; width: 60px; "/> ';
} Else
{
?>
<Div style = "margin: 0 auto">
<Form ID = "form1" name = "form1" method = "Post" Action = "insertcode. php">
<Label> select the code type to insert
<Select name = "codetype" id = "codetype">
<Option value = 'php'> php </option>
<Option value = 'js'> JS </option>
<Option value = 'html'> HTML </option>
<Option value = 'C'> C </option>
<Option value = 'asp '> Asp </option>
<Option value = 'xml'> XML </option>
<Option value = 'java'> JAVA </option>
<Option value = 'java'> JAVA </option>
<Option value = 'csharp '> C # </option>
<Option value = 'SQL'> SQL </option>
</SELECT>
</Label>
<Label>
<Textarea name = "content" id = "content" Cols = "30" rows = "20" style = "width: 600px; Height: 200px; Border: 1px dashed #333 "> </textarea>
</Label>
<P>
<Label style = "padding-left: 50px;">
<Input type = "Submit" name = "Submit" value = "Submit" style = "border: 1px solid #000; line-Height: 18px; width: 60px;"/>
</Label>
</P>
<P> </P>
</Form>
</Div>
<? PHP
}
?>

In insertcode. php, The insertcode () function is used to call the inserthtml () function on the tinymce.html page and insert the code into the tinymce.html page.
In the code, why do we need '+ value +?
Because we will use the syntaxhighlighter plug-in to highlight the code on the display page.
Another note is that $ content = htmlspecialchars ($ content); we have escaped the code. In this way, the code inserted into the database is safe.
OK. Let's take a look at save. php. This page is used to display the submitted content.
The main code is as follows: Copy code The Code is as follows: <?
$ Article_content = $ _ post ['Article _ content'];
Function transcode ($ Str)
{
If (empty ($ Str ))
{
Return false;
}
$ STR = str_replace ('"', '"', $ Str );
$ STR = str_replace ('','', $ Str );
$ STR = str_ireplace ('<br>', "N", $ Str );
$ STR = str_ireplace ('<pre',' <PRE name = "code" ', $ Str );
Return $ STR;
}
Echo transcode ($ article_content );
?>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shcore. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushcsharp. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushphp. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushjscript. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushjava. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushvb. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushsql. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushxml. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushdelphi. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushpython. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushruby. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushcss. js"> </SCRIPT>
<SCRIPT class = "JavaScript" src = "/tinymce/lightcode/scripts/shbrushcpp. js"> </SCRIPT>
<SCRIPT class = "JavaScript">
DP. syntaxhighlighter. highlightall ('code ');
</SCRIPT>

OK.
^_^ ~~~
Tinymce plug-in development-code highlighting V1.0 (HTML, PHP, SQL, JS supported)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.