x[]x
+ // Result:x[]x
+ if ( startBoundary && endBoundary ) { + bm = range.createBookmark(); + // Replace the element with its children (TODO element.replaceWithChildren). + while ( ( node = matching.getFirst() ) ) { + node.insertBefore( matching ); + } + matching.remove(); + range.moveToBookmark( bm ); + + // If we are at the boundary of the style element, move out and copy nested styles/elements. + } else if ( startBoundary || endBoundary ) { + range.moveToPosition( matching, startBoundary ? CKEDITOR.POSITION_BEFORE_START : CKEDITOR.POSITION_AFTER_END ); + cloneSubtreeIntoRange( range, path.elements.slice(), matching ); + } else { + // Split the element and clone the elements that were in the path + // (between the startContainer and the matching element) + // into the new place. + range.splitElement( matching ); + range.moveToPosition( matching, CKEDITOR.POSITION_AFTER_END ); + cloneSubtreeIntoRange( range, path.elements.slice(), matching ); + } + + editor.getSelection().selectRanges( [ range ] ); + } + } else { + editor.removeStyle( previousStyle ); + } + } + + editor[ previousValue == value ? 'removeStyle' : 'applyStyle' ]( style ); + + editor.fire( 'saveSnapshot' ); + }, + + onRender: function() { + editor.on( 'selectionChange', function( ev ) { + var currentValue = this.getValue(); + + var elementPath = ev.data.path, + elements = elementPath.elements; + + // For each element into the elements path. + for ( var i = 0, element; i < elements.length; i++ ) { + element = elements[ i ]; + + // Check if the element is removable by any of + // the styles. + for ( var value in styles ) { + if ( styles[ value ].checkElementMatch( element, true, editor ) ) { + if ( value != currentValue ) + this.setValue( value ); + return; + } + } + } + + // If no styles match, just empty it. + this.setValue( '', defaultLabel ); + }, this ); + }, + + refresh: function() { + if ( !editor.activeFilter.check( style ) ) + this.setState( CKEDITOR.TRISTATE_DISABLED ); + } + } ); + } + + // Clones the subtree between subtreeStart (exclusive) and the + // leaf (inclusive) and inserts it into the range. + // + // @param range + // @param {CKEDITOR.dom.element[]} elements Elements path in the standard order: leaf -> root. + // @param {CKEDITOR.dom.element/null} substreeStart The start of the subtree. + // If null, then the leaf belongs to the subtree. + function cloneSubtreeIntoRange( range, elements, subtreeStart ) { + var current = elements.pop(); + if ( !current ) { + return; + } + // Rewind the elements array up to the subtreeStart and then start the real cloning. + if ( subtreeStart ) { + return cloneSubtreeIntoRange( range, elements, current.equals( subtreeStart ) ? null : subtreeStart ); + } + + var clone = current.clone(); + range.insertNode( clone ); + range.moveToPosition( clone, CKEDITOR.POSITION_AFTER_START ); + + cloneSubtreeIntoRange( range, elements ); + } + + CKEDITOR.plugins.add( 'font', { + requires: 'richcombo', + // jscs:disable maximumLineLength + lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,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,oc,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% + // jscs:enable maximumLineLength + init: function( editor ) { + var config = editor.config; + + addCombo( editor, 'Font', 'family', editor.lang.font, config.font_names, config.font_defaultLabel, config.font_style, 30 ); + addCombo( editor, 'FontSize', 'size', editor.lang.font.fontSize, config.fontSize_sizes, config.fontSize_defaultLabel, config.fontSize_style, 40 ); + } + } ); +} )(); + +/** + * The list of fonts names to be displayed in the Font combo in the toolbar. + * Entries are separated by semi-colons (`';'`), while it's possible to have more + * than one font for each entry, in the HTML way (separated by comma). + * + * A display name may be optionally defined by prefixing the entries with the + * name and the slash character. For example, `'Arial/Arial, Helvetica, sans-serif'` + * will be displayed as `'Arial'` in the list, but will be outputted as + * `'Arial, Helvetica, sans-serif'`. + * + * config.font_names = + * 'Arial/Arial, Helvetica, sans-serif;' + + * 'Times New Roman/Times New Roman, Times, serif;' + + * 'Verdana'; + * + * config.font_names = 'Arial;Times New Roman;Verdana'; + * + * @cfg {String} [font_names=see source] + * @member CKEDITOR.config + */ +CKEDITOR.config.font_names = 'Arial/Arial, Helvetica, sans-serif;' + + 'Comic Sans MS/Comic Sans MS, cursive;' + + 'Courier New/Courier New, Courier, monospace;' + + 'Georgia/Georgia, serif;' + + 'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' + + 'Tahoma/Tahoma, Geneva, sans-serif;' + + 'Times New Roman/Times New Roman, Times, serif;' + + 'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' + + 'Verdana/Verdana, Geneva, sans-serif'; + +/** + * The text to be displayed in the Font combo is none of the available values + * matches the current cursor position or text selection. + * + * // If the default site font is Arial, we may making it more explicit to the end user. + * config.font_defaultLabel = 'Arial'; + * + * @cfg {String} [font_defaultLabel=''] + * @member CKEDITOR.config + */ +CKEDITOR.config.font_defaultLabel = ''; + +/** + * The style definition to be used to apply the font in the text. + * + * // This is actually the default value for it. + * config.font_style = { + * element: 'span', + * styles: { 'font-family': '#(family)' }, + * overrides: [ { element: 'font', attributes: { 'face': null } } ] + * }; + * + * @cfg {Object} [font_style=see example] + * @member CKEDITOR.config + */ +CKEDITOR.config.font_style = { + element: 'span', + styles: { 'font-family': '#(family)' }, + overrides: [ { + element: 'font', attributes: { 'face': null } + } ] +}; + +/** + * The list of fonts size to be displayed in the Font Size combo in the + * toolbar. Entries are separated by semi-colons (`';'`). + * + * Any kind of "CSS like" size can be used, like `'12px'`, `'2.3em'`, `'130%'`, + * `'larger'` or `'x-small'`. + * + * A display name may be optionally defined by prefixing the entries with the + * name and the slash character. For example, `'Bigger Font/14px'` will be + * displayed as `'Bigger Font'` in the list, but will be outputted as `'14px'`. + * + * config.fontSize_sizes = '16/16px;24/24px;48/48px;'; + * + * config.fontSize_sizes = '12px;2.3em;130%;larger;x-small'; + * + * config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small'; + * + * @cfg {String} [fontSize_sizes=see source] + * @member CKEDITOR.config + */ +CKEDITOR.config.fontSize_sizes = '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'; + +/** + * The text to be displayed in the Font Size combo is none of the available + * values matches the current cursor position or text selection. + * + * // If the default site font size is 12px, we may making it more explicit to the end user. + * config.fontSize_defaultLabel = '12px'; + * + * @cfg {String} [fontSize_defaultLabel=''] + * @member CKEDITOR.config + */ +CKEDITOR.config.fontSize_defaultLabel = ''; + +/** + * The style definition to be used to apply the font size in the text. + * + * // This is actually the default value for it. + * config.fontSize_style = { + * element: 'span', + * styles: { 'font-size': '#(size)' }, + * overrides: [ { element: 'font', attributes: { 'size': null } } ] + * }; + * + * @cfg {Object} [fontSize_style=see example] + * @member CKEDITOR.config + */ +CKEDITOR.config.fontSize_style = { + element: 'span', + styles: { 'font-size': '#(size)' }, + overrides: [ { + element: 'font', attributes: { 'size': null } + } ] +};