appendto.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <!--
  3. Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  4. For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  5. -->
  6. <html lang="en">
  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. <meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
  13. </head>
  14. <body>
  15. <h1 class="samples">
  16. <a href="index.html">CKEditor Samples</a> &raquo; Append To Page Element Using JavaScript Code
  17. </h1>
  18. <div class="warning deprecated">
  19. This sample is not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
  20. </div>
  21. <div id="section1">
  22. <div class="description">
  23. <p>
  24. 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>,
  25. a target container to be replaced is no longer necessary. A new editor
  26. instance is inserted directly wherever it is desired.
  27. </p>
  28. <pre class="samples">CKEDITOR.appendTo( '<em>container_id</em>',
  29. { /* Configuration options to be used. */ }
  30. 'Editor content to be used.'
  31. );</pre>
  32. </div>
  33. <script>
  34. // This call can be placed at any point after the
  35. // DOM element to append CKEditor to or inside the <head><script>
  36. // in a window.onload event handler.
  37. // Append a CKEditor instance using the default configuration and the
  38. // provided content to the <div> element of ID "section1".
  39. CKEDITOR.appendTo( 'section1',
  40. null,
  41. '<p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>'
  42. );
  43. </script>
  44. </div>
  45. <br>
  46. <div id="footer">
  47. <hr>
  48. <p>
  49. CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
  50. </p>
  51. <p id="copy">
  52. Copyright &copy; 2003-2023, <a class="samples" href="https://cksource.com/">CKSource</a> Holding sp. z o.o. All rights reserved.
  53. </p>
  54. </div>
  55. </body>
  56. </html>