Markdown to HTML for blog page.

donatellofang commented 3 years ago

I get the editor has a preview feature but what I'm after is if it offers a function to just output the markdown to HTML.Much like editing a blog post saving the markdown to the database then rendering the markdown as HTML on the client.

The function is like marked.js do ,I find it is hard to render same html page like that easyMDE render preview when try to include marked.js ,the differrence is feature code and poetry.Furthermore Blockquotes of easyMDE don't have solid border-left like simplemde markdown editor.

My Demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example / Preview</title>
    <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
    <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>

<body>
    <section class="main-content">
        <h1><a id="h1_demo1" class="anchor" aria-hidden="true"></a>Demo</h1>
        <button onclick="myFunction()">Click me</button>
        <textarea id="demo1" style="display: none;"># Hello world</textarea>
    </section>
    <div id="content"></div>

    <script>
    var easyMDE = new EasyMDE({
        element: document.getElementById("demo1"),
        spellChecker: false,

    });

    function myFunction() {
        var str = easyMDE.value();
        //var str = document.getElementById("demo1").innerHTML;
        document.getElementById('content').innerHTML = marked(str);
    }
    </script>
</body>

</html>

Seems like something that should be included...

Reply appreciated.

Ionaru commented 3 years ago

You can probable force the editor into preview mode using the EasyMDE.togglePreview(editor); method and remove the toolbar. Removing the word counters is also possible.

donatellofang commented 3 years ago

You can probable force the editor into preview mode using the EasyMDE.togglePreview(editor); method and remove the toolbar. Removing the word counters is also possible.

Give me a big inspiration,Thank you.

r-hannuschka commented 3 years ago

What we use was very simple:

const easyMDE = new EasyMde( ... );
easyMDE.markdown(easyMDE.value());

this returned the html code from markdown

donatellofang commented 3 years ago

What we use was very simple:
const easyMDE = new EasyMde( ... );
easyMDE.markdown(easyMDE.value());
this returned the html code from markdown

The returned html code has no css class style like easyMDE‘s preview mode which include blockquote and code.

togrul-topal commented 3 years ago

Still no solution? .markdown method returns <head></head><body>...</body> whereas converting to HTML should just return <div>...</div>.

riv0tril commented 2 years ago

When you want to render the content without using the editor you can use the official https://marked.js.org/ which EasyMDe uses internally doing this for example you will get the desired result

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
document.getElementById('content').innerHTML = marked.parse('# Marked in browser\n\nRendered by **marked**.');
....
document.getElementById('content').innerHTML = marked.parse(easyMDE.value());

layer07 commented 1 year ago

One issue that I have is that if my user submits

*{ background-color: red; }

my whole sites becomes red, they can sort of "exploit" and make "ugly" content and affect other divs. Ideally inline is cool for them to create stylized content, but if they can change the behavior outside the "sandbox" it is quite bad. I switch from SimpleMDE do EasyMDE because for SimpleMDE I had to write a custom solution to avoid XSS.

Now I am afraid I might need to ditch and filter all html and don't let my users use it all.

Ionaru commented 1 year ago

Make sure to read https://github.com/markedjs/marked#usage. EasyMDE does not sanitize the markdown by default.

Options like DOMPurify can be used with the renderingConfig.sanitizerFunction option. Look here for an example.

layer07 commented 1 year ago

Make sure to read https://github.com/markedjs/marked#usage. EasyMDE does not sanitize the markdown by default.

Options like DOMPurify can be used with the renderingConfig.sanitizerFunction option. Look here for an example.

Yes, I've filtered what users can or can't do on the backend, but it seems that it is safe against most XSS attacks right? I was talking HTML/CSS, since I am actually very permissive and let my users customize their profiles with custom HTML, right now it looks kinda safe. I tried all the XSS exploits I know and EasyMDE was able to avoid them out of the box, which is amazing.

Ionaru / easy-markdown-editor

Markdown to HTML for blog page. #245