Simplemde-markdown-editor: Editor does not show content on init

[retzion]

My text area is populated with data via php..

<textarea id="submission_content" maxlength="5000" name="content" placeholder="Content goes here" required>{{ $submission->content }}</textarea>

I init the editor like this..

var submissionContent = new SimpleMDE({ element: $("#submission_content")[0], hideIcons: ["image", "heading"], spellChecker: false, placeholder: "10 to 5000 characters" })

When the page loads the editor looks empty of content. However, when you focus into the editor the content appears.

[prostoandrei]

@retzion
You need do this.

setTimeout(function() {
  simplemde.codemirror.refresh();
}.bind(simplemde), 0);

This is not a simplemde-markdown-editor problem.

[retzion]

Works great. Thanks.

[prostoandrei]

But i think need add default refresh codemirror on initialization same way

[WesCossick]

@prostoandrei Would you mind submitting a PR that does this? It wouldn't hurt and it'd fix this strange bug for everyone.

[WesCossick]

Nevermind, this will be fixed in the next release.

[prostoandrei]

@WesCossick ok. I will be glad to help in the future.

[Polsaker]

This is still happening to me. Using 1.11.2 and the content only loads when I click the editor.

[WesCossick]

@Polsaker please submit a new issue for this and reproduce the error using JSFiddle.

[retzion]

I take it back.. This worked only on desktop browsers..
setTimeout(function() { simplemde.codemirror.refresh(); }.bind(simplemde), 0);

On mobile devices, however, the issue still persists. When a view is loaded the editor is blank (even though there is content inside it). When I focus into the editor, the content is revealed.

I have updated to ver 1.11.2

[WesCossick]

What mobile devices are you using?

[retzion]

False alarm. The only browser having an issue is Chrome's mobile emulator (not a real device). I believe I had the old script cached or something. I also removed the following method and it all works fine now. Thank you.

setTimeout(function() { submissionBackground.codemirror.refresh() }.bind(submissionBackground), 0)

[retzion]

got this from our QA..

On Android, the entered text is sill not appearing until I click into the field. On iOS, the entered text appears if I scroll down the page.

[gazpachu]

@prostoandrei your fix is not working for me in a React app where the textarea is being updated by local state:

<textarea className="input-field" id="editor" ref="editor" value={this.state.selectedItem.content} onChange={(event) => this.updateItem(event, 'content')}></textarea>

[akash-mitra]

This issue is still persisting. I can confirm after checking on version 1.6.2 with Chrome Version 58.0.3029.96 (64-bit) on Mac

[LukaSikic]

Issue is still there on latest version of SimpleMDE on Chrome 58.0.3029.110 (64-bit) - Windows 10

[jacklinwood]

I have multiple instances on one page and need an initialValue on all of them.

I have read multiple threads including this one and have come up with the following code:

const simplemde = {};

$('textarea').each(function(key, element) {
    simplemde[element.id] = new SimpleMDE({
        element: element,
        toolbar: ['bold', 'italic', 'link'],
        spellChecker: false,
        initialValue: 'Test'
    });
});

Object.values(simplemde).forEach((value) => {
    setTimeout(function() {
        value.codemirror.refresh();
    }.bind(value), 0);
});

But this does not work for me. It still only shows the initialValue for the first instance and the others need to be clicked to show the value.

Any ideas?

[ccadek]

@jacklinwood I also ran into the exact same issue though I do not store my editors in a single array. I fixed my problem by increasing the timeout to 200 milliseconds.

Code of my solution:

setTimeout(function() {    
    simplemde.codemirror.refresh();  
}, 200);

I am not too familiar with JS internals so I am not sure if setting the timeout to 200 milliseconds will fix your issue as well