Editor value does not show until click into?

[crabvn]

When I click to the edit button. The MakrdownEditor value changed to the right value, but not show on the editor. The text only show when I click into the editor form. How can I fix that?

Note: I had do configs set autofocus: true but nothing happened

Thank you,

[F-loat]

What version of vue and webpack are you using?

[crabvn]

"vue": "^2.3.3" and "webpack": "2.2.1"

[F-loat]

https://f-loat.github.io/vue-simplemde/
Does this demo have the same problem?

[crabvn]

No it does not. The issue on mine happened on a modal.

[F-loat]

Try to use this.$refs.markdownEditor.initialize() when the modal show.

[crabvn]

Thank :) I will do it on Monday

[crabvn]

It says initialize() is undefined.
and, the editor works fine on form without modals. Is this any help?

[F-loat]

You should modify markdown-editor.vue like this:

mounted() {
  // this.initialize();
},

and after the model show do this:

this.$nextTick(() => {
  this.$refs.markdownEditor.initialize();
});

[F-loat]

I will solve the problem in the next release.

[crabvn]

Thank you. I actually have not resolved the issue yet.

[F-loat]

I think the modal is hidden or not exist at mounted hook, so markdownEditor init fail.
And reinit it after the modal show, it should work.

Actually, it should init only when the first time show.

[F-loat]

same issue, maybe help.
sparksuite/simplemde-markdown-editor#596
sparksuite/simplemde-markdown-editor#344

[voicecode-bv]

I'm having the same problem, any updates on this?

[F-loat]

Try to refresh editor after the modal show.

this.simplemde.codemirror.refresh();

[F-loat]

SimpleMDE's issue

[codebykyle]

Thanks for the help @F-loat. I still have this issue, and unable to remedy it using any of the information posted here, or via upgrading to the newest version. I've tried researching the link you've provided in the last post, but it doesn't seem to link to anything.

Is this issue resolved? How can I go about fixing it?

Thank you for the help.

[F-loat]

The link is right now. Vue-simplemde is just a small wrapper of SimpleMDE and this issue should be SimpleMDE's.

@burhanmt provided a solution in the last post of SimpleMDE#596

$("#application-modal").focus(function () {
  simplemde.codemirror.refresh();
});

The snippet which is above is not working in Safari and Chrome.
But if I change the code like that:

$('#modal_editarticle').on('shown.bs.modal', function () {
  simplemde.codemirror.refresh();
});

it will work in all browsers.

[codebykyle]

Yep, thanks I see that now. My mistake. I had .on('show.bs.modal') which fires before, not after the modal is shown. Sorry about that. For others experiencing this:

Make a markdown component with a ref attribute
<markdown-editor ref="markdown" :id="field" v-model="contentValue"></markdown-editor>

My Show Dialog function to show the Modal with a simplemde component

        showDialog() {
            this.resetForm();
            let modal = $('#' + this.getModalId);
            let self = this;
            modal.on('shown.bs.modal', function () {
                self.$refs.markdown.simplemde.codemirror.refresh();
            });
            modal.modal('show');
        },

whatever is in your ref attribute on your markdown component is swapped in self.$refs.

Thanks for the help and super quick reply, @F-loat. Appreciate it. :)