linkdecorator.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals console:false, window, document */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import Enter from '@ckeditor/ckeditor5-enter/src/enter';
  8. import Typing from '@ckeditor/ckeditor5-typing/src/typing';
  9. import Link from '../../src/link';
  10. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  11. import Undo from '@ckeditor/ckeditor5-undo/src/undo';
  12. import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
  13. // Just to have nicely styles switchbutton;
  14. import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css';
  15. ClassicEditor
  16. .create( document.querySelector( '#editor' ), {
  17. plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ],
  18. toolbar: [ 'link', 'undo', 'redo' ],
  19. link: {
  20. decorators: {
  21. isExternal: {
  22. mode: 'manual',
  23. label: 'Open in a new tab',
  24. attributes: {
  25. target: '_blank',
  26. rel: 'noopener noreferrer'
  27. }
  28. },
  29. isDownloadable: {
  30. mode: 'manual',
  31. label: 'Downloadable',
  32. attributes: {
  33. download: 'download'
  34. }
  35. },
  36. isGallery: {
  37. mode: 'manual',
  38. label: 'Gallery link',
  39. attributes: {
  40. class: 'gallery'
  41. }
  42. }
  43. }
  44. }
  45. } )
  46. .then( editor => {
  47. if ( !window.editors ) {
  48. window.editors = {};
  49. }
  50. window.editor = editor;
  51. window.editors.manualDecorators = editor;
  52. } )
  53. .catch( err => {
  54. console.error( err.stack );
  55. } );
  56. ClassicEditor
  57. .create( document.querySelector( '#editor2' ), {
  58. plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ],
  59. toolbar: [ 'link', 'undo', 'redo' ],
  60. link: {
  61. decorators: {
  62. isTelephone: {
  63. mode: 'automatic',
  64. callback: url => url.startsWith( 'tel:' ),
  65. attributes: {
  66. class: 'phone'
  67. }
  68. },
  69. isInternal: {
  70. mode: 'automatic',
  71. callback: url => url.startsWith( '#' ),
  72. attributes: {
  73. class: 'internal'
  74. }
  75. }
  76. },
  77. addTargetToExternalLinks: true
  78. }
  79. } )
  80. .then( editor => {
  81. if ( !window.editors ) {
  82. window.editors = {};
  83. }
  84. window.editors.automaticDecorators = editor;
  85. } )
  86. .catch( err => {
  87. console.error( err.stack );
  88. } );