search

ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.03k stars 1.2k forks source link

Focus cancellation? Integration with CKEditor as an inline editor #290

Open asafge opened 10 years ago

asafge commented 10 years ago

Hey This might me a symptom of a more general issue, so I thought it would be a good idea to share it with you guys.

CKEditor is a web based text editor, that has a feature called inline editing (demo - http://ckeditor.com/demo#inline). This feature allows a user to click on a html element and turn it into a CKEditor text box.

I have a client that needs this functionality within gridster, as in "click on a box on the grid and start editing". Unfortunately this is not working seamlessly like it should.

On the gridstar html part, adding 'contenteditable="true" ' to the

  • tags should allow me to start the inline editor on any "box" in the grid, and it does as long as gridster isn't initialized. As soon as I call the gridster() function it will fail to register itself as an inline editor.

    After reading their code, it looks like a CKEditor html element needs to be in focus in order to start the inline editing. I had some suspicion that this was an issue with the click event, and as it turns out, by explicitly registering this event and calling focus() on the element, the problem is resolved. Is it possible the gridster suppresses the default focus functionality when clicking on an element?

    Note that this is just a left-click issue. When right-clicking the element the inline editor starts as it should. I think there's some sort of collision between the two libraries, and it might happen with other libraries I'm not aware of.

    Thanks, and if you need anything else let me know.

    • dartox commented 10 years ago

    Hey.

    I also use gridster.js but another inline-editor and I have the same problem as you. I followed your instructions and call a focus() on my inline-editing element manually when I click into the gridster-widget.

    This strategy works and I'm able to edit the text now, BUT, I am not able to select the text in my element. I can't select it with the mouse or keyboard. Maybe you know why?

    Thanks in advance. Best regards, dartox.

    asafge commented 10 years ago

    Hard to say, can you create a JSFiddle?

    dartox commented 10 years ago

    yes i made a JSFiddle, here it is: http://jsfiddle.net/UVP4N/3/ .... thank you for your help

    dartox commented 10 years ago

    Found a solution. I also have to turn off the "resize" functionality (not just the draggable function) when I click into the editable DIV. Than it works.

    cyberfuhrer commented 10 years ago

    Hi, how to fix this problem? Text in the gridster container not selection

    dustinbolton commented 10 years ago

    Turning off resizing (resize enabled: false) fixes it so editors will work within. However, it would be very nice to be able to use the resize feature when doing this. This appears to be bug.

    dustinbolton commented 10 years ago

    Note that this bug is not just limited to ckeditor. It also impacts Redactor and likely most/all other editors that require clicking and/or dragging in (eg for highlighting).

    vieron commented 10 years ago

    Related to #334 and #326

    kunal3 commented 10 years ago

    Out of curiosity, did someone ever fix this bug or have a fully functional version? If yes, can you link a JSFiddle?