iconset.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global document, console, window */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  10. import codeIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/code.svg';
  11. import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
  12. import editIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
  13. import strikethroughIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/strikethrough.svg';
  14. import underlineIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/underline.svg';
  15. import unlinkIcon from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
  16. class FakeIcons extends Plugin {
  17. init() {
  18. const editor = this.editor;
  19. editor.ui.componentFactory.add( 'code', locale => {
  20. const view = new ButtonView( locale );
  21. view.set( {
  22. label: 'Code',
  23. icon: codeIcon,
  24. tooltip: true
  25. } );
  26. return view;
  27. } );
  28. editor.ui.componentFactory.add( 'edit', locale => {
  29. const view = new ButtonView( locale );
  30. view.set( {
  31. label: 'Edit link',
  32. icon: editIcon,
  33. tooltip: true
  34. } );
  35. return view;
  36. } );
  37. editor.ui.componentFactory.add( 'insertImage', locale => {
  38. const view = new ButtonView( locale );
  39. view.set( {
  40. label: 'Insert image',
  41. icon: imageIcon,
  42. tooltip: true
  43. } );
  44. return view;
  45. } );
  46. editor.ui.componentFactory.add( 'strikethrough', locale => {
  47. const view = new ButtonView( locale );
  48. view.set( {
  49. label: 'Strikethrough',
  50. icon: strikethroughIcon,
  51. tooltip: true
  52. } );
  53. return view;
  54. } );
  55. editor.ui.componentFactory.add( 'underline', locale => {
  56. const view = new ButtonView( locale );
  57. view.set( {
  58. label: 'Underline',
  59. icon: underlineIcon,
  60. tooltip: true
  61. } );
  62. return view;
  63. } );
  64. editor.ui.componentFactory.add( 'unlink', locale => {
  65. const view = new ButtonView( locale );
  66. view.set( {
  67. label: 'Unlink',
  68. icon: unlinkIcon,
  69. tooltip: true
  70. } );
  71. return view;
  72. } );
  73. }
  74. }
  75. ClassicEditor
  76. .create( document.querySelector( '#editor' ), {
  77. plugins: [
  78. ArticlePluginSet, FakeIcons
  79. ],
  80. toolbar: [
  81. 'headings', 'bold', 'italic', 'strikethrough', 'underline', 'link', 'unlink', 'edit', 'bulletedList', 'numberedList',
  82. 'blockquote', 'code', 'undo', 'redo', 'imagestylefull', 'imagestyleside', 'imagetextalternative', 'insertImage'
  83. ]
  84. } )
  85. .then( editor => {
  86. window.editor = editor;
  87. } )
  88. .catch( err => {
  89. console.error( err.stack );
  90. } );