appendto.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <!--
  3. Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  4. For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  5. -->
  6. <html>
  7. <head>
  8. <meta charset="utf-8">
  9. <title>Append To Page Element Using JavaScript Code &mdash; CKEditor Sample</title>
  10. <script src="../../ckeditor.js"></script>
  11. <link rel="stylesheet" href="sample.css">
  12. </head>
  13. <body>
  14. <h1 class="samples">
  15. <a href="index.html">CKEditor Samples</a> &raquo; Append To Page Element Using JavaScript Code
  16. </h1>
  17. <div class="warning deprecated">
  18. This sample is not maintained anymore. Check out the <a href="https://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
  19. </div>
  20. <div id="section1">
  21. <div class="description">
  22. <p>
  23. The <code><a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-appendTo">CKEDITOR.appendTo()</a></code> method serves to to place editors inside existing DOM elements. Unlike <code><a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-replace">CKEDITOR.replace()</a></code>,
  24. a target container to be replaced is no longer necessary. A new editor
  25. instance is inserted directly wherever it is desired.
  26. </p>
  27. <pre class="samples">CKEDITOR.appendTo( '<em>container_id</em>',
  28. { /* Configuration options to be used. */ }
  29. 'Editor content to be used.'
  30. );</pre>
  31. </div>
  32. <script>
  33. // This call can be placed at any point after the
  34. // DOM element to append CKEditor to or inside the <head><script>
  35. // in a window.onload event handler.
  36. // Append a CKEditor instance using the default configuration and the
  37. // provided content to the <div> element of ID "section1".
  38. CKEDITOR.appendTo( 'section1',
  39. null,
  40. '<p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>'
  41. );
  42. </script>
  43. </div>
  44. <br>
  45. <div id="footer">
  46. <hr>
  47. <p>
  48. CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
  49. </p>
  50. <p id="copy">
  51. Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
  52. Knabben. All rights reserved.
  53. </p>
  54. </div>
  55. </body>
  56. </html>