plugin.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  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. CKEDITOR.plugins.add( 'format', {
  6. requires: 'richcombo',
  7. // jscs:disable maximumLineLength
  8. 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%
  9. // jscs:enable maximumLineLength
  10. init: function( editor ) {
  11. if ( editor.blockless )
  12. return;
  13. var config = editor.config,
  14. lang = editor.lang.format;
  15. // Gets the list of tags from the settings.
  16. var tags = config.format_tags.split( ';' );
  17. // Create style objects for all defined styles.
  18. var styles = {},
  19. stylesCount = 0,
  20. allowedContent = [];
  21. for ( var i = 0; i < tags.length; i++ ) {
  22. var tag = tags[ i ];
  23. var style = new CKEDITOR.style( config[ 'format_' + tag ] );
  24. if ( !editor.filter.customConfig || editor.filter.check( style ) ) {
  25. stylesCount++;
  26. styles[ tag ] = style;
  27. styles[ tag ]._.enterMode = editor.config.enterMode;
  28. allowedContent.push( style );
  29. }
  30. }
  31. // Hide entire combo when all formats are rejected.
  32. if ( stylesCount === 0 )
  33. return;
  34. editor.ui.addRichCombo( 'Format', {
  35. label: lang.label,
  36. title: lang.panelTitle,
  37. toolbar: 'styles,20',
  38. allowedContent: allowedContent,
  39. panel: {
  40. css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
  41. multiSelect: false,
  42. attributes: { 'aria-label': lang.panelTitle }
  43. },
  44. init: function() {
  45. this.startGroup( lang.panelTitle );
  46. for ( var tag in styles ) {
  47. var label = lang[ 'tag_' + tag ];
  48. // Add the tag entry to the panel list.
  49. this.add( tag, styles[ tag ].buildPreview( label ), label );
  50. }
  51. },
  52. onClick: function( value ) {
  53. editor.focus();
  54. editor.fire( 'saveSnapshot' );
  55. var style = styles[ value ],
  56. elementPath = editor.elementPath();
  57. editor[ style.checkActive( elementPath, editor ) ? 'removeStyle' : 'applyStyle' ]( style );
  58. // Save the undo snapshot after all changes are affected. (#4899)
  59. setTimeout( function() {
  60. editor.fire( 'saveSnapshot' );
  61. }, 0 );
  62. },
  63. onRender: function() {
  64. editor.on( 'selectionChange', function( ev ) {
  65. var currentTag = this.getValue(),
  66. elementPath = ev.data.path;
  67. this.refresh();
  68. for ( var tag in styles ) {
  69. if ( styles[ tag ].checkActive( elementPath, editor ) ) {
  70. if ( tag != currentTag )
  71. this.setValue( tag, editor.lang.format[ 'tag_' + tag ] );
  72. return;
  73. }
  74. }
  75. // If no styles match, just empty it.
  76. this.setValue( '' );
  77. }, this );
  78. },
  79. onOpen: function() {
  80. this.showAll();
  81. for ( var name in styles ) {
  82. var style = styles[ name ];
  83. // Check if that style is enabled in activeFilter.
  84. if ( !editor.activeFilter.check( style ) )
  85. this.hideItem( name );
  86. }
  87. },
  88. refresh: function() {
  89. var elementPath = editor.elementPath();
  90. if ( !elementPath )
  91. return;
  92. // Check if element path contains 'p' element.
  93. if ( !elementPath.isContextFor( 'p' ) ) {
  94. this.setState( CKEDITOR.TRISTATE_DISABLED );
  95. return;
  96. }
  97. // Check if there is any available style.
  98. for ( var name in styles ) {
  99. if ( editor.activeFilter.check( styles[ name ] ) )
  100. return;
  101. }
  102. this.setState( CKEDITOR.TRISTATE_DISABLED );
  103. }
  104. } );
  105. }
  106. } );
  107. /**
  108. * A list of semicolon-separated style names (by default: tags) representing
  109. * the style definition for each entry to be displayed in the Format drop-down list
  110. * in the toolbar. Each entry must have a corresponding configuration in a
  111. * setting named `'format_(tagName)'`. For example, the `'p'` entry has its
  112. * definition taken from [config.format_p](#!/api/CKEDITOR.config-cfg-format_p).
  113. *
  114. * config.format_tags = 'p;h2;h3;pre';
  115. *
  116. * @cfg {String} [format_tags='p;h1;h2;h3;h4;h5;h6;pre;address;div']
  117. * @member CKEDITOR.config
  118. */
  119. CKEDITOR.config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
  120. /**
  121. * The style definition to be used to apply the `Normal` format.
  122. *
  123. * config.format_p = { element: 'p', attributes: { 'class': 'normalPara' } };
  124. *
  125. * @cfg {Object} [format_p={ element: 'p' }]
  126. * @member CKEDITOR.config
  127. */
  128. CKEDITOR.config.format_p = { element: 'p' };
  129. /**
  130. * The style definition to be used to apply the `Normal (DIV)` format.
  131. *
  132. * config.format_div = { element: 'div', attributes: { 'class': 'normalDiv' } };
  133. *
  134. * @cfg {Object} [format_div={ element: 'div' }]
  135. * @member CKEDITOR.config
  136. */
  137. CKEDITOR.config.format_div = { element: 'div' };
  138. /**
  139. * The style definition to be used to apply the `Formatted` format.
  140. *
  141. * config.format_pre = { element: 'pre', attributes: { 'class': 'code' } };
  142. *
  143. * @cfg {Object} [format_pre={ element: 'pre' }]
  144. * @member CKEDITOR.config
  145. */
  146. CKEDITOR.config.format_pre = { element: 'pre' };
  147. /**
  148. * The style definition to be used to apply the `Address` format.
  149. *
  150. * config.format_address = { element: 'address', attributes: { 'class': 'styledAddress' } };
  151. *
  152. * @cfg {Object} [format_address={ element: 'address' }]
  153. * @member CKEDITOR.config
  154. */
  155. CKEDITOR.config.format_address = { element: 'address' };
  156. /**
  157. * The style definition to be used to apply the `Heading 1` format.
  158. *
  159. * config.format_h1 = { element: 'h1', attributes: { 'class': 'contentTitle1' } };
  160. *
  161. * @cfg {Object} [format_h1={ element: 'h1' }]
  162. * @member CKEDITOR.config
  163. */
  164. CKEDITOR.config.format_h1 = { element: 'h1' };
  165. /**
  166. * The style definition to be used to apply the `Heading 2` format.
  167. *
  168. * config.format_h2 = { element: 'h2', attributes: { 'class': 'contentTitle2' } };
  169. *
  170. * @cfg {Object} [format_h2={ element: 'h2' }]
  171. * @member CKEDITOR.config
  172. */
  173. CKEDITOR.config.format_h2 = { element: 'h2' };
  174. /**
  175. * The style definition to be used to apply the `Heading 3` format.
  176. *
  177. * config.format_h3 = { element: 'h3', attributes: { 'class': 'contentTitle3' } };
  178. *
  179. * @cfg {Object} [format_h3={ element: 'h3' }]
  180. * @member CKEDITOR.config
  181. */
  182. CKEDITOR.config.format_h3 = { element: 'h3' };
  183. /**
  184. * The style definition to be used to apply the `Heading 4` format.
  185. *
  186. * config.format_h4 = { element: 'h4', attributes: { 'class': 'contentTitle4' } };
  187. *
  188. * @cfg {Object} [format_h4={ element: 'h4' }]
  189. * @member CKEDITOR.config
  190. */
  191. CKEDITOR.config.format_h4 = { element: 'h4' };
  192. /**
  193. * The style definition to be used to apply the `Heading 5` format.
  194. *
  195. * config.format_h5 = { element: 'h5', attributes: { 'class': 'contentTitle5' } };
  196. *
  197. * @cfg {Object} [format_h5={ element: 'h5' }]
  198. * @member CKEDITOR.config
  199. */
  200. CKEDITOR.config.format_h5 = { element: 'h5' };
  201. /**
  202. * The style definition to be used to apply the `Heading 6` format.
  203. *
  204. * config.format_h6 = { element: 'h6', attributes: { 'class': 'contentTitle6' } };
  205. *
  206. * @cfg {Object} [format_h6={ element: 'h6' }]
  207. * @member CKEDITOR.config
  208. */
  209. CKEDITOR.config.format_h6 = { element: 'h6' };