8
0

html-embed.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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 */
  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. ClassicEditor.builtinPlugins.push( HtmlEmbed );
  10. const previewsModeButton = document.getElementById( 'raw-html-previews-enabled' );
  11. const noPreviewsModeButton = document.getElementById( 'raw-html-previews-disabled' );
  12. previewsModeButton.addEventListener( 'change', handleModeChange );
  13. noPreviewsModeButton.addEventListener( 'change', handleModeChange );
  14. startMode( document.querySelector( 'input[name="mode"]:checked' ).value );
  15. async function handleModeChange( evt ) {
  16. await startMode( evt.target.value );
  17. }
  18. async function startMode( selectedMode ) {
  19. if ( selectedMode === 'enabled' ) {
  20. await startEnabledPreviewsMode();
  21. } else {
  22. await startDisabledPreviewsMode();
  23. }
  24. }
  25. async function startEnabledPreviewsMode() {
  26. await reloadEditor( {
  27. htmlEmbed: {
  28. showPreviews: true,
  29. sanitizeHtml( rawHtml ) {
  30. return {
  31. html: rawHtml,
  32. hasChanged: false
  33. };
  34. }
  35. }
  36. } );
  37. }
  38. async function startDisabledPreviewsMode() {
  39. await reloadEditor();
  40. }
  41. async function reloadEditor( config = {} ) {
  42. if ( window.editor ) {
  43. await window.editor.destroy();
  44. }
  45. config = Object.assign( config, {
  46. toolbar: {
  47. items: [
  48. 'heading',
  49. '|',
  50. 'bold',
  51. 'italic',
  52. 'bulletedList',
  53. 'numberedList',
  54. '|',
  55. 'outdent',
  56. 'indent',
  57. '|',
  58. 'blockQuote',
  59. 'link',
  60. 'imageUpload',
  61. 'mediaEmbed',
  62. 'insertTable',
  63. 'htmlEmbed',
  64. '|',
  65. 'undo',
  66. 'redo'
  67. ],
  68. viewportTopOffset: window.getViewportTopOffsetConfig()
  69. },
  70. image: {
  71. styles: [
  72. 'full',
  73. 'alignLeft',
  74. 'alignRight'
  75. ],
  76. toolbar: [
  77. 'imageStyle:alignLeft',
  78. 'imageStyle:full',
  79. 'imageStyle:alignRight',
  80. '|',
  81. 'imageTextAlternative'
  82. ]
  83. },
  84. table: {
  85. contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
  86. },
  87. cloudServices: CS_CONFIG
  88. } );
  89. window.editor = await ClassicEditor.create( document.querySelector( '#snippet-html-embed' ), config );
  90. }