ajax.html 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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>Ajax &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. <script type="text/javascript">
  14. //<![CDATA[
  15. var editor, html = '';
  16. function createEditor()
  17. {
  18. if ( editor )
  19. return;
  20. // Create a new editor inside the <div id="editor">, setting its value to html
  21. var config = {};
  22. editor = CKEDITOR.appendTo( 'editor', config, html );
  23. }
  24. function removeEditor()
  25. {
  26. if ( !editor )
  27. return;
  28. // Retrieve the editor contents. In an Ajax application, this data would be
  29. // sent to the server or used in any other way.
  30. document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
  31. document.getElementById( 'contents' ).style.display = '';
  32. // Destroy the editor.
  33. editor.destroy();
  34. editor = null;
  35. }
  36. //]]>
  37. </script>
  38. </head>
  39. <body>
  40. <h1 class="samples">
  41. CKEditor Sample &mdash; Create and Destroy Editor Instances for Ajax Applications
  42. </h1>
  43. <div class="description">
  44. <p>
  45. This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
  46. area will be displayed in a <code>&lt;div&gt;</code> element.
  47. </p>
  48. <p>
  49. For details of how to create this setup check the source code of this sample page
  50. for JavaScript code responsible for the creation and destruction of a CKEditor instance.
  51. </p>
  52. </div>
  53. <!-- This <div> holds alert messages to be display in the sample page. -->
  54. <div id="alerts">
  55. <noscript>
  56. <p>
  57. <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
  58. support, like yours, you should still see the contents (HTML data) and you should
  59. be able to edit it normally, without a rich editor interface.
  60. </p>
  61. </noscript>
  62. </div>
  63. <p>Click the buttons to create and remove a CKEditor instance.</p>
  64. <p>
  65. <input onclick="createEditor();" type="button" value="Create Editor" />
  66. <input onclick="removeEditor();" type="button" value="Remove Editor" />
  67. </p>
  68. <!-- This div will hold the editor. -->
  69. <div id="editor">
  70. </div>
  71. <div id="contents" style="display: none">
  72. <p>
  73. Edited Contents:</p>
  74. <!-- This div will be used to display the editor contents. -->
  75. <div id="editorcontents">
  76. </div>
  77. </div>
  78. <div id="footer">
  79. <hr />
  80. <p>
  81. CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  82. </p>
  83. <p id="copy">
  84. Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  85. Knabben. All rights reserved.
  86. </p>
  87. </div>
  88. </body>
  89. </html>