Simplemde-markdown-editor: simplemde does not work correctly in bootstrap modal

[nikocraft]

I need simplemde to work with bootstrap modal, currently there are some problems with that.

I'll describe them here:

First problem is when I initialize the editor in the bootstrap popup it does not show the text

only when I click inside the editor does it display the text

Second problem is when I toogle to side by side view, add some content in the editor, in this case I added lots of content, and when I exit side by side mode not all content is visible in the editor, in this case last line visible is: ## some content here, bla bla bla 9

as you can see it's not possible to scroll down beneath the line bla bla bla 9 even if there is more content there

Third problem is with css, when I am in side by side mode I would like it to be responsive, and it's only responsive horizontally right now, since I've had to use px to set the height, it will for whateve reason not work with % which would make it responsive vertically as well

Fourth problem is the highlighting of some words, I am not sure why it's doing this, there is spellcheck feature but I have it set to false when I initialize the editor. I would like to remove the highlighting of words, it's distracting.

Also worth mentioning the editor works just fine if it is not used inside bootstrap modal
scroll works and all content is scrollable when comming back from side by side mode and inserting lots of text.

With some more research I've discovered if I set content tab as active instead of basic tab being active first then the content in the markdown editor will be directly visible, if basic tab is active and I have to switch to content tab my self then the content is not visible until I click inside the editor.

If anyone can fix these errors I am willing to pay for it.

I've created a demo of this here: https://www.sendspace.com/file/ejdoh6

[ucev]

For problem 1, add the following code

var doc = simplemde.codemirror.getDoc();
doc.setValue(doc.getValue())

[nikocraft]

still not working, I need to click inside the editor for it to show any content. Also when I click another post I want to edit, the content of the old post is shown until I click inside the editor then then content of new post is shown.

I use

        var doc = simplemde.codemirror.getDoc();
        doc.setValue(postBody);

to set the content.

[nikocraft]

fixed most of issues and got it working

[Shrimpstronaut]

Hey @nermamax

I have encountered the same problems when using bootstrap.
Could you tell me, what you did to fix these issues?

I´d appreciate your help.

[nikocraft]

are you using tabs? when using tabs and your editor is only visible in tab that is not visible by default you will then need to make sure that you only init the editor when you switch to that tab, that way the editor will show the content inside of it without you having to click inside of it like I described. Next when you close the modal you must destroy the editor or else it you will create new instance of editor and end of with lots of editor instances each time you switch to the tab where the editor is.

What other problems do you have?

[Shrimpstronaut]

Hey @nermamax
Thanks for your quick answer.

Ok, so I have my simplemde inside a bootstrap modal.

Inside my AngularJS controller I´ve got:

$('#report-edit-modal').on('show.bs.modal', function(e) {
    vm.simplemde = new SimpleMDE({ element: $("#markdown")[0] });
});

This ensures the editor is only created, once the modal is shown.

But currently I can only update the value by using a timeout

vm.updateSimpleMde = function(value) {
    $timeout(function() {
        vm.simplemde.value(value);
    }, 100);
}

How would you recommend destroying the editor, once the modal is closed?

[nikocraft]

You can try this, it works for me:

        if(simplemde != null) {
            simplemde.toTextArea();
            simplemde = null;
        }

I am not sure about the timeout thing, didn't have that problem really

[Shrimpstronaut]

Ok, I have used my workaround as described above to reload the editor content.

The other issue I´m facing, is using the side-by-side preview mode. My editor is embedded inside a modal, which causes some strange behavior. It happens, when toggling the full screen mode.

Is there any way to fix this?

[nikocraft]

I had the same problem and the only way to solve it to detect when it goes fullscreen mode and then apply css to modal that makes it fullscreen, after that simplemde will work.

here is some code for you

css

    .simplemde-fullscreen .modal-dialog {
        top: 20px;
        margin: 0 auto;
        height: 90%;
        width: 90%;
        max-width: 100%;
    }

javascript

simplemde.codemirror.on('refresh', function() {
console.log("WOW");
    if (simplemde.isFullscreenActive()) {
        $('body').addClass('simplemde-fullscreen');
    } else {
        $('body').removeClass('simplemde-fullscreen');
    }
});

let me know if that solves your problems?

[Shrimpstronaut]

Works like a charm!

Thank you very much for your help, I really appreciate your work.

Best regards

[nikocraft]

no problem, anytime :)

[boomtothemoon]

@masterbuilder22 how did you solve problem #1?