Guest User

Kentico WYSIWYG Shared Toolbar MyComponentsConfiguration.js

a guest
Feb 15th, 2020
126
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function (pageBuilder) {
  2. var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};
  3. var configurations = richTextEditor.configurations = richTextEditor.configurations || {};
  4.  
  5. // Ensure Shared Toolbar Exists, add some styling and remove the quick insert.
  6. if ($("body > .FroalaSharedToolbarHolder").length === 0) {
  7. $("body")
  8. .prepend("<div class='FroalaSharedToolbarSpacer' style='width: 100%;'></div>")
  9. .prepend("<div class='FroalaSharedToolbarHolder' style='position: fixed; top: 0; left: 0; right: 0; z-index: 2147483640;'></div>")
  10. .prepend("<style>.fr-quick-insert {display: none;} .fr-toolbar.fr-top { border-top-right-radius: 0;border-top-left-radius: 0;border-bottom: 1px solid lightgrey;}</style>");
  11. }
  12.  
  13. function CheckTriggerHide(editor) {
  14. setTimeout(function () {
  15. if ($(editor.$tb).parent().find(document.activeElement).length === 0 && $(editor.$el).parent().find(document.activeElement).length === 0 && $(document.activeElement).closest(".fr-popup, kentico-modal-dialog").length === 0) {
  16. editor.$tb.hide();
  17. $("body .FroalaSharedToolbarSpacer").css({ 'height': $("body .FroalaSharedToolbarHolder").height() + 85 + 'px' });
  18. }
  19. }, 50);
  20. }
  21.  
  22. // Base configuration for Shared toolbar
  23. var BaseConfiguration = {
  24. toolbarVisibleWithoutSelection: true,
  25. toolbarInline: false,
  26. editorClass: "froala-wysiwyg",
  27. iframe: false,
  28. paragraphFormatSelection: true,
  29. fontAwesomeTemplate: '<span class="fa fa-[NAME] fr-deletable" aria-hidden="true">&nbsp;</span>',
  30. events: {
  31. initialized: function () {
  32. // Custom logic to take Inline toolbar and move it to a shared location, but not make it a shared toolbar
  33. var editor = this;
  34.  
  35. // Add new unique Toolbar to shared toolbar
  36. var NewContainer = $("<div class='FroalaToolBar_" + $(this.el).closest(".ktc-widget").attr("id") + "'></div>");
  37. $("body > .FroalaSharedToolbarHolder").append(NewContainer);
  38.  
  39. // Move the inline editor to this location
  40. $(editor.$tb).appendTo(NewContainer);
  41.  
  42. // Enforce Blur and Focus triggers here as the Froala focus and blur do not trigger properly when switching between editors
  43. $(editor.$el).focus(function () {
  44. editor.$tb.show();
  45. // 85 = 50 for second row of tools (if one is not already expanded) + 35 for widget header height
  46. $("body .FroalaSharedToolbarSpacer").css({
  47. 'height': editor.$tb.height() + 35 + ($(".fr-more-toolbar.fr-expanded", editor.$tb).length > 0 ? 0 : 50) + 'px'
  48. });
  49. });
  50. $(editor.$el).blur(function () {
  51. CheckTriggerHide(editor);
  52. });
  53. $(editor.$tb).focusout(function () {
  54. CheckTriggerHide(editor);
  55. });
  56.  
  57. // Hide toolbar
  58. editor.$tb.hide();
  59. }
  60. }
  61. };
  62.  
  63. // Overrides the default configuration of widgets (i.e. when no configuration is specified)
  64. configurations["default"] = $.extend({}, BaseConfiguration, {
  65. /*
  66. paragraphStyles: {
  67. 'sample-class' : 'Sample Style'
  68. },
  69. htmlUntouched: true,
  70. */
  71. });
  72.  
  73. // Defines a new configuration for a simple toolbar with only formatting options and disables the inline design of the toolbar
  74. configurations["basic"] = $.extend({}, BaseConfiguration, {
  75. toolbarButtons: ['paragraphFormat', '|', 'bold', 'italic', 'underline', '|', 'align', 'formatOL', 'formatUL']
  76. });
  77.  
  78. })(window.kentico.pageBuilder);
RAW Paste Data