在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元素沒有被創建！