Font: [Increase decrease] type: Reprint a few days ago, think the insertion code of the blog is not easy to use. Then, replace the Sina HTML editor with the TINYMCE. and developed a simple plug-in code function ...
Here is the process I developed.
First of all, my TINYMCE version is version:3.2.7 (2009-09-22).
Http://www.jb51.net/codes/17198.html
TinyMCE Insert code, need to call TinyMCE's Tinymce.execcommand (' Mceinsertcontent ', false,value); Method. Where parameters do not need to change, value is the content you want to insert,
For example, I wrote a function,
Copy CodeThe code is as follows:
function inserthtml (value)
{
Tinymce.execcommand (' mceinsertcontent ', false,value);
}
Later, for this example, the download is available. In the example. There are altogether three files involved.
Tinymce.html insertcode.php save.php Three of these files.
Tinymce.html is the TinyMCE text box page.
The main code is as follows:
Copy CodeThe 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
THEME_ADVANCED_BUTTONS1: "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 ",
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>
<script type= "Text/javascript" >
function inserthtml (value)
{
Tinymce.execcommand (' mceinsertcontent ', false,value);
}
</script>
Where JS code is initialized TinyMCE. In the download example, TinyMCE is not included and you need to download it yourself. Then change the JS code src.
Copy CodeThe code is as follows:
<input name= "button" type= "button" 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=" Click here to insert Code "/>
The above code is used to open the insertcode.php file.
Next, let's look at the Insertcode. PHP code for this file.
The first is the JS code
Copy 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 = $ (' #postcontent '). html ();
var CodeType = $ (' #codetype '). Val ();
Window.opener.InsertHTML (' <textarea rows= ' 3 "cols=" "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 CodeThe 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 type of code you want 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= "rows=" "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 invoke the inserthtml () function of the tinymce.html page and insert the code into the tinymce.html page.
In the code, why do we want to ' +value+ '?
Because we are displaying the page, we will use the Syntaxhighlighter plugin to highlight the code.
One more thing to note here, $content = Htmlspecialchars ($content); We have htmlspecialchars escape for the code itself. In this way, the code to insert the database is safe.
OK, let's take a look at save.php, which is used to display the submitted content.
The main code is as follows:
Copy CodeThe 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, finished.
^_^ ~~~
TINYMCE plug-in development insert HTML,PHP,SQL,JS code and code highlighting
