SammuelMiranda SammuelMiranda - 6 days ago 5
ASP.NET (C#) Question

Postback with TinyMCE editor in ASP.NET page

i wrote this piece of code to use TinyMCE (javascript "richtext" editor) on a ASP page. The ASP page itself contains a textbox called "art_content", that generates a ClientID like "ctl00_hold_selectionblock_art_content".

One problem i had was to make a "safe" code that is stored by my aplication, and loaded back to HTML when i goes to the client, then it return to it's "safe" mode before submiting (or postback) to prevent the HTML check error on server side.

My Javascript seems to work properly, but i get the error anyway. It looks like it's not working, although the function is triggering.

Help!

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: Error presented by server side (page)

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

As suggested in this article, you can remove the offending HTML characters from the editor content in the SaveContent event. If necessary, you can restore them in the BeforeSetContent event.

For TinyMCE 4, you can use this code:

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, '>');
    }
}

I use replace with a regular expression in SafeCms instead of replaceAll (which does not exist by default in Javascript).