程序笔记   发布时间:2022-05-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
下面就是我开发的过程。 @H_489_0@首先,我的 TinymCE版本是 Version: 3.2.7 (2009-09-22) 。@H_489_0@下载地http://www.code.net/codes/17198.html@H_489_0@TinymCE插入代码,需要调用 TinymCE的 TinymCE.execCommand('mceInsertContent',false,value); 方法。其中参数无需改变,value 就是你要插入的内容, @H_489_0@比如我写了一个函数, @H_489_0@
复制代码 代码如下:
@H_489_0@function InsertHTML(value) @H_489_0@{ @H_489_0@TinymCE.execCommand('mceInsertContent',value); @H_489_0@} @H_489_0@
@H_489_0@后面,针对该例子,提供下载。在例子中。一共涉及到三个文件。 @H_489_0@TinymCE.HTML insertcode.php save.php 这三个文件。 @H_489_0@TinymCE.HTML 是TinymCE文本框页面。 @H_489_0@主要代码如下: @H_489_0@
复制代码 代码如下:
@H_489_0@<script type="text/JavaScript" src="http://www.code.net/Tinymce/Tiny_mce.Js"></script> @H_489_0@<script type="text/JavaScript"> @H_489_0@TinymCE.init({ @H_489_0@// General options @H_489_0@convert_urls : false,@H_489_0@mode : "exact",@H_489_0@elements : "Article_Content",@H_489_0@//mode : "textareas",@H_489_0@theme : "advanced",@H_489_0@plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,IEspell,inlinepopups,insertdatetiR_551_11845@e,prevIEw,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",@H_489_0@// theme options @H_489_0@theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,Strikethrough,justifyleft,justifycenter,justifyright,justifyfull,styleSELEct,formatSELEct,FontSELEct,FontsizeSELEct",@H_489_0@theme_advanced_buttons2 : "cut,copy,pastetext,pasteword,search,replace,bulList,numList,outdent,indent,blockquote,undo,redo,link,unlink,anchor,image,cleanup,Help,code,insertdate,inserttime,forecolor,BACkcolor",@H_489_0@theme_advanced_buttons3 : "tablecontrols,hr,removeformat,visualaID,sub,sup,charmap,ltr,rtl,fullscreen",@H_489_0@theme_advanced_buttons4 : "insertlayer,moveforWARD,moveBACkWARD,absolute,styleprops,cite,abbr,acronym,del,ins,attribs,pagebreak",@H_489_0@theme_advanced_toolbar_LOCATIOn : "top",@H_489_0@theme_advanced_toolbar_align : "left",@H_489_0@theme_advanced_statusbar_LOCATIOn : "bottom",@H_489_0@theme_advanced_resizing : true,@H_489_0@// Example content CSS (should be your site CSS) @H_489_0@content_CSS : "CSS/content.CSS",@H_489_0@// Drop Lists for link/image/media/template dialogs @H_489_0@template_external_List_url : "Lists/template_List.Js",@H_489_0@external_link_List_url : "Lists/link_List.Js",@H_489_0@external_image_List_url : "Lists/image_List.Js",@H_489_0@media_external_List_url : "Lists/media_List.Js",@H_489_0@// replace values for the template plugin @H_489_0@template_replace_values : { @H_489_0@username : "Some User",@H_489_0@staffID : "991234" @H_489_0@} @H_489_0@}); @H_489_0@</script> @H_489_0@<script type="text/JavaScript"> @H_489_0@function InsertHTML(value) @H_489_0@{ @H_489_0@TinymCE.execCommand('mceInsertContent',value); @H_489_0@} @H_489_0@</script> @H_489_0@
@H_489_0@其中Js代码是初始化 TinymCE。下载的例子中,并未包含 TinymCE,你需要自己下载。然后 更改Js代码的 src 即可。 @H_489_0@
复制代码 代码如下:
@H_489_0@<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="点击这里插入代码" /> @H_489_0@
@H_489_0@上面这段代码,是用来打开insertcode.php文件的。 @H_489_0@接下来,我们来看下 insertcode。php 这个文件的代码。 @H_489_0@首先是 Js 代码 @H_489_0@
复制代码 代码如下:
@H_489_0@<script language="JavaScript" src="http://www.gosoa.com.cn/Js/jquery.Js"></script> @H_489_0@<script language="JavaScript"> @H_489_0@function insertcode() @H_489_0@{ @H_489_0@var value = $('#postcontent').HTML(); @H_489_0@var codetype = $('#codetype').val(); @H_489_0@// window.opener.InsertHTML('<textarea rows="3" cols="50" name="code" class="'+codetype+'">'+value+'</textarea>'); @H_489_0@window.opener.InsertHTML('<pre name="code" class="'+codetype+'">'+value+'</pre>'); @H_489_0@window.close(); @H_489_0@} @H_489_0@</script> @H_489_0@
@H_489_0@其次是 php 和 HTML 代码 @H_489_0@
复制代码 代码如下:
@H_489_0@<?php @H_489_0@error_reporTing(0); @H_489_0@$content = $_POST['content']; @H_489_0@if(!empty($content)) @H_489_0@{ @H_489_0@    $codetype = $_POST['codetype']; @H_489_0@    echo '<div ID="postcontent">'; @H_489_0@    $content = HTMLspecialchars($content); @H_489_0@    echo $content; @H_489_0@    echo '</div> @H_489_0@    <input type="hIDden" name="codetype" ID="codetype" value="'.$codetype.'" /> @H_489_0@    <input type="button" name="submit" value="提交" onclick="insertcode()" style="border:1px solID #000; line-height:18px; wIDth:60px;"/>'; @H_489_0@}else @H_489_0@{ @H_489_0@?> @H_489_0@<div style="margin:0 auto"> @H_489_0@<form ID="form1" name="form1" method="post" action="insertcode.php"> @H_489_0@<label>选择要插入的代码类型 @H_489_0@<SELEct name="codetype" ID="codetype"> @H_489_0@    <option value='php'>php</option> @H_489_0@    <option value='Js'>Js</option> @H_489_0@    <option value='HTML'>HTML</option> @H_489_0@    <option value='c'>c</option> @H_489_0@    <option value='asp'>asp</option> @H_489_0@    <option value='xml'>xml</option> @H_489_0@    <option value='java'>java</option> @H_489_0@    <option value='java'>java</option> @H_489_0@    <option value='CSharp'>C#</option> @H_489_0@    <option value='sql'>sql</option> @H_489_0@</SELEct> @H_489_0@</label> @H_489_0@<label> @H_489_0@<textarea name="content" ID="content" cols="30" rows="20" style="wIDth:600px; height:200px; border:1px dashed #333"></textarea> @H_489_0@</label> @H_489_0@<p> @H_489_0@<label style="padding-left:50px;"> @H_489_0@<input type="submit" name="submit" value="提交" style="border:1px solID #000; line-height:18px; wIDth:60px;"/> @H_489_0@</label> @H_489_0@</p> @H_489_0@<p> </p> @H_489_0@</form> @H_489_0@</div> @H_489_0@<?php @H_489_0@}     @H_489_0@?> @H_489_0@
@H_489_0@在insertcode.php中,insertcode() 函数用来调用 TinymCE.HTML页面的 insertHTML()函数,并将代码插入到 TinymCE.HTML 页面中。 @H_489_0@代码中,我们为什么要 '+value+' 呢? @H_489_0@因为我们在显示页面,将会采用 SyntaxHighlighter 插件来高亮显示代码。 @H_489_0@还有一点要说明,在这里,$content = HTMLspecialchars($content); 我们对于代码本身,进行了 HTMLspecialchars 转义操作。这样,插入数据库的代码则会是安全的。 @H_489_0@OK,我们再来看 save.php,该页面用来显示 提交的内容。 @H_489_0@主要代码如下: @H_489_0@
复制代码 代码如下:
@H_489_0@<? @H_489_0@$Article_Content = $_POST['Article_Content']; @H_489_0@function transcode($str) @H_489_0@{ @H_489_0@if(empty($str)) @H_489_0@{ @H_489_0@return false; @H_489_0@} @H_489_0@$str = str_replace('"','"',$str); @H_489_0@$str = str_replace('','',$str); @H_489_0@$str = str_ireplace('<BR>',"n",$str); @H_489_0@$str = str_ireplace('<pre','<pre name="code" ',$str); @H_489_0@return $str; @H_489_0@} @H_489_0@echo transcode($Article_Content); @H_489_0@?> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shCore.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushCSharp.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushphp.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushJscript.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushJava.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushVb.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrusHSQL.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushXml.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushDelphi.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushPython.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushRuby.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushCSs.Js"></script> @H_489_0@<script class="JavaScript" src="/Tinymce/Lightcode/Scripts/shBrushCpp.Js"></script> @H_489_0@<script class="JavaScript"> @H_489_0@dp.SyntaxHighlighter.HighlightAll('code'); @H_489_0@</script> @H_489_0@
@H_489_0@OK,完了。 @H_489_0@^_^ ~~~@H_489_0@TinymCE 插件开发之插代码高亮 v1.0 (支持html,php,sql,js)

您可能感兴趣的文章:

  • JavaScript计算值然后把值嵌入到html中的实现方法
  • (jsp/html)网页上嵌入播放器(常用播放器代码整理)
  • js 复制或插入Html的实现方法小结
  • 在HTML中插入JavaScript代码的示例
  • 在table中插入多行的js代码(与insertAdjacentHTML相似的功能)
  • 在HTML文档中嵌入JavaScript的四种方法

大佬总结

以上是大佬教程为你收集整理的tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示全部内容,希望文章能够帮你解决tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:代码高亮