Initial Value not rendering until click

Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

https://stackblitz.com/edit/easymde

MIT License

2.41k stars 316 forks source link

Initial Value not rendering until click #499

Closed SmitharyZach closed 2 years ago

SmitharyZach commented 2 years ago

Describe the bug I am setting an initial value with EasyMDE. The initial value only appears after I click into the editor

Expected behavior The initial value to load on page load

Screenshots On page load:

After clicking in:

Version information Chome browser current version of easyMDE

Additional context Here is my code:

const benefitsMDE = new EasyMDE({
    element: document.getElementById('membership-benefits-text-area'),
    initialValue: "${membershipDetails.membershipBenefits}",
    hideIcons: [
        "guide",
        "heading",
        "quote",
        "italic",
        "bold",
        "strikethrough",
        "upload-image",
        "image",
        "side-by-side",
        "link",
        "fullscreen",
    ],
    maxHeight: "200px"
});

Ionaru commented 2 years ago

I was not able to reproduce this. Maybe something goes wrong with the value insertion? "${membershipDetails.membershipBenefits}" suggests there's some kind of templating engine at work.

My complete HTML:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
</head>

<body>
    <textarea id="test-textarea"></textarea>
    <script>
        const easyMDE = new EasyMDE({
            element: document.getElementById("test-textarea"),
            initialValue: "Text I wanna show when the page loads.",
            hideIcons: [
                "guide",
                "heading",
                "quote",
                "italic",
                "bold",
                "strikethrough",
                "upload-image",
                "image",
                "side-by-side",
                "link",
                "fullscreen",
            ],
            maxHeight: "200px"
        });
    </script>
</body>

</html>

Result:

SmitharyZach commented 2 years ago

@lonaru thanks for the help! This was an issue with my code not the editor. Great editor by the way! Cheers

carlos3duardo commented 1 year ago

@SmitharyZach I have the same problem here, and it's driving me crazy. I can't find what is wrong. How did you fix it?

SmitharyZach commented 1 year ago

@carlos3duardo try adding these options to the initialization of EasyMDE

autoSave: false, autoRefresh: {delay: 500}

carlos3duardo commented 1 year ago

@SmitharyZach

autosave: false cause a error. The correct is autosave: { enabled: false }, but my code was already like this.

With autoRefresh: { delay: 500} WORKS!!! Thank you soo much!

After it worked I went to read the documentation for this option:

autoRefresh: Useful, when initializing the editor in a hidden DOM node. If set to { delay: 300 }, it will check every 300 ms if the editor is visible and if positive, call CodeMirror's refresh().

"when initializing the editor in a hidden DOM node" this is exactly my case. Man, how inattentive I was.

Thanks again.

SmitharyZach commented 1 year ago

ayy! awesome!