I'd like to replace a TextBox with a CKEditor by Doubleclick. This works fine so far. The only problem is, that by doubleclicking the Editor opens and changes it's position on the page but it should stay at the same position as the TextBox. Anyone has an idea, how to do that?
And the CSS-file
window.onload = function () { // Listen to the double click event. if (window.addEventListener) document.body.addEventListener('dblclick', onDoubleClick, false); else if (window.attachEvent) document.body.attachEvent('ondblclick', onDoubleClick); }; function onDoubleClick(ev) { // Get the element which fired the event. This is not necessarily the // element to which the event has been attached. var element = ev.target || ev.srcElement; // Find out the div that holds this element. var name; do { element = element.parentNode; } while (element && (name = element.nodeName.toLowerCase()) && (name != 'div' || element.className.indexOf('editable') == -1) && name != 'body') if (name == 'div' && element.className.indexOf('editable') != -1) replaceDiv(element, element.id); } var editor; function replaceDiv(div, id) { if (editor) editor.destroy(); switch (id) { case "header1": editor = CKEDITOR.replace(div, { height: "200", width: "950", uiColor: '#9AB8F3', stylesSet: 'header1' }); break; case "sidebarLeft": editor = CKEDITOR.replace(div, { height: "690", width: "180" }); break; case "sidebarRight": editor = CKEDITOR.replace(div, { height: "690", width: "180" }); break; case "content": editor = CKEDITOR.replace(div, { // stylesSet: 'content' height: "180", width: "150" }); break; case "footer": editor = CKEDITOR.replace(div, { height: "180", width: "950" }); break; } }
And the CSS-file
div.editable { border: solid 2px Transparent; padding-left: 15px; padding-right: 15px; } div.editable:hover { border-color: black; } #header1 { margin-bottom: 10px; height: 200px; width: 950px; } #sidebarLeft { margin-top: 10px; width: 180px; height: 690px; } #sidebarRight { margin-left: 710px; margin-top: -698px; width: 180px; height: 690px; } #content { margin-left: 210px; margin-top: -690px; width: 450px; height: 690px; } #footer { width: 950px; height: 180px; }
Re: Replace CKEditor, define new position on page
You can try to put something like this in your CSS
Basically: apply those styles to the root element of each editor.
Re: Replace CKEditor, define new position on page