Not editable once Jquery ui sortable used
I am working on a drag and drop template generator. For text editor using Medium editor and for drag and drop using jquery ui js. But once the drag and drop initialized the editor wasn't working and content was n't editable. How to manage this?
Please provide a JSBin / jsfiddle containing a set of reproducible steps.
here we go!!!!
https://jsfiddle.net/e78ydow6/3/
As far as I can see, it seems that sortable conflict with medium-editor..
How can i solve this issue?? is there any way??
I would look into whether you can have a drag handle for the sortable parts, instead of it being the entire element including the editable part. It seems like the sortable code is preventing click/focus from properly occurring into the editable <div>, so the user can't actually get focus and edit inside of a sortable.
If there's some way to make the editable <div> not be within the sortable (ie a drag handle that's a sibling of the <div>) you might have better luck. Without digging deeper into the sortable code, I'm not sure how it's preventing events from getting into medium-editor properly.
i tried it in that way too. once jquery ui is initialized the medium editor is not working.
@j0k3r Any hope from the supporting team? I am waiting for it.
Unfortunately there isn't a support team, we're truly open source where the health of the editor relies heavily on help from its users.
Fixes to medium-editor generally come from folks like yourself, who run into issues, can verify when the issue is fixed, and are willing to share their work for the better of the editor!
Hey there,
Remove disableSelection and use cancel option
$( "#sortable" ).sortable({cancel: '.ui-state-default .editable'});
var editor = new MediumEditor('.editable');
https://jsfiddle.net/e78ydow6/5/
@j0k3r @webbieram , I think that the issue was in using JQuery Sortable and we can close this ticket.
What do you think?
@webbieram you can call editor by function after sortable. I am working on same module and here everything fine.See in video If you are looking for same thing i will guide you further.
Not solving the problem itself, but a work around could be using portlets demo https://jsfiddle.net/4vam7mLm/
This works perfect $("#sortable_list").sortable({ cancel: 'input,textarea,button,select,option,[contenteditable]' });