index.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CKEditor 5 – document editor build – development sample</title>
  6. <style>
  7. body {
  8. max-width: 1000px;
  9. margin: 20px auto;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>CKEditor 5 – document editor build – development sample</h1>
  15. <h2>The toolbar</h2>
  16. <div class="toolbar-container"></div>
  17. <h2>The editable</h2>
  18. <div class="editable-container"></div>
  19. <style>
  20. .editable-container,
  21. .toolbar-container {
  22. position: relative;
  23. border: 1px solid #ddd;
  24. background: #eee;
  25. }
  26. .toolbar-container {
  27. padding: 1em;
  28. }
  29. .editable-container {
  30. padding: 3em;
  31. overflow-y: scroll;
  32. max-height: 500px;
  33. }
  34. .editable-container .document-editor__editable.ck-editor__editable {
  35. min-height: 21cm;
  36. padding: 2em;
  37. border: 1px #D3D3D3 solid;
  38. border-radius: var(--ck-border-radius);
  39. background: white;
  40. box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  41. }
  42. </style>
  43. <script src="../build/ckeditor.js"></script>
  44. <script>
  45. const editorData = `<h2>Sample</h2>
  46. <p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#document-editor">document editor build</a>.</p>
  47. <figure class="image">
  48. <img src="../tests/manual/sample.jpg" alt="Autumn fields" />
  49. </figure>
  50. <p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>`;
  51. DecoupledEditor.create( editorData )
  52. .then( editor => {
  53. window.editor = editor;
  54. document.querySelector( '.toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
  55. document.querySelector( '.editable-container' ).appendChild( editor.ui.view.editable.element );
  56. } )
  57. .catch( error => {
  58. console.error( 'There was a problem initializing the editor.', error );
  59. } );
  60. </script>
  61. </body>
  62. </html>