html-embed.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals window, document, console */
  6. import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
  7. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  8. import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
  9. import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
  10. ClassicEditor.builtinPlugins.push( HtmlEmbed );
  11. ClassicEditor.builtinPlugins.push( CodeBlock );
  12. /* eslint-disable max-len */
  13. const initialData =
  14. `
  15. <h2>CKEditor 5 classic editor build</h2>
  16. <div class="raw-html-embed">
  17. <p><a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic"><img alt="npm version" src="https://badge.fury.io/js/%40ckeditor%2Fckeditor5-build-classic.svg" /></a></p>
  18. <p><a href="https://travis-ci.org/ckeditor/ckeditor5"><img alt="Build Status" src="https://travis-ci.org/ckeditor/ckeditor5.svg?branch=master" /></a>&nbsp;<a href="https://david-dm.org/ckeditor/ckeditor5"><img alt="Dependency Status" src="https://img.shields.io/david/ckeditor/ckeditor5.svg" /></a>&nbsp;<a href="https://david-dm.org/ckeditor/ckeditor5?type=dev"><img alt="devDependency Status" src="https://img.shields.io/david/dev/ckeditor/ckeditor5.svg" /></a></p>
  19. <p><a href="http://eepurl.com/c3zRPr"><img alt="Join newsletter" src="https://img.shields.io/badge/join-newsletter-00cc99.svg" /></a>&nbsp;<a href="https://twitter.com/ckeditor"><img alt="Follow twitter" src="https://img.shields.io/badge/follow-twitter-00cc99.svg" /></a></p>
  20. </div>
  21. <p>The classic editor build for CKEditor 5. Read more about the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor"><strong>classic editor build</strong></a> and see the <a href="https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html"><strong>demo</strong></a>.</p>
  22. <figure class="image"><img src="https://c.cksource.com/a/1/img/npm/ckeditor5-build-classic.png" alt="CKEditor 5 classic editor build screenshot"></figure>
  23. <h2>Documentation</h2>
  24. <p>See:</p>
  25. <ul>
  26. <li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html">Installation</a> for how to install this package and what it contains.</li>
  27. <li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html">Basic API</a> for how to create an editor and interact with it.</li>
  28. <li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html">Configuration</a> for how to configure the editor.</li>
  29. </ul>
  30. <h2>Quick start</h2>
  31. <p>First, install the build from npm:</p>
  32. <pre><code class="language-plaintext">npm&nbsp;install&nbsp;--save&nbsp;@ckeditor/ckeditor5-build-classic</code></pre>
  33. <p>And use it in your website:</p>
  34. <pre><code class="language-html">&lt;div id="editor">
  35. &lt;p>This is the editor content.&lt;/p>
  36. &lt;/div>
  37. &lt;script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js">&lt;/script>
  38. &lt;script>
  39. ClassicEditor
  40. .create( document.querySelector( '#editor' ) )
  41. .then( editor => {
  42. window.editor = editor;
  43. } )
  44. .catch( error => {
  45. console.error( 'There was a problem initializing the editor.', error );
  46. } );
  47. &lt;/script></code></pre>
  48. <h2>License</h2>
  49. <p>Licensed under the terms of <a href="http://www.gnu.org/licenses/gpl.html" rel="nofollow">GNU General Public License Version 2 or later</a>. For full details about the license, please check the <code>LICENSE.md</code> file or <a href="https://ckeditor.com/legal/ckeditor-oss-license" rel="nofollow">https://ckeditor.com/legal/ckeditor-oss-license</a>.</p>
  50. <div class="raw-html-embed"><script>
  51. (() => {
  52. console.log( '💎 This is some analytics script...' );
  53. })();
  54. </script></div>
  55. `;
  56. ClassicEditor
  57. .create( document.querySelector( '#snippet-html-embed' ), {
  58. initialData,
  59. toolbar: {
  60. items: [
  61. 'heading',
  62. '|',
  63. 'bold',
  64. 'italic',
  65. 'bulletedList',
  66. 'numberedList',
  67. '|',
  68. 'outdent',
  69. 'indent',
  70. '|',
  71. 'blockQuote',
  72. 'link',
  73. 'imageUpload',
  74. 'mediaEmbed',
  75. 'insertTable',
  76. 'codeBlock',
  77. 'htmlEmbed',
  78. '|',
  79. 'undo',
  80. 'redo'
  81. ],
  82. viewportTopOffset: window.getViewportTopOffsetConfig()
  83. },
  84. image: {
  85. styles: [
  86. 'full',
  87. 'alignLeft',
  88. 'alignRight'
  89. ],
  90. toolbar: [
  91. 'imageStyle:alignLeft',
  92. 'imageStyle:full',
  93. 'imageStyle:alignRight',
  94. '|',
  95. 'imageTextAlternative'
  96. ]
  97. },
  98. table: {
  99. contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
  100. },
  101. cloudServices: CS_CONFIG
  102. } )
  103. .then( editor => {
  104. window.editor = editor;
  105. // The "Preview editor data" button logic.
  106. document.querySelector( '#preview-data-action' ).addEventListener( 'click', () => {
  107. const mainCSSElement = [ ...document.querySelectorAll( 'link' ) ]
  108. .find( linkElement => linkElement.href.endsWith( 'css/styles.css' ) );
  109. const snippetCSSElement = [ ...document.querySelectorAll( 'link' ) ]
  110. .find( linkElement => linkElement.href.endsWith( 'snippet.css' ) );
  111. const iframeElement = document.querySelector( '#preview-data-container' );
  112. iframeElement.srcdoc = '<!DOCTYPE html><html>' +
  113. '<head>' +
  114. '<meta charset="utf-8">' +
  115. `<title>${ document.title }</title>` +
  116. `<link rel="stylesheet" href="${ mainCSSElement.href }" type="text/css">` +
  117. `<link rel="stylesheet" href="${ snippetCSSElement.href }" type="text/css">` +
  118. `<style>
  119. body {
  120. padding: 20px;
  121. }
  122. .formatted p img {
  123. display: inline;
  124. margin: 0;
  125. }
  126. </style>` +
  127. '</head>' +
  128. '<body class="formatted ck-content">' +
  129. editor.getData() +
  130. '</body>' +
  131. '</html>';
  132. } );
  133. } )
  134. .catch( err => {
  135. console.error( err.stack );
  136. } );