HTML lost in WYSIWYG mode

[rhukster]

I've been looking for a solid WYSIWYG markdown editor for some time, and Toast looks very promising! I've just been testing with the demo and noticed an issue with HTML in markdown. As you know putting HTML code in markdown is perfectly valid, and often is the only way to achieve something beyond the capabilities of markdown (adding a class or id for example). in the Markdown mode, things look ok:

# markdown

<div class="html">HTML</div>

**more markdown**

and renders in the preview fine (even with class="html" intact):

However, switching to WYSIWYG mode and back to Markdown causes a loss of the HTML:

It would be great (and much safer for users) if this could be maintained between modes.

[kyuwoo-choi]

Yes putting html in MD is valid. But currently we have some rules sanitizing html tag except something like <span style="color~~~ > which is needed to color text while switching mode.
I'll discuss about this problem with our team members.

Thanks for the issue :)

[ViggoV]

@kyuwoo-choi sorry if this is the wrong place to ask, but are these sanitizing rules documented somewhere? We are looking to use tui to update news on our website and are quite interested in knowing how html tags are treated, mainly in terms of vulnerabilities..

[kyuwoo-choi]

@ViggoV Not at all. Any questions are welcome.
Check https://github.com/nhnent/tui.editor/blob/master/src/js/htmlSanitizer.js to see which rules are applied.

I think the rules are a bit defensive because we did not have enough time to make it fine grind.
It may be a good time / place to discuss.

[kyuwoo-choi]

In addition to the rules, we should consider the way html2md, md2html and how to treat the tags while editing tags in WYSIWYG mode.

[ViggoV]

Thanks! I can't help but notice that you strip form, button, select and textarea but apparently not input.. Is that on purpose?

[kyuwoo-choi]

@ViggoV Nothing I remember. I think I will investigate the commits. Thanks!

[cavo789]

Hello

Same question and didn't find how to deal with it. Can somebody help please ?

I try to edit a file like, f.i.,

# TOC
<div>TEST</div>

The editor has removed the HTML tag so display :

# TOC
TEST

If I save that content, I'll lose my original content.

My problem : I'm using span, div, img and also my own tag called "" and I wish to be able to keep them in the editor.

Note : I didn't see any difference by setting useDefaultHTMLSanitizer to false in my constructor.

	var editor = new tui.Editor({
		...
		"useDefaultHTMLSanitizer": false
		...
	});

Thank you!

[cavo789]

Hi all,

I've write a workaround to bypass my problem.

In my HTML content, I've escape tags : my #sourceMarkDown DOM element contains thus somethink like

<encrypt>MyPassword</encrypt>

In JS, I've :

var editor = new tui.Editor({
    "el": document.querySelector('#editorMarkDown'),	
    "useDefaultHTMLSanitizer": false,	
    "events": {
        "load": fnPluginEditLoaded
     }
});

(not sure that useDefaultHTMLSanitizer is working, don't see the difference if enabled or not)

The fnPluginEditLoaded() function looks like this :

function fnPluginEditLoaded(editor) {
    var $MD = $('#sourceMarkDown').text();

    $MD = $MD
        .replace(/&lt;/g,'<')
        .replace(/&gt;/g,'>')
        .replace(/&amp;/g,'&');

    editor.setValue($MD);

    return true;
}

Not sure that it's the best way to achieve it but, ok, now, I can continue my migration.

Markdown files that have HTML tags in their content can be edited through tui.editor.

Thanks for this amazing tool (y)

[sohee-lee7]

This issue is old and will be closed. If there is an issue again, please register as a new issue.