Hi there,
I'm building a WYSIWYG editor in jQuery, and right now I'm working on inserting links. I am using HTML5's contenteditable feature, that allows e.g. a div to be edited:
- <div contenteditable="true"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
When I select text, I want to click on a button, open a modal window, paste a link and click ok in order to insert the link. I have it working with a JavaScript prompt like this:
- <button class="link" onclick="document.execCommand('CreateLink',false,window.prompt('Paste a link','http://'));"><img src="interface/images/link.png" alt="link" width="" height="" /></button>
Instead, because I want to be able to style the prompt, I want to use a simple modal window with a text field and a button inside.
- <div id="link_panel">
- <div id="link_wrapper">
- <div class="modal_description"><h2>Link</h2><p>Past link or e-mail</p></div>
- <div class="modal_file"><form name="linkform"><input type="text" name="linkurl" class="modal_link" /></form></div>
- <div class="modal_submit"><button class="modal_insert_link" onclick="AddLink()">Insert link</button></div>
- </div>
- </div>
The problem is, that when I click inside the text field, the selected text in the contenteditable div becomes unselected, and I'm not able to insert the link.
Does anyone know how to handle this?