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>
</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>
希望能帮我解决这个问题，它困扰我一段时间了，先谢谢了！
所有回答(1)
1
service代码调整下和html就可以了。。。
