Simplemde-markdown-editor: The editor has has a weird behavior

[oskarcalvo]

Hello, I'm use the code from: //cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"

This is my code:

$(document).ready(function () {
    var simplemde = new SimpleMDE({
        autofocus: true,
        toolbar: ["bold", "italic", "heading", "|", "quote","code", "|", "unordered-list","ordered-list","table"],
        element: document.getElementById("textarea_notes"),
        showIcons: ["code", "table"],
    });


});

The weird things are that When I click in the text area appears some "XXXXX", and the blinking icon it's not show in the editor, so you don't know where are you writing.

I have check the console debug and I don't have any errors or warnings.

Thanks

Oskar

[oskarcalvo]

I have realise that I don't add the css .

Thanks.

Oskar

[anshuman73]

@oskarcalvo
Can you elaborate on your solution ? I am facing the same issue.
The css you mention is the simplemde.css or something else ? I have added it and am still facing the same issue. I am running things via gulp, so I may need to add any other css files separately.

[WesCossick]

@anshuman73 can you set a JSFiddle that replicates the issue?

[Uninen]

I'm also having the same problem when initializing the editor inside a Vue component. I'm using Webpack and have imported the css into the project sass file, so the css works fine.

The editor is just unresponsive and you can't focus inside it, but after clicking any of the toolbar icons, the xxx appears, but you're still not able to edit the content. (Toolbar icons work, tho, and add appropriate content inside the editor when clicking.)

Also setting .value('foo') after init shows the 'xxx' plus foo, but still doesn't fix the editor. There's no warnings or errors in console, so finding hard to debug this.

[Uninen]

Now that I read about the references to css above, the problem went away after removing sass import and linking straight to jsdeliver minified css. Also by copying the minified css and importing that to sass seems to work fine - I'll use that as a workaround for now.

(To be clear, importing the source css _seems_ to render everything ok as the editor _looks_ fine.)

There maybe is a mismatch between the minified css and the source css?

[texelate]

Also by copying the minified css and importing that to sass seems to work fine

@Uninen Thank you! I almost gave up on this but what you suggested fixes it! I was using gulp too.