plugin.js 4.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * Reference docs for how to build a CKEditor plugin:
  3. * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
  4. */
  5. CKEDITOR.plugins.add('bootstrapTabs', {
  6. lang: 'en,ru',
  7. requires: 'dialog',
  8. icons: 'bootstrapTabs',
  9. init: function( editor ) {
  10. // Plugin logic goes here...
  11. // Create the command for the plugin.
  12. editor.addCommand('bootstrapTabs', new CKEDITOR.dialogCommand('bootstrapTabsDialog', {
  13. allowedContent: 'div ul li a[role,href,id,aria-*,data-number-of-tabs,data-tab-set-title,data-toggle](bootstrap-tabs,nav,nav-tabs,tab-link,active,tab-content,tab-pane,tab-pane-content)'
  14. }));
  15. // Add the button for the plugin.
  16. editor.ui.addButton('BootstrapTabs', {
  17. label: editor.lang.bootstrapTabs.buttonLabel,
  18. command: 'bootstrapTabs', // The command that was created by addCommand, above.
  19. toolbar: 'insert' // Defines the toolbar group. Can also specify an index for ordering: 'insert,30' or 'insert,100', or 'insert,0'.
  20. });
  21. CKEDITOR.dialog.add('bootstrapTabsDialog', this.path + 'dialogs/bootstrapTabs.js');
  22. // Context menu support in CKEditor is implemented by the Context Menu plugin.
  23. // The context menu implementation should be placed inside the init function in the plugin file,
  24. // following the command and button definitions.
  25. // The if check here is a "best practice".
  26. // If for some reason the Context Menu plugin will be removed or not available,
  27. // the menu registration should not take place (otherwise an exception is thrown).
  28. // http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_2
  29. if ( editor.contextMenu ) {
  30. editor.addMenuGroup( 'bootstrapTabsGroup' );
  31. editor.addMenuItem( 'bootstrapTabsItem', {
  32. label: editor.lang.bootstrapTabs.contextMenuLabel,
  33. icon: this.path + 'icons/bootstrapTabs.png',
  34. command: 'bootstrapTabs',
  35. group: 'bootstrapTabsGroup'
  36. });
  37. editor.contextMenu.addListener( function(element) {
  38. // If an ascendant of the element has the nav-tabs or tab-content class,
  39. // enable the context menu (a button with off state for the tab)
  40. ascendant = element.getAscendant( function(element) {
  41. // NOTE: The first part of this condition determinds if we've reached the '#document' for the page.
  42. // If we've reached the document ascendant, then calling hasClass() will cause an error, breaking the contextMenu.
  43. // http://docs.ckeditor.com/#!/api/CKEDITOR.dom.document
  44. return !( element instanceof CKEDITOR.dom.document ) &&
  45. ( element.hasClass('nav-tabs') || element.hasClass('tab-content') );
  46. });
  47. if ( ascendant ) {
  48. return { bootstrapTabsItem: CKEDITOR.TRISTATE_OFF };
  49. }
  50. });
  51. }
  52. // Register a doubleclick event handler
  53. // When an element is double-clicked, the bootstrapTabsDialog
  54. // will be displayed for elements that are descendents part of a tab set.
  55. editor.on('doubleclick', function (event) {
  56. var element = event.data.element;
  57. // If an ascendant of the element has the nav-tabs or tab-content class,
  58. // enable the context menu (a button with off state for the tab)
  59. ascendant = element.getAscendant( function(element) {
  60. // QUESTION: How to prevent linkDialog from displaying on doubleclick in a nav-tab?
  61. // In the case of of a[role="tab"], the link dialog is not displayed, but the bootstrapTabsDialog
  62. // is not displayed as preferred.
  63. // NOTE: The first part of this condition determinds if we've reached the '#document' for the page.
  64. // If we've reached the document ascendant, then calling hasClass() will cause an error, breaking the contextMenu.
  65. // http://docs.ckeditor.com/#!/api/CKEDITOR.dom.document
  66. return !( element instanceof CKEDITOR.dom.document ) &&
  67. (
  68. ( element.name == 'a' && element.attributes.role == 'tab') ||
  69. element.hasClass('nav-tabs') ||
  70. element.hasClass('tab-content')
  71. );
  72. });
  73. if ( ascendant ) {
  74. event.data.dialog = 'bootstrapTabsDialog';
  75. }
  76. });
  77. }
  78. });