在ASP.NET页面中使用TinyMCE编辑器回发

Question

我写了一段代码以在ASP页面上使用TinyMCE（javascript“richtext”编辑器）。 ASP页面本身包含一个名为“art_content”的文本框，它生成一个类似于“ctl00_hold_selectionblock_art_content”的ClientID。

我遇到的一个问题是制作一个由我的应用程序存储的“安全”代码，当我进入客户端时加载回HTML，然后在提交（或回发）之前返回到“安全”模式，以防止服务器端的HTML检查错误。

我的Javascript似乎正常工作，但我无论如何得到错误。它看起来不起作用，尽管该功能正在触发。

帮助！

tinymce.init 
(
    { 
    selector:'#ctl00_hold_selectionblock_art_content', 
    plugins: 
     ['table link image textcolor pagebreak code visualblocks charmap'], 
    toolbar: 
     'bold,italic,underline' 
    } 
); 
function SafeCms(text,encode) 
{ 
    if(encode) 
    { 
    text=text.replaceAll('<','{{'); 
    text=text.replaceAll('>','}}'); 
    } 
    else 
    { 
    text=text.replaceAll('{{','<'); 
    text=text.replaceAll('}}','>'); 
    } 
    return text; 
} 
$(document).ready 
(
    function() 
    { 
$('#ctl00_hold_selectionblock_art_content').val(SafeCms($('#ctl00_hold_selectionblock_art_content').val(),false)); 
    $("form").submit 
    (
     function() 
     { 
     tinymce.triggerSave(); 
     $('#ctl00_hold_selectionblock_art_content').val(SafeCms($('#ctl00_hold_selectionblock_art_content').val(),true)); 
     } 
    ); 
    } 
); 

UPDATE：通过服务器端（页）

A potentially dangerous Request.Form value was detected from the client (ctl00$hold$selectionblock$art_content="<p>ab<em>acac</em>ac..."). 

CallStack: 
[HttpRequestValidationException (0x80004005): Um valor possivelmente perigoso Request.Form foi detectado no cliente (ctl00$hold$selectionblock$art_content="<p>ab<em>acac</em>ac...").] 
    System.Web.HttpRequest.ValidateString(String s, String valueName, String collectionName) +8818818 
    System.Web.HttpRequest.ValidateNameValueCollection(NameValueCollection nvc, String collectionName) +111 
    System.Web.HttpRequest.get_Form() +129 
    System.Web.HttpRequest.get_HasForm() +8818919 
    System.Web.UI.Page.GetCollectionBasedOnMethod(Boolean dontReturnNull) +97 
    System.Web.UI.Page.DeterminePostBackMode() +63 
    System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +6785 
    System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +242 
    System.Web.UI.Page.ProcessRequest() +80 
    System.Web.UI.Page.ProcessRequestWithNoAssert(HttpContext context) +21 
    System.Web.UI.Page.ProcessRequest(HttpContext context) +49 
    ASP.content_quality_knownledges_aspx.ProcessRequest(HttpContext context) in c:\Users\Sammuel\AppData\Local\Temp\Temporary ASP.NET Files\root\a3cdd555\dbee70c6\App_Web_e_7yzdu3.2.cs:0 
    System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +181 
    System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +75 

Answer 1

如this article建议提出的错误，你可以从SaveContent事件的编辑内容中删除有问题的HTML字符。如有必要，您可以在​​事件中恢复它们。

对于TinyMCE的4，您可以使用此代码：

tinymce.init({ 
    selector: '#ctl00_hold_selectionblock_art_content', 
    plugins: ['table link image textcolor pagebreak code visualblocks charmap'], 
    toolbar: 'bold,italic,underline', 
    setup: function (editor) { 
     editor.on("SaveContent", function (e) { 
      e.content = SafeCms(e.content, true); 
     }); 
     editor.on('BeforeSetContent', function (e) { 
      e.content = SafeCms(e.content, false); 
     }); 
    } 
}); 

function SafeCms(text, encode) { 
    if (encode) { 
     return text.replace(/</g, '{{').replace(/>/g, '}}'); 
    } 
    else { 
     return text.replace(/{{/g, '<').replace(/}}/g, '>'); 
    } 
} 

我SafeCms而不是replaceAll使用replace用正则表达式（不默认在Javascript中存在）。

Answer 2

我有这个问题，在您的web.config地址：

<system.web> 
    <pages validateRequest="false" /> 
</system.web> 

如果你是在.NET 4.0请确保您在web.config

<httpRuntime requestValidationMode="2.0" /> 

Answer 3

添加这个其实你并不需要手动替换字符，由于安全问题，您可能总是因为没有想到的特殊情况和ASP.NET块而最终结束。

我认为最好的选择是对内容进行编码，然后解码服务器端。

我我的TinyMCE的内容复制到一个文本框不可见（这样用户简化版，最终看到了在他的HTML编辑器编码内容）在服务器端

function encodeContent(copyToId, htmlContent) { 
    var encodedHtml = encodeURIComponent(htmlContent); 
    $('#' + copyToId).val(encodedHtml); 
} 

然后我得到这个文本框的内容和解码它

var decodedHtml = HttpUtility.UrlDecode(this.TextBoxNewContent.Text); 

我不知道你是如何初始化TinyMCE的，但我个人把它包在我调用的方法Page_PreRender注册一个JS的功能。在真正的我有更多的参数，这里是一个简化代码：

protected void Page_PreRender(object sender, EventArgs e) 
{ 
    var script = "createHtmlEditor('" 
     + this.tinyMceEditor.ClientID + "','" 
     + this.TextBoxNewContent.ClientID + "');"; 

    var scriptId = "createHtmlEditor_" + this.tinyMceEditor.ClientID; 
    ScriptManager.RegisterStartupScript(this, this.GetType(), scriptId, script, true); 
} 

encodeURIComponent是土生土长的JavaScript函数和HttpUtility静态类位于System.Web命名空间

注意：当我说“不可见”文本框我在谈论隐形的CSS。因为在ASP.NET中Visibility="false"会导致你的HTML元素没有被创建！