使用xheditor+SyntaxHighligher实现代码高亮显示实例
2016-04-11 17:59
841 查看
实例用是的xheditor1.2.2各SyntaxHighligher 3.0.83 坐出来的！
实例1：用官法的实例改的！
2、用csdn的方法的实例
user_con.js
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Scripts_Default" ValidateRequest="false" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Label1.Text = Request.Form["content1"];
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="frame/jquery-1.11.0.js"></script>
<script src="xheditor/xheditor-1.2.2.min.js"></script>
<script src="user_con.js"></script>
<script src="/Scripts/SyntaxHighligher/scripts/shCore-min.js"></script>
<script src="/Scripts/SyntaxHighligher/scripts/shAutoloader.js"></script>
<%--<link href="/Scripts/SyntaxHighligher/styles/shCore.css" rel="stylesheet" />--%>
<%-- 因为有下面的样式！所以上面的可以不加载--%>
<link href="/Scripts/SyntaxHighligher/styles/shCoreDefault.css" rel="stylesheet" />
</head>
<body>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<form id="example" runat="server">
<textarea id="content1" cols="100" rows="8" style="width: 700px; height: 200px; visibility: hidden;" runat="server"></textarea>
<br />
<asp:Button ID="Button1" runat="server" Text="提交内容" />
(提交快捷键: Ctrl + Enter)
</form>
</body>
</html>
实例1：用官法的实例改的！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xhEditor demo1 : 默认模式</title>
<script src="frame/jquery-1.11.0.js"></script>
<script src="xheditor/xheditor-1.2.2.min.js"></script>
<!--相关语言设置文件放在xheditor-1.2.2.min.js里面了！所以这里没声明的！下面的样式可以直接放至xheditor_skin里的相关ui.css中！-->
<style type="text/css">
.btnCode {background:transparent url(img/code.gif) no-repeat 16px 16px; background-position:2px 2px;}
</style>
<script type="text/javascript">
var editor;
$(pageInit);
function pageInit() {
//定义插件
var allPlugin = {
Code: {
c: 'btnCode', t: '插入代码', h: 1, e: function () {
var _this = this;
var htmlCode = '<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其它</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';
var jCode = $(htmlCode), jType = $('#xheCodeType', jCode), jValue = $('#xheCodeValue', jCode), jSave = $('#xheSave', jCode);
jSave.click(function () {
_this.loadBookmark();
_this.pasteHTML('<pre class="brush:' + jType.val() + '">' + _this.domEncode(jValue.val()) + '</pre>');
_this.hidePanel();
return false;
});
_this.saveBookmark();
_this.showDialog(jCode);
}
}
};
editor = $('#elm1').xheditor({
//对应相关的插件
plugins: allPlugin,
//功能块
tools: 'Cut,Copy,Paste,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Img,Flash,Media,Hr,Emot,Table,Code,|,Source,Preview,Print,Fullscreen',
//编辑器内的样式
loadCSS: '<style>p { margin:4px 0px; padding:2px 0px; }pre { margin:4px 0px; background-color:#f0f0f0;}img { max-width:98%; }</style>',
shortcuts: { 'ctrl+enter': submitForm }
});
}
function submitForm() {
$('#frmDemo').submit();
}
</script>
</head>
<body>
<form method="post" action="show.php" id="frmDemo">
<textarea id="elm1" name="elm1" rows="12" cols="80" style="width: 80%"></textarea><br /><br />
<input type="submit" name="save" value="Submit" />
</form>
</body>
</html>2、用csdn的方法的实例
user_con.js
$(pageInit);
var editor;
function pageInit() {
//定义插件
var allPlugin = {
Code: {
c: 'btnCode', t: '插入代码', h: 1, e: function () {
var _this = this;
var codeArr1 = ["html", "objc", "javascript", "css", "php", "csharp", "cpp", "java", "python", "ruby", "vb", "delphi", "sql", "plain"];
var codeArr2 = ["HTML/XML", "Objective-C", "JavaScript", "CSS", "PHP", "C#", "C++", "Java", "Python", "Ruby", "Visual Basic", "Delphi", "SQL", "其它"];
var opts = '';
for (var i = 0; i < codeArr1.length; i++) {
opts += '<option value="' + codeArr1[i] + '">' + codeArr2[i] + '</option>';
}
var htmlCode = '<div>编程语言: <select id="xheCodeType">' + opts + '</select></div>'
+ '<div><textarea id="xheCodeValue" wrap="soft" rows=6 spellcheck="false" cols=40 style="width:300px;height:100px;"></textarea></div>'
+ '<div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';
var jCode = $(htmlCode), jType = $('#xheCodeType', jCode), jValue = $('#xheCodeValue', jCode), jSave = $('#xheSave', jCode);
jSave.click(function () {
var sel_code = $("#xheCodeType").val();
_this.loadBookmark();
_this.pasteHTML('<br/><pre class="brush: ' + jType.val() + '">' + _this.domEncode(jValue.val()) + '</pre><br/>');
_this.hidePanel();
//写入cookie相关值最近插入的是什么语言代码
document.cookie = "postedit_code=" + sel_code + "; expires=" + function () { var d = new Date(); d.setFullYear(d.getFullYear() + 1); return d.toGMTString(); }();
return false;
});
_this.saveBookmark();
_this.showDialog(jCode);
//读取COOKIE并设置
var _his_code = document.cookie.match(new RegExp("(^|\s)postedit_code=([^;]*)(;|$)"));
if (_his_code) $('#xheCodeType').val(_his_code);
else $("#xheCodeType option")[0].selected = true;
}
}
};
editor = $('#content1').xheditor({
//对应相关的插件
plugins: allPlugin,
//功能块
tools: 'Cut,Copy,Paste,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Img,Flash,Media,Hr,Emot,Table,Code,|,Source,Preview,Print,Fullscreen',
//编辑器内的样式
loadCSS: '<style>p { margin:4px 0px; padding:2px 0px; }pre { margin:4px 0px; background-color:#f0f0f0;}img { max-width:98%; }</style>',
shortcuts: { 'ctrl+enter': submitForm }
});
//下面是xheditor载入！
//xheditor-1.2.2的自动载入过程！
SyntaxHighlighter.autoloader.apply(null, path(
'applescript $shBrushAppleScript.js',
'actionscript3 as3 $shBrushAS3.js',
'bash shell $shBrushBash.js',
'coldfusion cf $shBrushColdFusion.js',
'cpp c $shBrushCpp.js',
'c# c-sharp csharp $shBrushCSharp.js',
'css $shBrushCss.js',
'delphi pascal $shBrushDelphi.js',
'diff patch pas $shBrushDiff.js',
'erl erlang $shBrushErlang.js',
'groovy $shBrushGroovy.js',
'java $shBrushJava.js',
'jfx javafx $shBrushJavaFX.js',
'js jscript javascript $shBrushJScript.js',
'perl pl $shBrushPerl.js',
'php $shBrushPhp.js',
'text plain $shBrushPla
4000
in.js',
'py python $shBrushPython.js',
'ruby rails ror rb $shBrushRuby.js',
'sass scss $shBrushSass.js',
'scala $shBrushScala.js',
'sql $shBrushSql.js',
'vb vbnet $shBrushVb.js',
'xml xhtml xslt html $shBrushXml.js'
));
SyntaxHighlighter.defaults['toolbar'] = false; //去掉右上角问号图标
SyntaxHighlighter.config.tagName = 'pre'; //可以更改解析的默认Tag。
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
}
//表单的提交方法，
function submitForm() {
$('#example').submit();
}
function path() {
//alert("测试");
var args = arguments,
result = [];
for (var i = 0; i < args.length; i++)
result.push(args[i].replace('$', '/Scripts/SyntaxHighligher/scripts/'));
return result;
}Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Scripts_Default" ValidateRequest="false" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Label1.Text = Request.Form["content1"];
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="frame/jquery-1.11.0.js"></script>
<script src="xheditor/xheditor-1.2.2.min.js"></script>
<script src="user_con.js"></script>
<script src="/Scripts/SyntaxHighligher/scripts/shCore-min.js"></script>
<script src="/Scripts/SyntaxHighligher/scripts/shAutoloader.js"></script>
<%--<link href="/Scripts/SyntaxHighligher/styles/shCore.css" rel="stylesheet" />--%>
<%-- 因为有下面的样式！所以上面的可以不加载--%>
<link href="/Scripts/SyntaxHighligher/styles/shCoreDefault.css" rel="stylesheet" />
</head>
<body>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<form id="example" runat="server">
<textarea id="content1" cols="100" rows="8" style="width: 700px; height: 200px; visibility: hidden;" runat="server"></textarea>
<br />
<asp:Button ID="Button1" runat="server" Text="提交内容" />
(提交快捷键: Ctrl + Enter)
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 交换机升级排障实例
- sql2008启动代理未将对象应用到实例解决方案
- Ajax教程实例详解
- 初识JQuery 实例一(first)
- JQuery入门基础小实例(1)
- Jquery具体实例介绍AJAX何时用，AJAX应该在什么地方用
- 一个小助手批处理实例代码
- XStream使用方法总结附实例代码
- asp.net得到本机数据库实例的两种方法代码
- C++多继承同名隐藏实例详细介绍
- PHP入门学习的几个不错的实例代码
- XHEditor编辑器使用文档
- JSP发送邮件实例
- C#中的IEnumerable简介及简单实现实例
- jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
- PHP中的流(streams)浅析
- PHP curl使用实例
- 非常好用的JsonToString 方法 简单实例
- 举例说明JavaScript中的实例对象与原型对象
- C#确保只有一个实例在运行的方法