plugin.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  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 "showblocks" plugin. Enable it will make all block level
  7. * elements being decorated with a border and the element name
  8. * displayed on the left-right corner.
  9. */
  10. ( function() {
  11. 'use strict';
  12. var commandDefinition = {
  13. readOnly: 1,
  14. preserveState: true,
  15. editorFocus: false,
  16. exec: function( editor ) {
  17. this.toggleState();
  18. this.refresh( editor );
  19. },
  20. refresh: function( editor ) {
  21. if ( editor.document ) {
  22. // Show blocks turns inactive after editor loses focus when in inline.
  23. var showBlocks = ( this.state == CKEDITOR.TRISTATE_ON && ( editor.elementMode != CKEDITOR.ELEMENT_MODE_INLINE || editor.focusManager.hasFocus ) );
  24. var funcName = showBlocks ? 'attachClass' : 'removeClass';
  25. editor.editable()[ funcName ]( 'cke_show_blocks' );
  26. }
  27. }
  28. };
  29. CKEDITOR.plugins.add( 'showblocks', {
  30. // jscs:disable maximumLineLength
  31. lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
  32. // jscs:enable maximumLineLength
  33. icons: 'showblocks,showblocks-rtl', // %REMOVE_LINE_CORE%
  34. hidpi: true, // %REMOVE_LINE_CORE%
  35. onLoad: function() {
  36. var tags = [ 'p', 'div', 'pre', 'address', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
  37. cssStd, cssImg, cssLtr, cssRtl,
  38. path = CKEDITOR.getUrl( this.path ),
  39. // #10884 don't apply showblocks styles to non-editable elements and chosen ones.
  40. // IE8 does not support :not() pseudoclass, so we need to reset showblocks rather
  41. // than 'prevent' its application. We do that by additional rules.
  42. supportsNotPseudoclass = !( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ),
  43. notDisabled = supportsNotPseudoclass ? ':not([contenteditable=false]):not(.cke_show_blocks_off)' : '',
  44. tag, trailing;
  45. cssStd = cssImg = cssLtr = cssRtl = '';
  46. while ( ( tag = tags.pop() ) ) {
  47. trailing = tags.length ? ',' : '';
  48. cssStd += '.cke_show_blocks ' + tag + notDisabled + trailing;
  49. cssLtr += '.cke_show_blocks.cke_contents_ltr ' + tag + notDisabled + trailing;
  50. cssRtl += '.cke_show_blocks.cke_contents_rtl ' + tag + notDisabled + trailing;
  51. cssImg += '.cke_show_blocks ' + tag + notDisabled + '{' +
  52. 'background-image:url(' + CKEDITOR.getUrl( path + 'images/block_' + tag + '.png' ) + ')' +
  53. '}';
  54. }
  55. // .cke_show_blocks p { ... }
  56. cssStd += '{' +
  57. 'background-repeat:no-repeat;' +
  58. 'border:1px dotted gray;' +
  59. 'padding-top:8px' +
  60. '}';
  61. // .cke_show_blocks.cke_contents_ltr p { ... }
  62. cssLtr += '{' +
  63. 'background-position:top left;' +
  64. 'padding-left:8px' +
  65. '}';
  66. // .cke_show_blocks.cke_contents_rtl p { ... }
  67. cssRtl += '{' +
  68. 'background-position:top right;' +
  69. 'padding-right:8px' +
  70. '}';
  71. CKEDITOR.addCss( cssStd.concat( cssImg, cssLtr, cssRtl ) );
  72. // [IE8] Reset showblocks styles for non-editables and chosen elements, because
  73. // it could not be done using :not() pseudoclass (#10884).
  74. if ( !supportsNotPseudoclass ) {
  75. CKEDITOR.addCss(
  76. '.cke_show_blocks [contenteditable=false],.cke_show_blocks .cke_show_blocks_off{' +
  77. 'border:none;' +
  78. 'padding-top:0;' +
  79. 'background-image:none' +
  80. '}' +
  81. '.cke_show_blocks.cke_contents_rtl [contenteditable=false],.cke_show_blocks.cke_contents_rtl .cke_show_blocks_off{' +
  82. 'padding-right:0' +
  83. '}' +
  84. '.cke_show_blocks.cke_contents_ltr [contenteditable=false],.cke_show_blocks.cke_contents_ltr .cke_show_blocks_off{' +
  85. 'padding-left:0' +
  86. '}'
  87. );
  88. }
  89. },
  90. init: function( editor ) {
  91. if ( editor.blockless )
  92. return;
  93. var command = editor.addCommand( 'showblocks', commandDefinition );
  94. command.canUndo = false;
  95. if ( editor.config.startupOutlineBlocks )
  96. command.setState( CKEDITOR.TRISTATE_ON );
  97. editor.ui.addButton && editor.ui.addButton( 'ShowBlocks', {
  98. label: editor.lang.showblocks.toolbar,
  99. command: 'showblocks',
  100. toolbar: 'tools,20'
  101. } );
  102. // Refresh the command on setData.
  103. editor.on( 'mode', function() {
  104. if ( command.state != CKEDITOR.TRISTATE_DISABLED )
  105. command.refresh( editor );
  106. } );
  107. // Refresh the command on focus/blur in inline.
  108. if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE ) {
  109. editor.on( 'focus', onFocusBlur );
  110. editor.on( 'blur', onFocusBlur );
  111. }
  112. // Refresh the command on setData.
  113. editor.on( 'contentDom', function() {
  114. if ( command.state != CKEDITOR.TRISTATE_DISABLED )
  115. command.refresh( editor );
  116. } );
  117. function onFocusBlur() {
  118. command.refresh( editor );
  119. }
  120. }
  121. } );
  122. } )();
  123. /**
  124. * Whether to automaticaly enable the show block" command when the editor loads.
  125. *
  126. * config.startupOutlineBlocks = true;
  127. *
  128. * @cfg {Boolean} [startupOutlineBlocks=false]
  129. * @member CKEDITOR.config
  130. */