Hello, I am have some trouble emulating the sample at http://nightly.ckeditor.com/7484/_samples/divreplace.html, I think this is mostly because I am using ASP.NET with a master page rather then simple HTML. My question is how can this example still be achieved? I have registered my CKEditor in the web.config of my site as I am using it in multiple places. When I attempt to run this script (gotten from the page source of the above link)
<script type="text/javascript"> //<![CDATA[ // Uncomment the following code to test the "Timeout Loading Method". // CKEDITOR.loadFullCoreTimeout = 5; 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 ); } var editor; function replaceDiv( div ) { if ( editor ) editor.destroy(); editor = CKEDITOR.replace( div ); } //]]> </script>
I am told that CKEDITOR is unknown, unless I have an instance of CKEDITOR active on my page... which defeats the purpose.
This is an example of the page with the div swap script working.
<%@ Page Language="C#" MasterPageFile="~/Site.master" CodeFile="Insert.aspx.cs" Inherits="Insert" %> <%@ Reference Control="~/CustomControl/NewAnswer.ascx" %> <asp:Content ID="headContent" ContentPlaceHolderID="head" Runat="Server"> <script src="../../../ckeditor/ckeditor.js" type="text/javascript"></script> <style id="styles" type="text/css"> div.editable { border: solid 2px Transparent; padding-left: 15px; padding-right: 15px; } div.editable:hover { border-color: black; } </style> <script type="text/javascript"> //<![CDATA[ // Uncomment the following code to test the "Timeout Loading Method". // CKEDITOR.loadFullCoreTimeout = 5; 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); } var editor; function replaceDiv(div) { if (editor) editor.destroy(); editor = CKEDITOR.replace(div); } //]]> </script> </asp:Content> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <div class="editable"> <p> Double Click To enter Question Statement. </p> </div> <div style="left: -10000; top: -10000"> <CKE:CKEditorControl runat="server"/> </div> </asp:Content>
To break it just remove the CKE:CKEditorControl.