大佬教程收集整理的这篇文章主要介绍了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,insert
datetiR_551_11845@e,prevIEw,media,search
replace,print,co
ntextmenu,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,style
SELEct,format
SELEct,Font
SELEct,Fontsize
SELEct",@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,movefor
WARD,move
BACk
WARD,absolute,styleprops,cite,abbr,acron
ym,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.co
m.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_repor
Ting(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_i
replace('<BR>',"n",$str
); @H_
489_0@$str = str_i
replace('<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/shBrush
php.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/shBrus
HSQL.Js"></script> @H_
489_0@<script class="JavaScript" src="/
Tinymce/
Lightcode/Scripts/shBrushXm
l.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/shBrushCS
s.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,请注明来意。