Search code examples
jqueryjsonmarkdown

Cherry Markdown Editor displaying compiled HTML but markdown panel is blank

I'm using the Cherry Markdown Editor (https://github.com/Tencent/cherry-markdown) and it is currently pulling some test code from a JSON file. I want it to display the markdown in one panel and the compiled HTML in the other. The problem is the compiled HTML is showing correctly as human readable text but the markdown panel is empty. If you click in the empty panel or scroll the HTML one, then the markdown shows.

I have tried to change the defaultModel to 'editOnly' but it is still blank until the pane receives focus. I used some jQuery to try to add focus to the pane but that didn't work. This is what I'm seeing when it loads:

enter image description here

and after I click in it:

enter image description here

I confess, I am unfamiliar with markdown, and I did see there was a problem previously when the text began with '---' and this was interpreted as front matter. This is the code I am feeding into it, just in case anyone can see something immediately wrong:

"content_md": "# Some Markdown Doc\n\nThis is some news content:\n- New thing 1\n    - New thing 1 sub feature\n- New thing 2\n\n\n| Interesting | Table | Of | Stuff |\n| ------ | ------ | ------ | ------ |\n| Sample | Sample | Sample | Sample |\n| Sample | Sample | Sample | Sample |",

TIA.

Solution

  • I'm very late with this answer, but I'll describe my case.

    Faced the same issue with the .setValue() function. According to what I can understand, the bug occurred in v0.8.26, and this occurs when the editor isn't visible directly on page load, i.e, putting it inside a Collapsible or Modal component (in Bootstrap for example) causes this to occur.

    Switching to v0.8.8 fixed the issue for me.