locked
TinyMCE + .NET problems RRS feed

  • Question

  • User1738843376 posted

    Hi guyz,

    I know this is probably not the most recommended place to discuss this, but it is usually where i find the best support, so here it goes:

    I've been using TinyMCE  as my WYSIWYG editor for some time now. At first, it was complicated to overcome a series of issues related to the encoding, but then i was able to solve them with a function added to the initialization code:

    setup: function (editor) {
       editor.on('SaveContent', function (ed) {
          ed.content = ed.content.replace(/&#39/g, "&apos");
       });
    }

    So this is how to full JS code looks like:

    tinymce.init({
    	selector: "textarea#ctl08_text",
    	menubar: "edit insert view format table tools",
    	theme: "modern",
    	mode: "textareas",
    	height: 300,
    	encoding: "xml",
    	relative_urls: false,
    	remove_script_host: false,
    	convert_urls: false,
    	plugins: [
    		"advlist autolink link image lists charmap print preview hr anchor",
    		"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
    		"save table contextmenu directionality emoticons paste textcolor"
    	],
    	content_css: "css/content.css",
    	toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview media fullpage | forecolor backcolor",
    	style_formats: [
    		{ title: 'Header 1', block: 'h1' },
    		{ title: 'Header 2', block: 'h2' },
    		{ title: 'Header 3', block: 'h3' },
    		{ title: 'Header 4', block: 'h4' }
    	],
    	setup: function (editor) {
    		editor.on('SaveContent', function (ed) {
    			ed.content = ed.content.replace(/&#39/g, "&apos");
    		});
    	},
    	setup: function (editor) {
    		editor.on('change', function () {
    			tinymce.triggerSave();
    		});
    	}
    
    });

    The above code, with the addition of the following code on the Page_Load event:

    text.Value = HttpUtility.HtmlDecode(text.Value)

    Solved the issue that was causing my page to, when posting back after saving the TinyMCE contents, show all HTML tags generated by the TinyMCE code as text inside the textarea.

    I am decoding the text that comes from the textarea before storing it on the database, and then decoding it again when fetching it from the DB back into the textarea, so i should never be seeing neither the HTML tags, nor the HTML entities that replace the special characters like > and <.

    The strange thing is, i have now implemented it on a new project, using the exact same JS code to instantiate the TinyMCE, but now every time i save the data, it always shows up with the HTML tags inside the editor as it did back in the beginning on the previous projects before i applied the fix i mentioned earlier.

    I'm also using a local version of the TinyMCE scripts, and not the CDN version, so it is exactly the same code base that is used on all the projects. I have nonetheless tried upgrading to the most recent version using the CDN, and instantiating with the suggested code on their website, but it immediately started throwing validation errors due to a potentially dangerous script when posting the text with HTML tags... not even disabling the eventvalidation on the page directive worked, so i rolled back to the version i had working on the previous projects as mentioned before.

    What am i doing wrong here? What can i do to stop posting the text value and getting the HTML tags inside the editor? This is obviously a problem since the user might save a second time the content and then it will start to record tags inside tags on the database...

    Please help me Obi-Wan Kenobis... you guyz are my only hope! ;) (no, i'm not a princess) :p

    Tuesday, January 16, 2018 12:53 PM

Answers

  • User1738843376 posted

    As I explained before, I was and am not encoding the text in any part of the code, but nonetheless, the text was getting encoded. I mentioned that I was decoding it on the pageload event, when a postback was detected, but contrary to other websites that I’ve worked on, that was preventing the tags from appearing inside the editor when a postback occurs. The main difference from this website structure to the others is that this uses a webform that dynamically loads controls to simulate the a masterpage functionality that was not available at the time this was originally developed. After a multitude of small changes to debug the issue, I ended up moving the decoding of the pageload first to the PreInit event, which did not produce any changes, and then to the PreRender event which suddenly made it work properly. 

    So the solution is that when you have the editor inside a usercontrol, you need to decode the contents upon postback inside the PreRender event.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 18, 2018 1:32 PM

All replies

  • User1738843376 posted

    bump

    Thursday, January 18, 2018 1:10 PM
  • User1738843376 posted

    As I explained before, I was and am not encoding the text in any part of the code, but nonetheless, the text was getting encoded. I mentioned that I was decoding it on the pageload event, when a postback was detected, but contrary to other websites that I’ve worked on, that was preventing the tags from appearing inside the editor when a postback occurs. The main difference from this website structure to the others is that this uses a webform that dynamically loads controls to simulate the a masterpage functionality that was not available at the time this was originally developed. After a multitude of small changes to debug the issue, I ended up moving the decoding of the pageload first to the PreInit event, which did not produce any changes, and then to the PreRender event which suddenly made it work properly. 

    So the solution is that when you have the editor inside a usercontrol, you need to decode the contents upon postback inside the PreRender event.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 18, 2018 1:32 PM