Simplemde-markdown-editor: Editor not loading any content until its clicked or focused.

[boomtothemoon]

I am using a modal with editor inside. For some reason, when I am editing any content, it wont show any until its clicked. The issues been there before but really there is no clear solution. Please help?

[wkeifenheim]

I also have this issue, and using the _settimeout_ workaround as suggested on issue 344 has not worked for me (tested on multiple browsers).

Edit: using version 1.11.2

[boomtothemoon]

@wkeifenheim Hey I actually got it working. If you are still interested I can explain what I did.

[wkeifenheim]

Yes, please

[boomtothemoon]

My Issue: I am using a modal and inside the modal is the editor. If the editor is in a regular page, it works perfectly fine. Content is loaded when page is loaded and you don't have to click it to make it appear. When using a modal, it does not appear when loaded and need to be at least clicked or focused. So what is the problem? Well the editor does not refresh when modal opens so what I did is i checked if the modal is focused. If the modal is focused, refresh the editor. This is the code that I used.

    $('textarea').each(function () {
        var simplemde = new SimpleMDE({
            element: this,
            spellChecker: false
        });
        simplemde.render();
        $("#application-modal").focus(function () {
            simplemde.codemirror.refresh();
        });
    });

I use the 'each' function just in case I need to use the script to other pages with two text areas. This will work if you put this in your script page. Ask me more questions and I am happy to help. I got stuck here for a good week but now its working perfectly fine now. #application-modal is my modal id.

[boomtothemoon]

did it work

On Tue, Jun 20, 2017 at 10:02 AM, Woodrow Keifenheim <
[email protected]> wrote:

Yes, please

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/sparksuite/simplemde-markdown-editor/issues/596#issuecomment-309786857,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcGfM1NJ7tTDYupZJAAOcMfnXOczcT1Zks5sF97sgaJpZM4N8c6F
.

[wkeifenheim]

@boomtothemoon
My setup is a bit different (angular app) and I still need to create a custom event in order to trigger the refresh function at the appropriate time but I'm confident that'll work out. Thanks for sharing your solution.

[ryanapil]

@boomtothemoon How are settings the value if you don't know what the variable for each individual editor is? I have a bootstrap modal with the editor in and using AJAX to gather the items data and I want to input it into the editor, however tried into the linked texture but no success

[burhanmt]

@boomtothemoon yep your solution is working...

[burhanmt]

$("#application-modal").focus(function () {
simplemde.codemirror.refresh();
});
The snippet which is above is not working in Safari and Chrome.

But if I change the code like that:

    $('#modal_editarticle').on('shown.bs.modal', function () {

        simplemde.codemirror.refresh();
    });

it will work in all browsers.

[chipit24]

Perhaps the autorefresh addon can be added to solve this in a more general case? See here: http://codemirror.net/doc/manual.html#addon_autorefresh.

Although this issue only appears for me in Safari.

[nenadfemic]

For others browser (chrome, ...)
All should be inside document

(document).ready(function() {

 $('#modal_editarticle').on('shown.bs.modal', function () {
        simplemde.codemirror.refresh();
    });
} );