Comments (18)
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. :)
from vue-simplemde.
What version of vue and webpack are you using?
from vue-simplemde.
"vue": "^2.3.3" and "webpack": "2.2.1"
from vue-simplemde.
https://f-loat.github.io/vue-simplemde/
Does this demo have the same problem?
from vue-simplemde.
No it does not. The issue on mine happened on a modal.
from vue-simplemde.
Try to use this.$refs.markdownEditor.initialize()
when the modal show.
from vue-simplemde.
Thank :) I will do it on Monday
from vue-simplemde.
It says initialize() is undefined.
and, the editor works fine on form without modals. Is this any help?
from vue-simplemde.
You should modify markdown-editor.vue like this:
mounted() {
// this.initialize();
},
and after the model show do this:
this.$nextTick(() => {
this.$refs.markdownEditor.initialize();
});
from vue-simplemde.
I will solve the problem in the next release.
from vue-simplemde.
Thank you. I actually have not resolved the issue yet.
from vue-simplemde.
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.
from vue-simplemde.
same issue, maybe help.
sparksuite/simplemde-markdown-editor#596
sparksuite/simplemde-markdown-editor#344
from vue-simplemde.
I'm having the same problem, any updates on this?
from vue-simplemde.
Try to refresh editor after the modal show.
this.simplemde.codemirror.refresh();
from vue-simplemde.
SimpleMDE's issue
from vue-simplemde.
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.
from vue-simplemde.
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.
from vue-simplemde.
Related Issues (20)
- @input event never fire HOT 1
- Editor not working. Showing regular textarea field HOT 2
- @input event not firing HOT 1
- Vue2.6.x导入VueSimplemde时出现报错 xxx is not exported from package HOT 2
- support for emojis
- marked is not a function
- Cannot enable code highlight HOT 1
- Displaying the rendered markdown without going fullscreen.
- Focusing Element needed HOT 1
- 请问是否删除了 vue-simplemde/src/markdown-editor ? HOT 2
- Vetur & typescript: Cannot find module 'vue-simplemde'. Vetur(2307) HOT 1
- modelVal not updating on model change HOT 3
- Changing the config setup in initialise to the spread operator broke in IE HOT 4
- How do you clear the vue-simplemde after axios.post method? HOT 1
- 怎么使用单纯的查看模式 HOT 3
- v-model is broken HOT 4
- Question: customising button bar HOT 1
- Add changelog.md
- vue-simplemde 支持vue3吗 HOT 1
- Updating modelValue from outside of the editor HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-simplemde.