search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.75k stars 3.5k forks source link

CKEDITOR in modal component problems #627

Closed galan83 closed 7 years ago

galan83 commented 7 years ago

Software version

Quasar: 0.13.9 OS: OSX Node: 0.7.3 NPM: 3.10.10 Browsers: Chrome, Firefox iOS: Android: Any other software related to your bug:

What did you get as the error?

ckeditor.js:445 Uncaught TypeError: Cannot read property 'getSelection' of undefined at CKEDITOR.dom.selection.getNative (ckeditor.js:445) at CKEDITOR.dom.selection (ckeditor.js:443) at a.CKEDITOR.editor.getSelection (ckeditor.js:440) at CKEDITOR.plugins.undo.Image (ckeditor.js:1174) at CKEDITOR.plugins.undo.UndoManager.save (ckeditor.js:1169) at a.b (ckeditor.js:1164) at a.n (ckeditor.js:10) at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12) at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13) at a.execCommand (ckeditor.js:271) and ckeditor.js:350 Uncaught TypeError: Cannot read property 'frameElement' of undefined at a.CKEDITOR.editor.resize (ckeditor.js:350) at CKEDITOR.dom.document.f (ckeditor.js:812) at CKEDITOR.dom.document.n (ckeditor.js:10) at CKEDITOR.dom.document.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)

What were you expecting?

CKEDITOR should get focus when we click over it, and buttons in the toolbar should work.

What steps did you take, to get the error?

I have pushed a toolbar button. The second one was got after trying to resize the CKEDITOR.

I only get this error when I use this component inside the modal component. The CKEDITOR component I'm using. I found many problems related with modals and CKEDITOR and in most of them they fix them doing a hack in the modal component.

Thanks in advance.

mstaack commented 7 years ago

how did you install it?

i would give https://github.com/dangvanthanh/vue-ckeditor2 a try at first inside a normal page...after that check including in modals etc

galan83 commented 7 years ago

I tried it in a normal page and it worked fine, the problem appears when I try to use it inside modal component.

rstoenescu commented 7 years ago

Can we have a snippet of code with the whole template of the modal pls?

galan83 commented 7 years ago

We have a parent component, which has a modal, and inside this modal we have a component with a CKeditor component.

You can see them here

I have removed unimportant lines in them. Thank you.

rstoenescu commented 7 years ago

Do you have a live example by chance? It would speed things up.

galan83 commented 7 years ago

Hi again,

I've just created one demo example, as you will see in it, there's one ckeditor in the main component (Index.vue) working, and another in a modal component (ModalComponent.vue), the second one it isn't working.

This is the demo repo

Thank you very much.

galan83 commented 7 years ago

It seems to be related with the CKeditor component, I have tried with Quill editor and it works like a charm.

Thank you for you time.