plugin.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or http://ckeditor.com/license
  4. */
  5. /**
  6. * @fileOverview The "show border" plugin. The command display visible outline
  7. * border line around all table elements if table doesn't have a none-zero 'border' attribute specified.
  8. */
  9. ( function() {
  10. var commandDefinition = {
  11. preserveState: true,
  12. editorFocus: false,
  13. readOnly: 1,
  14. exec: function( editor ) {
  15. this.toggleState();
  16. this.refresh( editor );
  17. },
  18. refresh: function( editor ) {
  19. if ( editor.document ) {
  20. var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'attachClass' : 'removeClass';
  21. editor.editable()[ funcName ]( 'cke_show_borders' );
  22. }
  23. }
  24. };
  25. var showBorderClassName = 'cke_show_border';
  26. CKEDITOR.plugins.add( 'showborders', {
  27. modes: { 'wysiwyg': 1 },
  28. onLoad: function() {
  29. var cssStyleText,
  30. cssTemplate =
  31. // TODO: For IE6, we don't have child selector support,
  32. // where nested table cells could be incorrect.
  33. ( CKEDITOR.env.ie6Compat ? [
  34. '.%1 table.%2,',
  35. '.%1 table.%2 td, .%1 table.%2 th',
  36. '{',
  37. 'border : #d3d3d3 1px dotted',
  38. '}'
  39. ] : [
  40. '.%1 table.%2,',
  41. '.%1 table.%2 > tr > td, .%1 table.%2 > tr > th,',
  42. '.%1 table.%2 > tbody > tr > td, .%1 table.%2 > tbody > tr > th,',
  43. '.%1 table.%2 > thead > tr > td, .%1 table.%2 > thead > tr > th,',
  44. '.%1 table.%2 > tfoot > tr > td, .%1 table.%2 > tfoot > tr > th',
  45. '{',
  46. 'border : #d3d3d3 1px dotted',
  47. '}'
  48. ] ).join( '' );
  49. cssStyleText = cssTemplate.replace( /%2/g, showBorderClassName ).replace( /%1/g, 'cke_show_borders ' );
  50. CKEDITOR.addCss( cssStyleText );
  51. },
  52. init: function( editor ) {
  53. var command = editor.addCommand( 'showborders', commandDefinition );
  54. command.canUndo = false;
  55. if ( editor.config.startupShowBorders !== false )
  56. command.setState( CKEDITOR.TRISTATE_ON );
  57. // Refresh the command on setData.
  58. editor.on( 'mode', function() {
  59. if ( command.state != CKEDITOR.TRISTATE_DISABLED )
  60. command.refresh( editor );
  61. }, null, null, 100 );
  62. // Refresh the command on wysiwyg frame reloads.
  63. editor.on( 'contentDom', function() {
  64. if ( command.state != CKEDITOR.TRISTATE_DISABLED )
  65. command.refresh( editor );
  66. } );
  67. editor.on( 'removeFormatCleanup', function( evt ) {
  68. var element = evt.data;
  69. if ( editor.getCommand( 'showborders' ).state == CKEDITOR.TRISTATE_ON && element.is( 'table' ) && ( !element.hasAttribute( 'border' ) || parseInt( element.getAttribute( 'border' ), 10 ) <= 0 ) )
  70. element.addClass( showBorderClassName );
  71. } );
  72. },
  73. afterInit: function( editor ) {
  74. var dataProcessor = editor.dataProcessor,
  75. dataFilter = dataProcessor && dataProcessor.dataFilter,
  76. htmlFilter = dataProcessor && dataProcessor.htmlFilter;
  77. if ( dataFilter ) {
  78. dataFilter.addRules( {
  79. elements: {
  80. 'table': function( element ) {
  81. var attributes = element.attributes,
  82. cssClass = attributes[ 'class' ],
  83. border = parseInt( attributes.border, 10 );
  84. if ( ( !border || border <= 0 ) && ( !cssClass || cssClass.indexOf( showBorderClassName ) == -1 ) )
  85. attributes[ 'class' ] = ( cssClass || '' ) + ' ' + showBorderClassName;
  86. }
  87. }
  88. } );
  89. }
  90. if ( htmlFilter ) {
  91. htmlFilter.addRules( {
  92. elements: {
  93. 'table': function( table ) {
  94. var attributes = table.attributes,
  95. cssClass = attributes[ 'class' ];
  96. cssClass && ( attributes[ 'class' ] = cssClass.replace( showBorderClassName, '' ).replace( /\s{2}/, ' ' ).replace( /^\s+|\s+$/, '' ) );
  97. }
  98. }
  99. } );
  100. }
  101. }
  102. } );
  103. // Table dialog must be aware of it.
  104. CKEDITOR.on( 'dialogDefinition', function( ev ) {
  105. var dialogName = ev.data.name;
  106. if ( dialogName == 'table' || dialogName == 'tableProperties' ) {
  107. var dialogDefinition = ev.data.definition,
  108. infoTab = dialogDefinition.getContents( 'info' ),
  109. borderField = infoTab.get( 'txtBorder' ),
  110. originalCommit = borderField.commit;
  111. borderField.commit = CKEDITOR.tools.override( originalCommit, function( org ) {
  112. return function( data, selectedTable ) {
  113. org.apply( this, arguments );
  114. var value = parseInt( this.getValue(), 10 );
  115. selectedTable[ ( !value || value <= 0 ) ? 'addClass' : 'removeClass' ]( showBorderClassName );
  116. };
  117. } );
  118. var advTab = dialogDefinition.getContents( 'advanced' ),
  119. classField = advTab && advTab.get( 'advCSSClasses' );
  120. if ( classField ) {
  121. classField.setup = CKEDITOR.tools.override( classField.setup, function( originalSetup ) {
  122. return function() {
  123. originalSetup.apply( this, arguments );
  124. this.setValue( this.getValue().replace( /cke_show_border/, '' ) );
  125. };
  126. } );
  127. classField.commit = CKEDITOR.tools.override( classField.commit, function( originalCommit ) {
  128. return function( data, element ) {
  129. originalCommit.apply( this, arguments );
  130. if ( !parseInt( element.getAttribute( 'border' ), 10 ) )
  131. element.addClass( 'cke_show_border' );
  132. };
  133. } );
  134. }
  135. }
  136. } );
  137. } )();
  138. /**
  139. * Whether to automatically enable the "show borders" command when the editor loads.
  140. *
  141. * config.startupShowBorders = false;
  142. *
  143. * @cfg {Boolean} [startupShowBorders=true]
  144. * @member CKEDITOR.config
  145. */