首页 新闻 搜索 专区 学院

Tinymce编辑器插入代码的插件并高亮显示的问题

0
悬赏园豆:80 [已关闭问题] 关闭于 2011-10-06 07:21

插入代码我用的是InsertCode插件,改了它的insertcode.htm 为 InsertCode.aspx:

InsertCode。aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InsertCode.aspx.cs" Inherits="TinyMce终结.Scripts.tiny_mce.plugins.insertcode.InsertCode" %>
<%@ Register TagPrefix="CH" Namespace="ActiproSoftware.CodeHighlighter" Assembly="ActiproSoftware.CodeHighlighter.Net20" %>

<!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 runat="server">
<title>插入代码-Kirin</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script src="../../../jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../../jquery.json-2.2.js" type="text/javascript"></script>
<style type="text/css">
body
{ font-family: Consolas,"微软雅黑","宋体"; font-size:12px; margin:0px;padding:0px;}
.tb
{ font-size: 12px; }
.IsExpan
{ display:none; float:left; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="tb" id="Table1" cellspacing="0" cellpadding="3" border="0" runat="server">
<tr>
<th align="right">
编程语言:
</th>
<td>
<asp:DropDownList ID="LanguageDropDownList" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<th align="right">
选项:
</th>
<td class="options">
<input id="chkCollapse" type="checkbox" onclick="EnableInput();"/><label for="chkCollapse">全部折叠</label>
<span id="IsExpan" class="IsExpan">折叠标题:<input id="txtCollapseText" type="text" value="View Code " style="height:18px;line-height:18px;"/></span>
<input id="chkShowLineNumber" type="checkbox"/><label for="chkShowLineNumber">显示行号</label>
</td>
</tr>
<tr>
<th valign="top" align="right">
代码:
</th>
<td>
<asp:TextBox ID="CodeText" runat="server" TextMode="MultiLine" Width="400" Height="280"></asp:TextBox>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<div style="float:left;">
<input id="bntSumbit" type="button" value="确定" onclick="insertCode();"/><span id="tips"></span>
</div>
<input onclick="close_popup();" type="button" value="关闭" style="float:right;"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<pre><CH:CodeHighlighter runat="server" ID="CodeHighlight1"></CH:CodeHighlighter></pre>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
function EnableInput() {
$(
"#IsExpan").toggleClass("IsExpan");
}

function insertCode() {
var codeText = $('#CodeText').val();
if (codeText.length < 10) {
alert(
'请输入代码');
return;
}
var codeHighlighter = {};
codeHighlighter.Language
= $("#LanguageDropDownList").val();
if (codeHighlighter.Language == null || codeHighlighter.Language == "") {
alert(
'请选择一个编程语言');
return;
}
//codeText = codeText.replace(/^((\n)+)|((\n)+)$/g, '');
codeHighlighter.IsCollapse = $("#chkCollapse").attr('checked');
if (codeHighlighter.IsCollapse) {
codeHighlighter.CollapseText
= $("#txtCollapseText").val();
}
codeHighlighter.IsShowLineNumber
= $("#chkShowLineNumber").attr('checked');
codeHighlighter.CodeText
= codeText;

$(
"#tips").html('提交中...');
$(
"#tips").css('color', 'red');
$(
"#tips").css('padding-left', '5px');

$.ajax({
url:
'../../../../WebService/CodeHighLight.asmx/GetCodeHighLight',
data:
'{"codeHighlighter":' + $.toJSON(codeHighlighter) + '}',
type:
'post',
dataType:
'json',
contentType:
'application/json; charset=utf-8',
cache:
false,
success:
function (result) {
$(
"#tips").html('');
tinyMCEPopup.editor.execCommand(
'mceInsertContent', false, result.d);

tinyMCEPopup.close();
},
error:
function (error) {
$(
"#tips").html('提交失败')
alert(error.responseText);
}
})
}

function close_popup() {
tinyMCEPopup.close();
}
</script>
</body>
</html>

如上代码所示的JS部分,用JQuery调用WebService,WebService代码:

CodeHighLight.asmx
[System.Web.Script.Services.ScriptService]
public class CodeHighLight : System.Web.Services.WebService
{
[WebMethod]
public string GetCodeHighLight(Code codeHighlighter)
{
string code = codeHighlighter.CodeText;
code
= code.Replace("\r\n", "<br>\"+\r\n\"");
CodeHighlighterConfiguration config
= (CodeHighlighterConfiguration)ConfigurationManager.GetSection("codeHighlighter");
CodeHighlighterEngine engine
= new CodeHighlighterEngine();
engine.OutliningEnabled
= true;
engine.OutliningImagesPath
= "../Images/OutliningIndicators/";
engine.LineNumberMarginVisible
= codeHighlighter.IsShowLineNumber;
SyntaxLanguage lang
= CodeHighlighter.GetLanguage(config, codeHighlighter.Language);

string html = engine.GenerateHtmlInline(string.Empty, code, lang);
string divstr = @"<div style='BORDER-RIGHT: windowtext 0.5pt solid;PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 0.5pt solid; PADDING-LEFT: 5.4pt;
BACKGROUND: #e6e6e6; PADDING-BOTTOM: 4px;PADDING-TOP: 4px; BORDER-LEFT: windowtext 0.5pt solid;WIDTH: 98%;
BORDER-BOTTOM: windowtext 0.5pt solid;word-break:break-all'>
";
divstr
= divstr + html + @"</div>";
return divstr;
}

但是提交插入代码的时候,显示的是杂乱的,不像博客园-博问上面的标准格式,我想可能是WebService返回的Json的问题,这里附上Default.aspx的代码

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TinyMce终结._Default" ValidateRequest="false" %>

<!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 runat="server">
<title></title>
<script src="Scripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">
$(
function () {
tinyMCE.init({
language :
"zh-cn",
mode :
"exact",
elements:
"<%=TinyMce.ClientID %>",
theme :
"advanced",
width :
"620",
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,insertcode",
theme_advanced_buttons1:
"forecolor,backcolor,separator,bold,italic,underline,strikethrough,separator, justifyleft, justifycenter, justifyright,justifyleft,justifycenter,justifyright,outdent,indent,removeformat,separator,link,unlink,image,quote,code,fullscreen,insertcode",
theme_advanced_buttons2:
"",
theme_advanced_buttons3:
"",
theme_advanced_resizing:
true,
theme_advanced_resize_horizontal:
false,
theme_advanced_toolbar_location:
"top",
theme_advanced_toolbar_align:
"left",
theme_advanced_statusbar_location:
"bottom",
theme_advanced_fonts:
"宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Consolas=Consolas;Arial=arial,helvetica,sans-serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
convert_fonts_to_spans:
true,
remove_trailing_nbsp:
true,
convert_newlines_to_brs:
false,
force_br_newlines:
false,
remove_linebreaks:
false,
relative_urls:
false,
remove_script_host:
false,
extended_valid_elements:
"pre[name|class]",
content_css:
"css/mce.css",
cleanup:
true
});

})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TinyMce" TextMode="MultiLine" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<br /><br />
<pre><asp:Literal ID="Literal1" runat="server" Mode="Transform"></asp:Literal></pre>
</div>
</form>
</body>
</html>

希望能帮我解决这个问题,它困扰我一段时间了,先谢谢了!

kirin123的主页 kirin123 | 初学一级 | 园豆:137
提问于:2011-06-16 22:57
< >
分享
所有回答(1)
1

service代码调整下和html就可以了。。。

kirin123 | 园豆:137 (初学一级) | 2011-10-06 07:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册