Simplemde-markdown-editor: Issues implementing the editor in a Twitter Bootstrap based page

Created on 11 Jul 2017 · 10Comments · Source: sparksuite/simplemde-markdown-editor

Hello.

I have the current code where I would like to have the editor active:

         <div class="row">
                <div class="col-md-12">

                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea id="description" name="description" class="form-control" rows="8"></textarea>
                    </div>


                </div>

            </div>
            <script>
                var simplemde = new SimpleMDE();
            </script>

The editor gets instantiated, but this is what I'm seeing:

There's no cursor, and when I click it and start writing, this is the result:

Second image

The console gives no errors or anything.

Has anyone had a similar issue and fixed this somehow?

Source

Repox

Most helpful comment

Founded solution:
this works: import {} from 'simplemde/dist/simplemde.min.css';
this not: import {} from 'simplemde/src/css/simplemde.css';

foton on 26 Sep 2017

🎉15

All 10 comments

I suspect you are not loading the simplemde CSS

ralsina on 14 Jul 2017

I got the same issue, even if I have:

   import SimpleMDE from 'simplemde';
   import {} from 'simplemde/src/css/simplemde.css';

in my entry point for webpack.
Without CSS the buttons was squeezed and blue.

foton on 26 Sep 2017

When I get rid of bootstrap package, there are no grey fields, but still there is line with xxxxxxxx and editor do not work well.

foton on 26 Sep 2017

When I try plain HTML with stylesheets and script links, SimpleMDE work even with bootstrap (CSS+JS).
I am using webpacker with RubyOnRails. When I used application.js bundle from it (just SimpleMDE imported) the xxxxxx behavior appears.

foton on 26 Sep 2017

I build fresh new app with Webpacker add it seems that error is in combination webpacker + simplemde npm package. See https://github.com/foton/webpack_and_simplemde.

foton on 26 Sep 2017

Founded solution:
this works: import {} from 'simplemde/dist/simplemde.min.css';
this not: import {} from 'simplemde/src/css/simplemde.css';

foton on 26 Sep 2017

🎉15

@foton, i cant thank you enough! 🎖

Quezler on 4 Nov 2017

Went with the solution provided by @foton

Repox on 6 Nov 2017

@Repox @foton Dear all, thank you for the great answer. However, I faced up the same problem but I had to use the simplemde.css instead of .min.css one (to import in Sass).
So what is the difference between 2 files that is causing the issue now? Any other solution. I really appreciate your answer again.

spideyinf on 29 Nov 2017

I also has an issue with node sass during bundling. Upgrade lib to latest didn't help.

I ended up putting this link tag in my app's index.html file:

<html>
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.css" integrity="sha256-Is0XNfNX8KF/70J2nv8Qe6BWyiXrtFxKfJBHoDgNAEM=" crossorigin="anonymous" />
</head>

It bypasses the node sass compiler, at least.