divreplace.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!--
  3. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
  4. For licensing, see LICENSE.html or http://ckeditor.com/license
  5. -->
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8. <title>Replace DIV &mdash; CKEditor Sample</title>
  9. <meta content="text/html; charset=utf-8" http-equiv="content-type" />
  10. <script type="text/javascript" src="../ckeditor.js"></script>
  11. <script src="sample.js" type="text/javascript"></script>
  12. <link href="sample.css" rel="stylesheet" type="text/css" />
  13. <style id="styles" type="text/css">
  14. div.editable
  15. {
  16. border: solid 2px Transparent;
  17. padding-left: 15px;
  18. padding-right: 15px;
  19. }
  20. div.editable:hover
  21. {
  22. border-color: black;
  23. }
  24. </style>
  25. <script type="text/javascript">
  26. //<![CDATA[
  27. // Uncomment the following code to test the "Timeout Loading Method".
  28. // CKEDITOR.loadFullCoreTimeout = 5;
  29. window.onload = function()
  30. {
  31. // Listen to the double click event.
  32. if ( window.addEventListener )
  33. document.body.addEventListener( 'dblclick', onDoubleClick, false );
  34. else if ( window.attachEvent )
  35. document.body.attachEvent( 'ondblclick', onDoubleClick );
  36. };
  37. function onDoubleClick( ev )
  38. {
  39. // Get the element which fired the event. This is not necessarily the
  40. // element to which the event has been attached.
  41. var element = ev.target || ev.srcElement;
  42. // Find out the div that holds this element.
  43. var name;
  44. do
  45. {
  46. element = element.parentNode;
  47. }
  48. while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )
  49. if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
  50. replaceDiv( element );
  51. }
  52. var editor;
  53. function replaceDiv( div )
  54. {
  55. if ( editor )
  56. editor.destroy();
  57. editor = CKEDITOR.replace( div );
  58. }
  59. //]]>
  60. </script>
  61. </head>
  62. <body>
  63. <h1 class="samples">
  64. CKEditor Sample &mdash; Replace DIV with CKEditor on the Fly
  65. </h1>
  66. <div class="description">
  67. <p>
  68. This sample shows how to automatically replace <code>&lt;div&gt;</code> elements
  69. with a CKEditor instance on the fly, following user's doubleclick. The content
  70. that was previously placed inside the <code>&lt;div&gt;</code> element will now
  71. be moved into CKEditor editing area.
  72. </p>
  73. <p>
  74. For details on how to create this setup check the source code of this sample page.
  75. </p>
  76. </div>
  77. <!-- This <div> holds alert messages to be display in the sample page. -->
  78. <div id="alerts">
  79. <noscript>
  80. <p>
  81. <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
  82. support, like yours, you should still see the contents (HTML data) and you should
  83. be able to edit it normally, without a rich editor interface.
  84. </p>
  85. </noscript>
  86. </div>
  87. <p>
  88. Double-click any of the following <code>&lt;div&gt;</code> elements to transform them into
  89. editor instances.</p>
  90. <div class="editable">
  91. <h3>
  92. Part 1</h3>
  93. <p>
  94. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
  95. semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
  96. rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
  97. nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
  98. eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
  99. </p>
  100. </div>
  101. <div class="editable">
  102. <h3>
  103. Part 2</h3>
  104. <p>
  105. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
  106. semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
  107. rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
  108. nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
  109. eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
  110. </p>
  111. <p>
  112. Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus
  113. sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum
  114. vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate.
  115. </p>
  116. </div>
  117. <div class="editable">
  118. <h3>
  119. Part 3</h3>
  120. <p>
  121. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
  122. semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
  123. rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
  124. nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
  125. eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
  126. </p>
  127. </div>
  128. <div id="footer">
  129. <hr />
  130. <p>
  131. CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  132. </p>
  133. <p id="copy">
  134. Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  135. Knabben. All rights reserved.
  136. </p>
  137. </div>
  138. </body>
  139. </html>