当前位置: 首页 > 图文教程 > 网络编程 > 网页播放器 > tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示

网页播放器
超级REAL视频播放器
网页视频播放器程序代码(通用代码)
通用网页播放器
通用媒体播放器(5.5更新)
在线播放器代码大全
符合web标准的媒体播放器代码
网页播放器的参数含义 Windows Media Player 网页播放器 参数含义
自动切换能播放音乐列表 vbs
ASP电影播放器
一款不错的flash Mp3播放器
Window Media Player 播放器
获取音乐文件的播放时间及当前进度
javascript控制realplayer对象使用
内嵌式RealPlayer播放器的参数含义
功能齐全的Real播放器
多首歌曲连续播放之asx播放列表文件
图片自动播放器脚本之家修正
封装的一个播放器wmv
利用JAVASCRIPT控制MEDIA PLAYER的功能实现
来自CSDN的"无限流"分页程序

网页播放器 中的 tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 354 ::
收藏到网摘: n/a

前几天,觉得blog的插入代码不够好用。于是,将sina的html编辑器更换为了tinyMCE。并且开发了一个简单的插入代码的功能。。。 下面就是我开发的过程。
首先,我的 tinyMCE版本是 Version: 3.2.7 (2009-09-22) 。
下载地址 http://www.ruanchen.com/'mceInsertContent',false,value); 方法。其中参数无需改变,value 就是你要插入的内容,
比如我写了一个函数,
复制代码 代码如下:

function InsertHTML(value)
{
tinyMCE.execCommand('mceInsertContent',false,value);
}

后面,针对该例子,提供下载。在例子中。一共涉及到三个文件。
tinyMCE.html insertcode.php save.php 这三个文件。
tinyMCE.html 是tinyMCE文本框页面。
主要代码如下:
复制代码 代码如下:

<script type="text/javascript" src="http://www.ruanchen.com/"></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>

其中js代码是初始化 tinyMCE。下载的例子中,并未包含 tinyMCE,你需要自己下载。然后 更改js代码的 src 即可。
复制代码 代码如下:

<input name="button" type="button" onclick="window.open('insertcode.php','插入代码','height=500, width=600, top=300, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')" value="点击这里插入代码" />

上面这段代码,是用来打开insertcode.php文件的。
接下来,我们来看下 insertcode。php 这个文件的代码。
首先是 js 代码
复制代码 代码如下:

<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="50" name="code" class="'+codetype+'">'+value+'</textarea>');
window.opener.InsertHTML('<pre name="code" class="'+codetype+'">'+value+'</pre>');
window.close();
}
</script>

其次是 PHP 和 html 代码
复制代码 代码如下:

<?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="提交" 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 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="提交" style="border:1px solid #000; line-height:18px; width:60px;"/>
</label>
</p>
<p> </p>
</form>
</div>
<?php
}
?>

在insertcode.php中,insertcode() 函数用来调用 tinyMCE.html页面的 insertHTMl()函数,并将代码插入到 tinyMCE.html 页面中。
代码中,我们为什么要 '+value+' 呢?
因为我们在显示页面,将会采用 SyntaxHighlighter 插件来高亮显示代码。
还有一点要说明,在这里,$content = htmlspecialchars($content); 我们对于代码本身,进行了 htmlspecialchars 转义操作。这样,插入数据库的代码则会是安全的。
OK,我们再来看 save.php,该页面用来显示 提交的内容。
主要代码如下:
复制代码 代码如下:

<?
$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 插件开发之插代码高亮 v1.0 (支持html,php,sql,js)