2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
11 * Read more in the {@link CKEDITOR.style} class documentation.
14 * @property {Number} [=1]
17 CKEDITOR
.STYLE_BLOCK
= 1;
22 * Read more in the {@link CKEDITOR.style} class documentation.
25 * @property {Number} [=2]
28 CKEDITOR
.STYLE_INLINE
= 2;
33 * Read more in the {@link CKEDITOR.style} class documentation.
36 * @property {Number} [=3]
39 CKEDITOR
.STYLE_OBJECT
= 3;
43 address: 1, div: 1, h1: 1, h2: 1, h3: 1, h4: 1, h5: 1, h6: 1, p: 1,
44 pre: 1, section: 1, header: 1, footer: 1, nav: 1, article: 1, aside: 1, figure: 1,
45 dialog: 1, hgroup: 1, time: 1, meter: 1, menu: 1, command: 1, keygen: 1, output: 1,
46 progress: 1, details: 1, datagrid: 1, datalist: 1
50 a: 1, blockquote: 1, embed: 1, hr: 1, img: 1, li: 1, object: 1, ol: 1, table: 1, td: 1,
51 tr: 1, th: 1, ul: 1, dl: 1, dt: 1, dd: 1, form: 1, audio: 1, video: 1
54 var semicolonFixRegex
= /\s*(?:;\s*|$)/,
55 varRegex
= /#\((.+?)\)/g;
57 var notBookmark
= CKEDITOR
.dom
.walker
.bookmark( 0, 1 ),
58 nonWhitespaces
= CKEDITOR
.dom
.walker
.whitespaces( 1 );
61 * A class representing a style instance for the specific style definition.
62 * In this approach, a style is a set of properties, like attributes and styles,
63 * which can be applied to and removed from a {@link CKEDITOR.dom.selection selection} through
64 * {@link CKEDITOR.editor editor} methods: {@link CKEDITOR.editor#applyStyle} and {@link CKEDITOR.editor#removeStyle},
67 * Three default style types are available: {@link CKEDITOR#STYLE_BLOCK STYLE_BLOCK}, {@link CKEDITOR#STYLE_INLINE STYLE_INLINE},
68 * and {@link CKEDITOR#STYLE_OBJECT STYLE_OBJECT}. Based on its type, a style heavily changes its behavior.
69 * You can read more about style types in the [Style Types section of the Styles guide](#!/guide/dev_styles-section-style-types).
71 * It is possible to define a custom style type by subclassing this class by using the {@link #addCustomHandler} method.
72 * However, because of great complexity of the styles handling job, it is only possible in very specific cases.
78 * // Define a block style.
79 * var style = new CKEDITOR.style( { element: 'h1' } );
81 * // Considering the following selection:
82 * // <p>Foo</p><p>Bar^</p>
84 * editor.applyStyle( style );
86 * // <p>Foo</p><h1>Bar^</h1>
87 * style.checkActive( editor.elementPath(), editor ); // -> true
89 * editor.removeStyle( style );
91 * // <p>Foo</p><p>Bar^</p>
93 * style.checkActive( editor.elementPath(), editor ); // -> false
97 * // Define an object style.
98 * var style = new CKEDITOR.style( { element: 'img', attributes: { 'class': 'foo' } } );
100 * // Considering the following selection:
101 * // <p><img src="bar.png" alt="" />Foo^</p>
103 * editor.applyStyle( style );
104 * // Will not apply the style, because the image is not selected.
105 * // You can check if a style can be applied on the current selection with:
106 * style.checkApplicable( editor.elementPath(), editor ); // -> false
108 * // Considering the following selection:
109 * // <p>[<img src="bar.png" alt="" />]Foo</p>
111 * editor.applyStyle( style );
113 * // <p>[<img src="bar.png" alt="" class="foo" />]Foo</p>
115 * ### API changes introduced in CKEditor 4.4
117 * Before CKEditor 4.4 all style instances had no access at all to the {@link CKEDITOR.editor editor instance}
118 * within which the style is used. Neither the style constructor, nor style methods were requiring
119 * passing the editor instance which made styles independent of the editor and hence its settings and state.
120 * This design decision came from CKEditor 3; it started causing problems and became an unsolvable obstacle for
121 * the {@link CKEDITOR.style.customHandlers.widget widget style handler} which we introduced in CKEditor 4.4.
123 * There were two possible solutions. Passing an editor instance to the style constructor or to every method.
124 * The first approach would be clean, however, having in mind the backward compatibility, we did not decide
125 * to go for it. It would bind the style to one editor instance, making it unusable with other editor instances.
126 * That could break many implementations reusing styles between editors. Therefore, we decided to take the longer
127 * but safer path — the editor instance became an argument for nearly all style methods, however,
128 * for backward compatibility reasons, all these methods will work without it. Even the newly
129 * implemented {@link CKEDITOR.style.customHandlers.widget widget style handler}'s methods will not fail,
130 * although they will also not work by aborting at an early stage.
132 * Therefore, you can safely upgrade to CKEditor 4.4 even if you use style methods without providing
133 * the editor instance. You must only align your code if your implementation should handle widget styles
134 * or any other custom style handler. Of course, we recommend doing this in any case to avoid potential
135 * problems in the future.
138 * @constructor Creates a style class instance.
139 * @param styleDefinition
140 * @param variablesValues
142 CKEDITOR
.style = function( styleDefinition
, variablesValues
) {
143 if ( typeof styleDefinition
.type
== 'string' )
144 return new CKEDITOR
.style
.customHandlers
[ styleDefinition
.type
]( styleDefinition
);
146 // Inline style text as attribute should be converted
148 var attrs
= styleDefinition
.attributes
;
149 if ( attrs
&& attrs
.style
) {
150 styleDefinition
.styles
= CKEDITOR
.tools
.extend( {},
151 styleDefinition
.styles
, CKEDITOR
.tools
.parseCssText( attrs
.style
) );
155 if ( variablesValues
) {
156 styleDefinition
= CKEDITOR
.tools
.clone( styleDefinition
);
158 replaceVariables( styleDefinition
.attributes
, variablesValues
);
159 replaceVariables( styleDefinition
.styles
, variablesValues
);
162 var element
= this.element
= styleDefinition
.element
?
164 typeof styleDefinition
.element
== 'string' ?
165 styleDefinition
.element
.toLowerCase() : styleDefinition
.element
168 this.type
= styleDefinition
.type
||
170 blockElements
[ element
] ? CKEDITOR
.STYLE_BLOCK :
171 objectElements
[ element
] ? CKEDITOR
.STYLE_OBJECT :
172 CKEDITOR
.STYLE_INLINE
175 // If the 'element' property is an object with a set of possible element, it will be applied like an object style: only to existing elements
176 if ( typeof this.element
== 'object' )
177 this.type
= CKEDITOR
.STYLE_OBJECT
;
180 definition: styleDefinition
184 CKEDITOR
.style
.prototype = {
186 * Applies the style on the editor's current selection.
188 * Before the style is applied, the method checks if the {@link #checkApplicable style is applicable}.
190 * **Note:** The recommended way of applying the style is by using the
191 * {@link CKEDITOR.editor#applyStyle} method, which is a shorthand for this method.
193 * @param {CKEDITOR.editor/CKEDITOR.dom.document} editor The editor instance in which
194 * the style will be applied.
195 * A {@link CKEDITOR.dom.document} instance is accepted for backward compatibility
196 * reasons, although since CKEditor 4.4 this type of argument is deprecated. Read more about
197 * the signature change in the {@link CKEDITOR.style} documentation.
199 apply: function( editor
) {
200 // Backward compatibility.
201 if ( editor
instanceof CKEDITOR
.dom
.document
)
202 return applyStyleOnSelection
.call( this, editor
.getSelection() );
204 if ( this.checkApplicable( editor
.elementPath(), editor
) ) {
205 var initialEnterMode
= this._
.enterMode
;
207 // See comment in removeStyle.
208 if ( !initialEnterMode
)
209 this._
.enterMode
= editor
.activeEnterMode
;
210 applyStyleOnSelection
.call( this, editor
.getSelection(), 0, editor
);
211 this._
.enterMode
= initialEnterMode
;
216 * Removes the style from the editor's current selection.
218 * Before the style is applied, the method checks if {@link #checkApplicable style could be applied}.
220 * **Note:** The recommended way of removing the style is by using the
221 * {@link CKEDITOR.editor#removeStyle} method, which is a shorthand for this method.
223 * @param {CKEDITOR.editor/CKEDITOR.dom.document} editor The editor instance in which
224 * the style will be removed.
225 * A {@link CKEDITOR.dom.document} instance is accepted for backward compatibility
226 * reasons, although since CKEditor 4.4 this type of argument is deprecated. Read more about
227 * the signature change in the {@link CKEDITOR.style} documentation.
229 remove: function( editor
) {
230 // Backward compatibility.
231 if ( editor
instanceof CKEDITOR
.dom
.document
)
232 return applyStyleOnSelection
.call( this, editor
.getSelection(), 1 );
234 if ( this.checkApplicable( editor
.elementPath(), editor
) ) {
235 var initialEnterMode
= this._
.enterMode
;
237 // Before CKEditor 4.4 style knew nothing about editor, so in order to provide enterMode
238 // which should be used developers were forced to hack the style object (see http://dev.ckeditor.com/ticket/10190).
239 // Since CKEditor 4.4 style knows about editor (at least when it's being applied/removed), but we
240 // use _.enterMode for backward compatibility with those hacks.
241 // Note: we should not change style's enter mode if it was already set.
242 if ( !initialEnterMode
)
243 this._
.enterMode
= editor
.activeEnterMode
;
244 applyStyleOnSelection
.call( this, editor
.getSelection(), 1, editor
);
245 this._
.enterMode
= initialEnterMode
;
250 * Applies the style on the provided range. Unlike {@link #apply} this
251 * method does not take care of setting the selection, however, the range
252 * is updated to the correct place.
254 * **Note:** If you want to apply the style on the editor selection,
255 * you probably want to use {@link CKEDITOR.editor#applyStyle}.
257 * @param {CKEDITOR.dom.range} range
258 * @param {CKEDITOR.editor} editor The editor instance. Required argument since
259 * CKEditor 4.4. The style system will work without it, but it is highly
260 * recommended to provide it for integration with all features. Read more about
261 * the signature change in the {@link CKEDITOR.style} documentation.
263 applyToRange: function( range
) {
265 this.type
== CKEDITOR
.STYLE_INLINE
? applyInlineStyle :
266 this.type
== CKEDITOR
.STYLE_BLOCK
? applyBlockStyle :
267 this.type
== CKEDITOR
.STYLE_OBJECT
? applyObjectStyle :
270 return this.applyToRange( range
);
274 * Removes the style from the provided range. Unlike {@link #remove} this
275 * method does not take care of setting the selection, however, the range
276 * is updated to the correct place.
278 * **Note:** If you want to remove the style from the editor selection,
279 * you probably want to use {@link CKEDITOR.editor#removeStyle}.
281 * @param {CKEDITOR.dom.range} range
282 * @param {CKEDITOR.editor} editor The editor instance. Required argument since
283 * CKEditor 4.4. The style system will work without it, but it is highly
284 * recommended to provide it for integration with all features. Read more about
285 * the signature change in the {@link CKEDITOR.style} documentation.
287 removeFromRange: function( range
) {
288 this.removeFromRange
=
289 this.type
== CKEDITOR
.STYLE_INLINE
? removeInlineStyle :
290 this.type
== CKEDITOR
.STYLE_BLOCK
? removeBlockStyle :
291 this.type
== CKEDITOR
.STYLE_OBJECT
? removeObjectStyle :
294 return this.removeFromRange( range
);
298 * Applies the style to the element. This method bypasses all checks
299 * and applies the style attributes directly on the provided element. Use with caution.
301 * See {@link CKEDITOR.editor#applyStyle}.
303 * @param {CKEDITOR.dom.element} element
304 * @param {CKEDITOR.editor} editor The editor instance. Required argument since
305 * CKEditor 4.4. The style system will work without it, but it is highly
306 * recommended to provide it for integration with all features. Read more about
307 * the signature change in the {@link CKEDITOR.style} documentation.
309 applyToObject: function( element
) {
310 setupElement( element
, this );
314 * Gets the style state inside the elements path.
316 * @param {CKEDITOR.dom.elementPath} elementPath
317 * @param {CKEDITOR.editor} editor The editor instance. Required argument since
318 * CKEditor 4.4. The style system will work without it, but it is highly
319 * recommended to provide it for integration with all features. Read more about
320 * the signature change in the {@link CKEDITOR.style} documentation.
321 * @returns {Boolean} `true` if the element is active in the elements path.
323 checkActive: function( elementPath
, editor
) {
324 switch ( this.type
) {
325 case CKEDITOR
.STYLE_BLOCK:
326 return this.checkElementRemovable( elementPath
.block
|| elementPath
.blockLimit
, true, editor
);
328 case CKEDITOR
.STYLE_OBJECT:
329 case CKEDITOR
.STYLE_INLINE:
331 var elements
= elementPath
.elements
;
333 for ( var i
= 0, element
; i
< elements
.length
; i
++ ) {
334 element
= elements
[ i
];
336 if ( this.type
== CKEDITOR
.STYLE_INLINE
&& ( element
== elementPath
.block
|| element
== elementPath
.blockLimit
) )
339 if ( this.type
== CKEDITOR
.STYLE_OBJECT
) {
340 var name
= element
.getName();
341 if ( !( typeof this.element
== 'string' ? name
== this.element : name
in this.element
) )
345 if ( this.checkElementRemovable( element
, true, editor
) )
353 * Whether this style can be applied at the specified elements path.
355 * @param {CKEDITOR.dom.elementPath} elementPath The elements path to
356 * check the style against.
357 * @param {CKEDITOR.editor} editor The editor instance. Required argument since
358 * CKEditor 4.4. The style system will work without it, but it is highly
359 * recommended to provide it for integration with all features. Read more about
360 * the signature change in the {@link CKEDITOR.style} documentation.
361 * @param {CKEDITOR.filter} [filter] If defined, the style will be
362 * checked against this filter as well.
363 * @returns {Boolean} `true` if this style can be applied at the elements path.
365 checkApplicable: function( elementPath
, editor
, filter
) {
366 // Backward compatibility.
367 if ( editor
&& editor
instanceof CKEDITOR
.filter
)
370 if ( filter
&& !filter
.check( this ) )
373 switch ( this.type
) {
374 case CKEDITOR
.STYLE_OBJECT:
375 return !!elementPath
.contains( this.element
);
376 case CKEDITOR
.STYLE_BLOCK:
377 return !!elementPath
.blockLimit
.getDtd()[ this.element
];
384 * Checks if the element matches the current style definition.
386 * @param {CKEDITOR.dom.element} element
387 * @param {Boolean} fullMatch
388 * @param {CKEDITOR.editor} editor The editor instance. Required argument since
389 * CKEditor 4.4. The style system will work without it, but it is highly
390 * recommended to provide it for integration with all features. Read more about
391 * the signature change in the {@link CKEDITOR.style} documentation.
394 checkElementMatch: function( element
, fullMatch
) {
395 var def
= this._
.definition
;
397 if ( !element
|| !def
.ignoreReadonly
&& element
.isReadOnly() )
401 name
= element
.getName();
403 // If the element name is the same as the style name.
404 if ( typeof this.element
== 'string' ? name
== this.element : name
in this.element
) {
405 // If no attributes are defined in the element.
406 if ( !fullMatch
&& !element
.hasAttributes() )
409 attribs
= getAttributesForComparison( def
);
411 if ( attribs
._length
) {
412 for ( var attName
in attribs
) {
413 if ( attName
== '_length' )
416 var elementAttr
= element
.getAttribute( attName
) || '';
418 // Special treatment for 'style' attribute is required.
419 if ( attName
== 'style' ? compareCssText( attribs
[ attName
], elementAttr
) : attribs
[ attName
] == elementAttr
) {
422 } else if ( fullMatch
) {
437 * Checks if an element, or any of its attributes, is removable by the
438 * current style definition.
440 * @param {CKEDITOR.dom.element} element
441 * @param {Boolean} fullMatch
442 * @param {CKEDITOR.editor} editor The editor instance. Required argument since
443 * CKEditor 4.4. The style system will work without it, but it is highly
444 * recommended to provide it for integration with all features. Read more about
445 * the signature change in the {@link CKEDITOR.style} documentation.
448 checkElementRemovable: function( element
, fullMatch
, editor
) {
449 // Check element matches the style itself.
450 if ( this.checkElementMatch( element
, fullMatch
, editor
) )
453 // Check if the element matches the style overrides.
454 var override
= getOverrides( this )[ element
.getName() ];
456 var attribs
, attName
;
458 // If no attributes have been defined, remove the element.
459 if ( !( attribs
= override
.attributes
) )
462 for ( var i
= 0; i
< attribs
.length
; i
++ ) {
463 attName
= attribs
[ i
][ 0 ];
464 var actualAttrValue
= element
.getAttribute( attName
);
465 if ( actualAttrValue
) {
466 var attValue
= attribs
[ i
][ 1 ];
468 // Remove the attribute if:
469 // - The override definition value is null;
470 // - The override definition value is a string that
471 // matches the attribute value exactly.
472 // - The override definition value is a regex that
473 // has matches in the attribute value.
474 if ( attValue
=== null )
476 if ( typeof attValue
== 'string' ) {
477 if ( actualAttrValue
== attValue
)
479 } else if ( attValue
.test( actualAttrValue
) ) {
489 * Builds the preview HTML based on the styles definition.
491 * @param {String} [label] The label used in the style preview.
492 * @return {String} The HTML of preview.
494 buildPreview: function( label
) {
495 var styleDefinition
= this._
.definition
,
497 elementName
= styleDefinition
.element
;
499 // Avoid <bdo> in the preview.
500 if ( elementName
== 'bdo' )
501 elementName
= 'span';
503 html
= [ '<', elementName
];
505 // Assign all defined attributes.
506 var attribs
= styleDefinition
.attributes
;
508 for ( var att
in attribs
)
509 html
.push( ' ', att
, '="', attribs
[ att
], '"' );
512 // Assign the style attribute.
513 var cssStyle
= CKEDITOR
.style
.getStyleText( styleDefinition
);
515 html
.push( ' style="', cssStyle
, '"' );
517 html
.push( '>', ( label
|| styleDefinition
.name
), '</', elementName
, '>' );
519 return html
.join( '' );
523 * Returns the style definition.
528 getDefinition: function() {
529 return this._
.definition
;
533 * If defined (for example by {@link CKEDITOR.style#addCustomHandler custom style handler}), it returns
534 * the {@link CKEDITOR.filter.allowedContentRules allowed content rules} which should be added to the
535 * {@link CKEDITOR.filter} when enabling this style.
537 * **Note:** This method is not defined in the {@link CKEDITOR.style} class.
540 * @method toAllowedContentRules
541 * @param {CKEDITOR.editor} [editor] The editor instance.
542 * @returns {CKEDITOR.filter.allowedContentRules} The rules that should represent this style in the {@link CKEDITOR.filter}.
547 * Builds the inline style text based on the style definition.
550 * @param styleDefinition
551 * @returns {String} Inline style text.
553 CKEDITOR
.style
.getStyleText = function( styleDefinition
) {
554 // If we have already computed it, just return it.
555 var stylesDef
= styleDefinition
._ST
;
559 stylesDef
= styleDefinition
.styles
;
561 // Builds the StyleText.
562 var stylesText
= ( styleDefinition
.attributes
&& styleDefinition
.attributes
.style
) || '',
563 specialStylesText
= '';
565 if ( stylesText
.length
)
566 stylesText
= stylesText
.replace( semicolonFixRegex
, ';' );
568 for ( var style
in stylesDef
) {
569 var styleVal
= stylesDef
[ style
],
570 text
= ( style
+ ':' + styleVal
).replace( semicolonFixRegex
, ';' );
572 // Some browsers don't support 'inherit' property value, leave them intact. (http://dev.ckeditor.com/ticket/5242)
573 if ( styleVal
== 'inherit' )
574 specialStylesText
+= text
;
579 // Browsers make some changes to the style when applying them. So, here
580 // we normalize it to the browser format.
581 if ( stylesText
.length
)
582 stylesText
= CKEDITOR
.tools
.normalizeCssText( stylesText
, true );
584 stylesText
+= specialStylesText
;
586 // Return it, saving it to the next request.
587 return ( styleDefinition
._ST
= stylesText
);
591 * Namespace containing custom style handlers added with {@link CKEDITOR.style#addCustomHandler}.
597 CKEDITOR
.style
.customHandlers
= {};
600 * Creates a {@link CKEDITOR.style} subclass and registers it in the style system.
601 * Registered class will be used as a handler for a style of this type. This allows
602 * to extend the styles system, which by default uses only the {@link CKEDITOR.style}, with
603 * new functionality. Registered classes are accessible in the {@link CKEDITOR.style.customHandlers}.
605 * ### The Style Class Definition
607 * The definition object is used to override properties in a prototype inherited
608 * from the {@link CKEDITOR.style} class. It must contain a `type` property which is
609 * a name of the new type and therefore it must be unique. The default style types
610 * ({@link CKEDITOR#STYLE_BLOCK STYLE_BLOCK}, {@link CKEDITOR#STYLE_INLINE STYLE_INLINE},
611 * and {@link CKEDITOR#STYLE_OBJECT STYLE_OBJECT}) are integers, but for easier identification
612 * it is recommended to use strings as custom type names.
614 * Besides `type`, the definition may contain two more special properties:
616 * * `setup {Function}` – An optional callback executed when a style instance is created.
617 * Like the style constructor, it is executed in style context and with the style definition as an argument.
618 * * `assignedTo {Number}` – Can be set to one of the default style types. Some editor
619 * features like the Styles drop-down assign styles to one of the default groups based on
620 * the style type. By using this property it is possible to notify them to which group this
621 * custom style should be assigned. It defaults to the {@link CKEDITOR#STYLE_OBJECT}.
623 * Other properties of the definition object will just be used to extend the prototype inherited
624 * from the {@link CKEDITOR.style} class. So if the definition contains an `apply` method, it will
625 * override the {@link CKEDITOR.style#apply} method.
629 * Registering a basic handler:
631 * var styleClass = CKEDITOR.style.addCustomHandler( {
635 * var style = new styleClass( { ... } );
636 * style instanceof styleClass; // -> true
637 * style instanceof CKEDITOR.style; // -> true
638 * style.type; // -> 'custom'
640 * The {@link CKEDITOR.style} constructor used as a factory:
642 * var styleClass = CKEDITOR.style.addCustomHandler( {
646 * // Style constructor accepts style definition (do not confuse with style class definition).
647 * var style = new CKEDITOR.style( { type: 'custom', attributes: ... } );
648 * style instanceof styleClass; // -> true
650 * Thanks to that, integration code using styles does not need to know
651 * which style handler it should use. It is determined by the {@link CKEDITOR.style} constructor.
653 * Overriding existing {@link CKEDITOR.style} methods:
655 * var styleClass = CKEDITOR.style.addCustomHandler( {
657 * apply: function( editor ) {
658 * console.log( 'apply' );
660 * remove: function( editor ) {
661 * console.log( 'remove' );
665 * var style = new CKEDITOR.style( { type: 'custom', attributes: ... } );
666 * editor.applyStyle( style ); // logged 'apply'
668 * style = new CKEDITOR.style( { element: 'img', attributes: { 'class': 'foo' } } );
669 * editor.applyStyle( style ); // style is really applied if image was selected
671 * ### Practical Recommendations
673 * The style handling job, which includes such tasks as applying, removing, checking state, and
674 * checking if a style can be applied, is very complex. Therefore without deep knowledge
675 * about DOM and especially {@link CKEDITOR.dom.range ranges} and {@link CKEDITOR.dom.walker DOM walker} it is impossible
676 * to implement a completely custom style handler able to handle block, inline, and object type styles.
677 * However, it is possible to customize the default implementation by overriding default methods and
680 * The only style handler which can be implemented from scratch without huge effort is a style
681 * applicable to objects ([read more about types](http://docs.ckeditor.com/#!/guide/dev_styles-section-style-types)).
682 * Such style can only be applied when a specific object is selected. An example implementation can
683 * be found in the [widget plugin](https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/widget/plugin.js).
685 * When implementing a style handler from scratch at least the following methods must be defined:
687 * * {@link CKEDITOR.style#apply apply} and {@link CKEDITOR.style#remove remove},
688 * * {@link CKEDITOR.style#checkElementRemovable checkElementRemovable} and
689 * {@link CKEDITOR.style#checkElementMatch checkElementMatch} – Note that both methods reuse the same logic,
690 * * {@link CKEDITOR.style#checkActive checkActive} – Reuses
691 * {@link CKEDITOR.style#checkElementMatch checkElementMatch},
692 * * {@link CKEDITOR.style#toAllowedContentRules toAllowedContentRules} – Not required, but very useful in
693 * case of a custom style that has to notify the {@link CKEDITOR.filter} which rules it allows when registered.
697 * @member CKEDITOR.style
698 * @param definition The style class definition.
699 * @returns {CKEDITOR.style} The new style class created for the provided definition.
701 CKEDITOR
.style
.addCustomHandler = function( definition
) {
702 var styleClass = function( styleDefinition
) {
704 definition: styleDefinition
708 this.setup( styleDefinition
);
711 styleClass
.prototype = CKEDITOR
.tools
.extend(
712 // Prototype of CKEDITOR.style.
713 CKEDITOR
.tools
.prototypedCopy( CKEDITOR
.style
.prototype ),
716 assignedTo: CKEDITOR
.STYLE_OBJECT
718 // Passed definition - overrides.
723 this.customHandlers
[ definition
.type
] = styleClass
;
728 // Gets the parent element which blocks the styling for an element. This
729 // can be done through read-only elements (contenteditable=false) or
730 // elements with the "data-nostyle" attribute.
731 function getUnstylableParent( element
, root
) {
732 var unstylable
, editable
;
734 while ( ( element
= element
.getParent() ) ) {
735 if ( element
.equals( root
) )
738 if ( element
.getAttribute( 'data-nostyle' ) )
739 unstylable
= element
;
740 else if ( !editable
) {
741 var contentEditable
= element
.getAttribute( 'contentEditable' );
743 if ( contentEditable
== 'false' )
744 unstylable
= element
;
745 else if ( contentEditable
== 'true' )
753 var posPrecedingIdenticalContained
=
754 CKEDITOR
.POSITION_PRECEDING
| CKEDITOR
.POSITION_IDENTICAL
| CKEDITOR
.POSITION_IS_CONTAINED
,
755 posFollowingIdenticalContained
=
756 CKEDITOR
.POSITION_FOLLOWING
| CKEDITOR
.POSITION_IDENTICAL
| CKEDITOR
.POSITION_IS_CONTAINED
;
758 // Checks if the current node can be a child of the style element.
759 function checkIfNodeCanBeChildOfStyle( def
, currentNode
, lastNode
, nodeName
, dtd
, nodeIsNoStyle
, nodeIsReadonly
, includeReadonly
) {
760 // Style can be applied to text node.
764 // Style definitely cannot be applied if DTD or data-nostyle do not allow.
765 if ( !dtd
[ nodeName
] || nodeIsNoStyle
)
768 // Non-editable element cannot be styled is we shouldn't include readonly elements.
769 if ( nodeIsReadonly
&& !includeReadonly
)
772 // Check that we haven't passed lastNode yet and that style's childRule allows this style on current element.
773 return checkPositionAndRule( currentNode
, lastNode
, def
, posPrecedingIdenticalContained
);
776 // Check if the style element can be a child of the current
777 // node parent or if the element is not defined in the DTD.
778 function checkIfStyleCanBeChildOf( def
, currentParent
, elementName
, isUnknownElement
) {
779 return currentParent
&&
780 ( ( currentParent
.getDtd() || CKEDITOR
.dtd
.span
)[ elementName
] || isUnknownElement
) &&
781 ( !def
.parentRule
|| def
.parentRule( currentParent
) );
784 function checkIfStartsRange( nodeName
, currentNode
, lastNode
) {
786 !nodeName
|| !CKEDITOR
.dtd
.$removeEmpty
[ nodeName
] ||
787 ( currentNode
.getPosition( lastNode
) | posPrecedingIdenticalContained
) == posPrecedingIdenticalContained
791 function checkIfTextOrReadonlyOrEmptyElement( currentNode
, nodeIsReadonly
) {
792 var nodeType
= currentNode
.type
;
793 return nodeType
== CKEDITOR
.NODE_TEXT
|| nodeIsReadonly
|| ( nodeType
== CKEDITOR
.NODE_ELEMENT
&& !currentNode
.getChildCount() );
796 // Checks if position is a subset of posBitFlags and that nodeA fulfills style def rule.
797 function checkPositionAndRule( nodeA
, nodeB
, def
, posBitFlags
) {
798 return ( nodeA
.getPosition( nodeB
) | posBitFlags
) == posBitFlags
&&
799 ( !def
.childRule
|| def
.childRule( nodeA
) );
802 function applyInlineStyle( range
) {
803 var document
= range
.document
;
805 if ( range
.collapsed
) {
806 // Create the element to be inserted in the DOM.
807 var collapsedElement
= getElement( this, document
);
809 // Insert the empty element into the DOM at the range position.
810 range
.insertNode( collapsedElement
);
812 // Place the selection right inside the empty element.
813 range
.moveToPosition( collapsedElement
, CKEDITOR
.POSITION_BEFORE_END
);
818 var elementName
= this.element
,
819 def
= this._
.definition
,
822 // Indicates that fully selected read-only elements are to be included in the styling range.
823 var ignoreReadonly
= def
.ignoreReadonly
,
824 includeReadonly
= ignoreReadonly
|| def
.includeReadonly
;
826 // If the read-only inclusion is not available in the definition, try
827 // to get it from the root data (most often it's the editable).
828 if ( includeReadonly
== null )
829 includeReadonly
= range
.root
.getCustomData( 'cke_includeReadonly' );
831 // Get the DTD definition for the element. Defaults to "span".
832 var dtd
= CKEDITOR
.dtd
[ elementName
];
834 isUnknownElement
= true;
835 dtd
= CKEDITOR
.dtd
.span
;
839 range
.enlarge( CKEDITOR
.ENLARGE_INLINE
, 1 );
842 // Get the first node to be processed and the last, which concludes the processing.
843 var boundaryNodes
= range
.createBookmark(),
844 firstNode
= boundaryNodes
.startNode
,
845 lastNode
= boundaryNodes
.endNode
,
846 currentNode
= firstNode
,
849 if ( !ignoreReadonly
) {
850 // Check if the boundaries are inside non stylable elements.
851 var root
= range
.getCommonAncestor(),
852 firstUnstylable
= getUnstylableParent( firstNode
, root
),
853 lastUnstylable
= getUnstylableParent( lastNode
, root
);
855 // If the first element can't be styled, we'll start processing right
856 // after its unstylable root.
857 if ( firstUnstylable
)
858 currentNode
= firstUnstylable
.getNextSourceNode( true );
860 // If the last element can't be styled, we'll stop processing on its
862 if ( lastUnstylable
)
863 lastNode
= lastUnstylable
;
866 // Do nothing if the current node now follows the last node to be processed.
867 if ( currentNode
.getPosition( lastNode
) == CKEDITOR
.POSITION_FOLLOWING
)
870 while ( currentNode
) {
871 var applyStyle
= false;
873 if ( currentNode
.equals( lastNode
) ) {
877 var nodeName
= currentNode
.type
== CKEDITOR
.NODE_ELEMENT
? currentNode
.getName() : null,
878 nodeIsReadonly
= nodeName
&& ( currentNode
.getAttribute( 'contentEditable' ) == 'false' ),
879 nodeIsNoStyle
= nodeName
&& currentNode
.getAttribute( 'data-nostyle' );
882 if ( nodeName
&& currentNode
.data( 'cke-bookmark' ) ) {
883 currentNode
= currentNode
.getNextSourceNode( true );
887 // Find all nested editables of a non-editable block and apply this style inside them.
888 if ( nodeIsReadonly
&& includeReadonly
&& CKEDITOR
.dtd
.$block
[ nodeName
] )
889 applyStyleOnNestedEditables
.call( this, currentNode
);
891 // Check if the current node can be a child of the style element.
892 if ( checkIfNodeCanBeChildOfStyle( def
, currentNode
, lastNode
, nodeName
, dtd
, nodeIsNoStyle
, nodeIsReadonly
, includeReadonly
) ) {
893 var currentParent
= currentNode
.getParent();
895 // Check if the style element can be a child of the current
896 // node parent or if the element is not defined in the DTD.
897 if ( checkIfStyleCanBeChildOf( def
, currentParent
, elementName
, isUnknownElement
) ) {
898 // This node will be part of our range, so if it has not
899 // been started, place its start right before the node.
900 // In the case of an element node, it will be included
901 // only if it is entirely inside the range.
902 if ( !styleRange
&& checkIfStartsRange( nodeName
, currentNode
, lastNode
) ) {
903 styleRange
= range
.clone();
904 styleRange
.setStartBefore( currentNode
);
907 // Non element nodes, readonly elements, or empty
908 // elements can be added completely to the range.
909 if ( checkIfTextOrReadonlyOrEmptyElement( currentNode
, nodeIsReadonly
) ) {
910 var includedNode
= currentNode
;
913 // This node is about to be included completelly, but,
914 // if this is the last node in its parent, we must also
915 // check if the parent itself can be added completelly
916 // to the range, otherwise apply the style immediately.
918 ( applyStyle
= !includedNode
.getNext( notBookmark
) ) &&
919 ( parentNode
= includedNode
.getParent(), dtd
[ parentNode
.getName() ] ) &&
920 checkPositionAndRule( parentNode
, firstNode
, def
, posFollowingIdenticalContained
)
922 includedNode
= parentNode
;
925 styleRange
.setEndAfter( includedNode
);
932 // Style isn't applicable to current element, so apply style to
933 // range ending at previously chosen position, or nowhere if we haven't
934 // yet started styleRange.
939 // Get the next node to be processed.
940 // If we're currently on a non-editable element or non-styleable element,
941 // then we'll be moved to current node's sibling (or even further), so we'll
942 // avoid messing up its content.
943 currentNode
= currentNode
.getNextSourceNode( nodeIsNoStyle
|| nodeIsReadonly
);
946 // Apply the style if we have something to which apply it.
947 if ( applyStyle
&& styleRange
&& !styleRange
.collapsed
) {
948 // Build the style element, based on the style object definition.
949 var styleNode
= getElement( this, document
),
950 styleHasAttrs
= styleNode
.hasAttributes();
952 // Get the element that holds the entire range.
953 var parent
= styleRange
.getCommonAncestor();
958 // Styles cannot be removed.
960 // Attrs cannot be removed.
964 var attName
, styleName
, value
;
966 // Loop through the parents, removing the redundant attributes
967 // from the element to be applied.
968 while ( styleNode
&& parent
) {
969 if ( parent
.getName() == elementName
) {
970 for ( attName
in def
.attributes
) {
971 if ( removeList
.blockedAttrs
[ attName
] || !( value
= parent
.getAttribute( styleName
) ) )
974 if ( styleNode
.getAttribute( attName
) == value
)
975 removeList
.attrs
[ attName
] = 1;
977 removeList
.blockedAttrs
[ attName
] = 1;
980 for ( styleName
in def
.styles
) {
981 if ( removeList
.blockedStyles
[ styleName
] || !( value
= parent
.getStyle( styleName
) ) )
984 if ( styleNode
.getStyle( styleName
) == value
)
985 removeList
.styles
[ styleName
] = 1;
987 removeList
.blockedStyles
[ styleName
] = 1;
991 parent
= parent
.getParent();
994 for ( attName
in removeList
.attrs
)
995 styleNode
.removeAttribute( attName
);
997 for ( styleName
in removeList
.styles
)
998 styleNode
.removeStyle( styleName
);
1000 if ( styleHasAttrs
&& !styleNode
.hasAttributes() )
1004 // Move the contents of the range to the style element.
1005 styleRange
.extractContents().appendTo( styleNode
);
1007 // Insert it into the range position (it is collapsed after
1009 styleRange
.insertNode( styleNode
);
1011 // Here we do some cleanup, removing all duplicated
1012 // elements from the style element.
1013 removeFromInsideElement
.call( this, styleNode
);
1015 // Let's merge our new style with its neighbors, if possible.
1016 styleNode
.mergeSiblings();
1018 // As the style system breaks text nodes constantly, let's normalize
1019 // things for performance.
1020 // With IE, some paragraphs get broken when calling normalize()
1021 // repeatedly. Also, for IE, we must normalize body, not documentElement.
1022 // IE is also known for having a "crash effect" with normalize().
1023 // We should try to normalize with IE too in some way, somewhere.
1024 if ( !CKEDITOR
.env
.ie
)
1025 styleNode
.$.normalize();
1027 // Style already inherit from parents, left just to clear up any internal overrides. (http://dev.ckeditor.com/ticket/5931)
1029 styleNode
= new CKEDITOR
.dom
.element( 'span' );
1030 styleRange
.extractContents().appendTo( styleNode
);
1031 styleRange
.insertNode( styleNode
);
1032 removeFromInsideElement
.call( this, styleNode
);
1033 styleNode
.remove( true );
1036 // Style applied, let's release the range, so it gets
1037 // re-initialization in the next loop.
1042 // Remove the bookmark nodes.
1043 range
.moveToBookmark( boundaryNodes
);
1045 // Minimize the result range to exclude empty text nodes. (http://dev.ckeditor.com/ticket/5374)
1046 range
.shrink( CKEDITOR
.SHRINK_TEXT
);
1048 // Get inside the remaining element if range.shrink( TEXT ) has failed because of non-editable elements inside.
1049 // E.g. range.shrink( TEXT ) will not get inside:
1050 // [<b><i contenteditable="false">x</i></b>]
1051 // but range.shrink( ELEMENT ) will.
1052 range
.shrink( CKEDITOR
.NODE_ELEMENT
, true );
1055 function removeInlineStyle( range
) {
1056 // Make sure our range has included all "collpased" parent inline nodes so
1057 // that our operation logic can be simpler.
1058 range
.enlarge( CKEDITOR
.ENLARGE_INLINE
, 1 );
1060 var bookmark
= range
.createBookmark(),
1061 startNode
= bookmark
.startNode
,
1062 alwaysRemoveElement
= this._
.definition
.alwaysRemoveElement
;
1064 if ( range
.collapsed
) {
1065 var startPath
= new CKEDITOR
.dom
.elementPath( startNode
.getParent(), range
.root
),
1066 // The topmost element in elements path which we should jump out of.
1069 for ( var i
= 0, element
; i
< startPath
.elements
.length
&& ( element
= startPath
.elements
[ i
] ); i
++ ) {
1070 // 1. If it's collaped inside text nodes, try to remove the style from the whole element.
1072 // 2. Otherwise if it's collapsed on element boundaries, moving the selection
1073 // outside the styles instead of removing the whole tag,
1074 // also make sure other inner styles were well preserved.(http://dev.ckeditor.com/ticket/3309)
1076 // 3. Force removing the element even if it's an boundary element when alwaysRemoveElement is true.
1077 // Without it, the links won't be unlinked if the cursor is placed right before/after it. (http://dev.ckeditor.com/ticket/13062)
1078 if ( element
== startPath
.block
|| element
== startPath
.blockLimit
) {
1082 if ( this.checkElementRemovable( element
) ) {
1085 if ( !alwaysRemoveElement
&& range
.collapsed
&& ( range
.checkBoundaryOfElement( element
, CKEDITOR
.END
) || ( isStart
= range
.checkBoundaryOfElement( element
, CKEDITOR
.START
) ) ) ) {
1086 boundaryElement
= element
;
1087 boundaryElement
.match
= isStart
? 'start' : 'end';
1089 // Before removing the style node, there may be a sibling to the style node
1090 // that's exactly the same to the one to be removed. To the user, it makes
1091 // no difference that they're separate entities in the DOM tree. So, merge
1092 // them before removal.
1093 element
.mergeSiblings();
1094 if ( element
.is( this.element
) ) {
1095 removeFromElement
.call( this, element
);
1097 removeOverrides( element
, getOverrides( this )[ element
.getName() ] );
1103 // Re-create the style tree after/before the boundary element,
1104 // the replication start from bookmark start node to define the
1106 if ( boundaryElement
) {
1107 var clonedElement
= startNode
;
1108 for ( i
= 0; ; i
++ ) {
1109 var newElement
= startPath
.elements
[ i
];
1110 if ( newElement
.equals( boundaryElement
) )
1112 // Avoid copying any matched element.
1113 else if ( newElement
.match
)
1116 newElement
= newElement
.clone();
1117 newElement
.append( clonedElement
);
1118 clonedElement
= newElement
;
1120 clonedElement
[ boundaryElement
.match
== 'start' ? 'insertBefore' : 'insertAfter' ]( boundaryElement
);
1123 // Now our range isn't collapsed. Lets walk from the start node to the end
1124 // node via DFS and remove the styles one-by-one.
1125 var endNode
= bookmark
.endNode
,
1130 // Now, do the DFS walk.
1131 var currentNode
= startNode
;
1132 while ( !currentNode
.equals( endNode
) ) {
1133 // Need to get the next node first because removeFromElement() can remove
1134 // the current node from DOM tree.
1135 var nextNode
= currentNode
.getNextSourceNode();
1136 if ( currentNode
.type
== CKEDITOR
.NODE_ELEMENT
&& this.checkElementRemovable( currentNode
) ) {
1137 // Remove style from element or overriding element.
1138 if ( currentNode
.getName() == this.element
)
1139 removeFromElement
.call( this, currentNode
);
1141 removeOverrides( currentNode
, getOverrides( this )[ currentNode
.getName() ] );
1143 // removeFromElement() may have merged the next node with something before
1144 // the startNode via mergeSiblings(). In that case, the nextNode would
1145 // contain startNode and we'll have to call breakNodes() again and also
1146 // reassign the nextNode to something after startNode.
1147 if ( nextNode
.type
== CKEDITOR
.NODE_ELEMENT
&& nextNode
.contains( startNode
) ) {
1149 nextNode
= startNode
.getNext();
1152 currentNode
= nextNode
;
1156 range
.moveToBookmark( bookmark
);
1157 // See the comment for range.shrink in applyInlineStyle.
1158 range
.shrink( CKEDITOR
.NODE_ELEMENT
, true );
1160 // Find out the style ancestor that needs to be broken down at startNode
1162 function breakNodes() {
1163 var startPath
= new CKEDITOR
.dom
.elementPath( startNode
.getParent() ),
1164 endPath
= new CKEDITOR
.dom
.elementPath( endNode
.getParent() ),
1168 for ( var i
= 0; i
< startPath
.elements
.length
; i
++ ) {
1169 var element
= startPath
.elements
[ i
];
1171 if ( element
== startPath
.block
|| element
== startPath
.blockLimit
)
1174 if ( me
.checkElementRemovable( element
, true ) )
1175 breakStart
= element
;
1178 for ( i
= 0; i
< endPath
.elements
.length
; i
++ ) {
1179 element
= endPath
.elements
[ i
];
1181 if ( element
== endPath
.block
|| element
== endPath
.blockLimit
)
1184 if ( me
.checkElementRemovable( element
, true ) )
1189 endNode
.breakParent( breakEnd
);
1191 startNode
.breakParent( breakStart
);
1195 // Apply style to nested editables inside editablesContainer.
1196 // @param {CKEDITOR.dom.element} editablesContainer
1197 // @context CKEDITOR.style
1198 function applyStyleOnNestedEditables( editablesContainer
) {
1199 var editables
= findNestedEditables( editablesContainer
),
1201 l
= editables
.length
,
1203 range
= l
&& new CKEDITOR
.dom
.range( editablesContainer
.getDocument() );
1205 for ( ; i
< l
; ++i
) {
1206 editable
= editables
[ i
];
1207 // Check if style is allowed by this editable's ACF.
1208 if ( checkIfAllowedInEditable( editable
, this ) ) {
1209 range
.selectNodeContents( editable
);
1210 applyInlineStyle
.call( this, range
);
1215 // Finds nested editables within container. Does not return
1216 // editables nested in another editable (twice).
1217 function findNestedEditables( container
) {
1220 container
.forEach( function( element
) {
1221 if ( element
.getAttribute( 'contenteditable' ) == 'true' ) {
1222 editables
.push( element
);
1223 return false; // Skip children.
1225 }, CKEDITOR
.NODE_ELEMENT
, true );
1230 // Checks if style is allowed in this editable.
1231 function checkIfAllowedInEditable( editable
, style
) {
1232 var filter
= CKEDITOR
.filter
.instances
[ editable
.data( 'cke-filter' ) ];
1234 return filter
? filter
.check( style
) : 1;
1237 // Checks if style is allowed by iterator's active filter.
1238 function checkIfAllowedByIterator( iterator
, style
) {
1239 return iterator
.activeFilter
? iterator
.activeFilter
.check( style
) : 1;
1242 function applyObjectStyle( range
) {
1243 // Selected or parent element. (http://dev.ckeditor.com/ticket/9651)
1244 var start
= range
.getEnclosedNode() || range
.getCommonAncestor( false, true ),
1245 element
= new CKEDITOR
.dom
.elementPath( start
, range
.root
).contains( this.element
, 1 );
1247 element
&& !element
.isReadOnly() && setupElement( element
, this );
1250 function removeObjectStyle( range
) {
1251 var parent
= range
.getCommonAncestor( true, true ),
1252 element
= new CKEDITOR
.dom
.elementPath( parent
, range
.root
).contains( this.element
, 1 );
1258 def
= style
._
.definition
,
1259 attributes
= def
.attributes
;
1261 // Remove all defined attributes.
1263 for ( var att
in attributes
)
1264 element
.removeAttribute( att
, attributes
[ att
] );
1267 // Assign all defined styles.
1269 for ( var i
in def
.styles
) {
1270 if ( def
.styles
.hasOwnProperty( i
) )
1271 element
.removeStyle( i
);
1276 function applyBlockStyle( range
) {
1277 // Serializible bookmarks is needed here since
1278 // elements may be merged.
1279 var bookmark
= range
.createBookmark( true );
1281 var iterator
= range
.createIterator();
1282 iterator
.enforceRealBlocks
= true;
1284 // make recognize <br /> tag as a separator in ENTER_BR mode (http://dev.ckeditor.com/ticket/5121)
1285 if ( this._
.enterMode
)
1286 iterator
.enlargeBr
= ( this._
.enterMode
!= CKEDITOR
.ENTER_BR
);
1289 doc
= range
.document
,
1292 while ( ( block
= iterator
.getNextParagraph() ) ) {
1293 if ( !block
.isReadOnly() && checkIfAllowedByIterator( iterator
, this ) ) {
1294 newBlock
= getElement( this, doc
, block
);
1295 replaceBlock( block
, newBlock
);
1299 range
.moveToBookmark( bookmark
);
1302 function removeBlockStyle( range
) {
1303 // Serializible bookmarks is needed here since
1304 // elements may be merged.
1305 var bookmark
= range
.createBookmark( 1 );
1307 var iterator
= range
.createIterator();
1308 iterator
.enforceRealBlocks
= true;
1309 iterator
.enlargeBr
= this._
.enterMode
!= CKEDITOR
.ENTER_BR
;
1314 while ( ( block
= iterator
.getNextParagraph() ) ) {
1315 if ( this.checkElementRemovable( block
) ) {
1316 // <pre> get special treatment.
1317 if ( block
.is( 'pre' ) ) {
1318 newBlock
= this._
.enterMode
== CKEDITOR
.ENTER_BR
? null :
1319 range
.document
.createElement( this._
.enterMode
== CKEDITOR
.ENTER_P
? 'p' : 'div' );
1321 newBlock
&& block
.copyAttributes( newBlock
);
1322 replaceBlock( block
, newBlock
);
1324 removeFromElement
.call( this, block
);
1329 range
.moveToBookmark( bookmark
);
1332 // Replace the original block with new one, with special treatment
1333 // for <pre> blocks to make sure content format is well preserved, and merging/splitting adjacent
1334 // when necessary. (http://dev.ckeditor.com/ticket/3188)
1335 function replaceBlock( block
, newBlock
) {
1336 // Block is to be removed, create a temp element to
1338 var removeBlock
= !newBlock
;
1339 if ( removeBlock
) {
1340 newBlock
= block
.getDocument().createElement( 'div' );
1341 block
.copyAttributes( newBlock
);
1344 var newBlockIsPre
= newBlock
&& newBlock
.is( 'pre' ),
1345 blockIsPre
= block
.is( 'pre' ),
1346 isToPre
= newBlockIsPre
&& !blockIsPre
,
1347 isFromPre
= !newBlockIsPre
&& blockIsPre
;
1350 newBlock
= toPre( block
, newBlock
);
1351 else if ( isFromPre
)
1352 // Split big <pre> into pieces before start to convert.
1353 newBlock
= fromPres( removeBlock
? [ block
.getHtml() ] : splitIntoPres( block
), newBlock
);
1355 block
.moveChildren( newBlock
);
1357 newBlock
.replace( block
);
1359 if ( newBlockIsPre
) {
1360 // Merge previous <pre> blocks.
1361 mergePre( newBlock
);
1362 } else if ( removeBlock
) {
1363 removeNoAttribsElement( newBlock
);
1367 // Merge a <pre> block with a previous sibling if available.
1368 function mergePre( preBlock
) {
1370 if ( !( ( previousBlock
= preBlock
.getPrevious( nonWhitespaces
) ) && previousBlock
.type
== CKEDITOR
.NODE_ELEMENT
&& previousBlock
.is( 'pre' ) ) )
1373 // Merge the previous <pre> block contents into the current <pre>
1376 // Another thing to be careful here is that currentBlock might contain
1377 // a '\n' at the beginning, and previousBlock might contain a '\n'
1378 // towards the end. These new lines are not normally displayed but they
1379 // become visible after merging.
1380 var mergedHtml
= replace( previousBlock
.getHtml(), /\n$/, '' ) + '\n\n' +
1381 replace( preBlock
.getHtml(), /^\n/, '' );
1383 // Krugle: IE normalizes innerHTML from <pre>, breaking whitespaces.
1384 if ( CKEDITOR
.env
.ie
)
1385 preBlock
.$.outerHTML
= '<pre>' + mergedHtml
+ '</pre>';
1387 preBlock
.setHtml( mergedHtml
);
1389 previousBlock
.remove();
1392 // Split into multiple <pre> blocks separated by double line-break.
1393 function splitIntoPres( preBlock
) {
1394 // Exclude the ones at header OR at tail,
1395 // and ignore bookmark content between them.
1396 var duoBrRegex
= /(\S\s*)\n(?:\s|(<span[^>]+data-cke-bookmark.*?\/span>))*\n(?!$)/gi,
1398 splitedHtml
= replace( preBlock
.getOuterHtml(), duoBrRegex
, function( match
, charBefore
, bookmark
) {
1399 return charBefore
+ '</pre>' + bookmark
+ '<pre>';
1402 splitedHtml
.replace( /<pre\b.*?>([\s\S]*?)<\/pre>/gi, function( match
, preContent
) {
1403 pres
.push( preContent
);
1408 // Wrapper function of String::replace without considering of head/tail bookmarks nodes.
1409 function replace( str
, regexp
, replacement
) {
1410 var headBookmark
= '',
1413 str
= str
.replace( /(^<span[^>]+data-cke-bookmark.*?\/span>)|(<span[^>]+data-cke-bookmark.*?\/span>$)/gi, function( str
, m1
, m2
) {
1414 m1
&& ( headBookmark
= m1
);
1415 m2
&& ( tailBookmark
= m2
);
1418 return headBookmark
+ str
.replace( regexp
, replacement
) + tailBookmark
;
1421 // Converting a list of <pre> into blocks with format well preserved.
1422 function fromPres( preHtmls
, newBlock
) {
1424 if ( preHtmls
.length
> 1 )
1425 docFrag
= new CKEDITOR
.dom
.documentFragment( newBlock
.getDocument() );
1427 for ( var i
= 0; i
< preHtmls
.length
; i
++ ) {
1428 var blockHtml
= preHtmls
[ i
];
1430 // 1. Trim the first and last line-breaks immediately after and before <pre>,
1431 // they're not visible.
1432 blockHtml
= blockHtml
.replace( /(\r\n|\r)/g, '\n' );
1433 blockHtml
= replace( blockHtml
, /^[ \t]*\n/, '' );
1434 blockHtml
= replace( blockHtml
, /\n$/, '' );
1435 // 2. Convert spaces or tabs at the beginning or at the end to
1436 blockHtml
= replace( blockHtml
, /^[ \t]+|[ \t]+$/g
, function( match
, offset
) {
1437 if ( match
.length
== 1 ) // one space, preserve it
1439 else if ( !offset
) // beginning of block
1440 return CKEDITOR
.tools
.repeat( ' ', match
.length
- 1 ) + ' ';
1441 else // end of block
1442 return ' ' + CKEDITOR
.tools
.repeat( ' ', match
.length
- 1 );
1445 // 3. Convert \n to <BR>.
1446 // 4. Convert contiguous (i.e. non-singular) spaces or tabs to
1447 blockHtml
= blockHtml
.replace( /\n/g, '<br>' );
1448 blockHtml
= blockHtml
.replace( /[ \t]{2,}/g
, function( match
) {
1449 return CKEDITOR
.tools
.repeat( ' ', match
.length
- 1 ) + ' ';
1453 var newBlockClone
= newBlock
.clone();
1454 newBlockClone
.setHtml( blockHtml
);
1455 docFrag
.append( newBlockClone
);
1457 newBlock
.setHtml( blockHtml
);
1461 return docFrag
|| newBlock
;
1464 // Converting from a non-PRE block to a PRE block in formatting operations.
1465 function toPre( block
, newBlock
) {
1466 var bogus
= block
.getBogus();
1467 bogus
&& bogus
.remove();
1469 // First trim the block content.
1470 var preHtml
= block
.getHtml();
1472 // 1. Trim head/tail spaces, they're not visible.
1473 preHtml
= replace( preHtml
, /(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g
, '' );
1474 // 2. Delete ANSI whitespaces immediately before and after <BR> because
1475 // they are not visible.
1476 preHtml
= preHtml
.replace( /[ \t\r\n]*(<br
[^>]*>)[ \t\r\n]*/gi
, '$1' );
1477 // 3. Compress other ANSI whitespaces since they're only visible as one
1478 // single space previously.
1479 // 4. Convert to spaces since is no longer needed in <PRE>.
1480 preHtml
= preHtml
.replace( /([ \t\n\r]+| 
;)/g
, ' ' );
1481 // 5. Convert any <BR /> to \n. This must not be done earlier because
1482 // the \n would then get compressed.
1483 preHtml
= preHtml
.replace( /<br\b[^>]*>/gi, '\n' );
1485 // Krugle: IE normalizes innerHTML to <pre>, breaking whitespaces.
1486 if ( CKEDITOR
.env
.ie
) {
1487 var temp
= block
.getDocument().createElement( 'div' );
1488 temp
.append( newBlock
);
1489 newBlock
.$.outerHTML
= '<pre>' + preHtml
+ '</pre>';
1490 newBlock
.copyAttributes( temp
.getFirst() );
1491 newBlock
= temp
.getFirst().remove();
1493 newBlock
.setHtml( preHtml
);
1499 // Removes a style from an element itself, don't care about its subtree.
1500 function removeFromElement( element
, keepDataAttrs
) {
1501 var def
= this._
.definition
,
1502 attributes
= def
.attributes
,
1503 styles
= def
.styles
,
1504 overrides
= getOverrides( this )[ element
.getName() ],
1505 // If the style is only about the element itself, we have to remove the element.
1506 removeEmpty
= CKEDITOR
.tools
.isEmpty( attributes
) && CKEDITOR
.tools
.isEmpty( styles
);
1508 // Remove definition attributes/style from the elemnt.
1509 for ( var attName
in attributes
) {
1510 // The 'class' element value must match (http://dev.ckeditor.com/ticket/1318).
1511 if ( ( attName
== 'class' || this._
.definition
.fullMatch
) && element
.getAttribute( attName
) != normalizeProperty( attName
, attributes
[ attName
] ) )
1514 // Do not touch data-* attributes (http://dev.ckeditor.com/ticket/11011) (http://dev.ckeditor.com/ticket/11258).
1515 if ( keepDataAttrs
&& attName
.slice( 0, 5 ) == 'data-' )
1518 removeEmpty
= element
.hasAttribute( attName
);
1519 element
.removeAttribute( attName
);
1522 for ( var styleName
in styles
) {
1523 // Full match style insist on having fully equivalence. (http://dev.ckeditor.com/ticket/5018)
1524 if ( this._
.definition
.fullMatch
&& element
.getStyle( styleName
) != normalizeProperty( styleName
, styles
[ styleName
], true ) )
1527 removeEmpty
= removeEmpty
|| !!element
.getStyle( styleName
);
1528 element
.removeStyle( styleName
);
1531 // Remove overrides, but don't remove the element if it's a block element
1532 removeOverrides( element
, overrides
, blockElements
[ element
.getName() ] );
1534 if ( removeEmpty
) {
1535 if ( this._
.definition
.alwaysRemoveElement
)
1536 removeNoAttribsElement( element
, 1 );
1538 if ( !CKEDITOR
.dtd
.$block
[ element
.getName() ] || this._
.enterMode
== CKEDITOR
.ENTER_BR
&& !element
.hasAttributes() )
1539 removeNoAttribsElement( element
);
1541 element
.renameNode( this._
.enterMode
== CKEDITOR
.ENTER_P
? 'p' : 'div' );
1546 // Removes a style from inside an element. Called on applyStyle to make cleanup
1547 // before apply. During clean up this function keep data-* attribute in contrast
1548 // to removeFromElement.
1549 function removeFromInsideElement( element
) {
1550 var overrides
= getOverrides( this ),
1551 innerElements
= element
.getElementsByTag( this.element
),
1554 for ( var i
= innerElements
.count(); --i
>= 0; ) {
1555 innerElement
= innerElements
.getItem( i
);
1557 // Do not remove elements which are read only (e.g. duplicates inside widgets).
1558 if ( !innerElement
.isReadOnly() )
1559 removeFromElement
.call( this, innerElement
, true );
1562 // Now remove any other element with different name that is
1563 // defined to be overriden.
1564 for ( var overrideElement
in overrides
) {
1565 if ( overrideElement
!= this.element
) {
1566 innerElements
= element
.getElementsByTag( overrideElement
);
1568 for ( i
= innerElements
.count() - 1; i
>= 0; i
-- ) {
1569 innerElement
= innerElements
.getItem( i
);
1571 // Do not remove elements which are read only (e.g. duplicates inside widgets).
1572 if ( !innerElement
.isReadOnly() )
1573 removeOverrides( innerElement
, overrides
[ overrideElement
] );
1579 // Remove overriding styles/attributes from the specific element.
1580 // Note: Remove the element if no attributes remain.
1581 // @param {Object} element
1582 // @param {Object} overrides
1583 // @param {Boolean} Don't remove the element
1584 function removeOverrides( element
, overrides
, dontRemove
) {
1585 var attributes
= overrides
&& overrides
.attributes
;
1588 for ( var i
= 0; i
< attributes
.length
; i
++ ) {
1589 var attName
= attributes
[ i
][ 0 ],
1592 if ( ( actualAttrValue
= element
.getAttribute( attName
) ) ) {
1593 var attValue
= attributes
[ i
][ 1 ];
1595 // Remove the attribute if:
1596 // - The override definition value is null ;
1597 // - The override definition valie is a string that
1598 // matches the attribute value exactly.
1599 // - The override definition value is a regex that
1600 // has matches in the attribute value.
1601 if ( attValue
=== null || ( attValue
.test
&& attValue
.test( actualAttrValue
) ) || ( typeof attValue
== 'string' && actualAttrValue
== attValue
) )
1602 element
.removeAttribute( attName
);
1608 removeNoAttribsElement( element
);
1611 // If the element has no more attributes, remove it.
1612 function removeNoAttribsElement( element
, forceRemove
) {
1613 // If no more attributes remained in the element, remove it,
1614 // leaving its children.
1615 if ( !element
.hasAttributes() || forceRemove
) {
1616 if ( CKEDITOR
.dtd
.$block
[ element
.getName() ] ) {
1617 var previous
= element
.getPrevious( nonWhitespaces
),
1618 next
= element
.getNext( nonWhitespaces
);
1620 if ( previous
&& ( previous
.type
== CKEDITOR
.NODE_TEXT
|| !previous
.isBlockBoundary( { br: 1 } ) ) )
1621 element
.append( 'br', 1 );
1622 if ( next
&& ( next
.type
== CKEDITOR
.NODE_TEXT
|| !next
.isBlockBoundary( { br: 1 } ) ) )
1623 element
.append( 'br' );
1625 element
.remove( true );
1627 // Removing elements may open points where merging is possible,
1628 // so let's cache the first and last nodes for later checking.
1629 var firstChild
= element
.getFirst();
1630 var lastChild
= element
.getLast();
1632 element
.remove( true );
1635 // Check the cached nodes for merging.
1636 firstChild
.type
== CKEDITOR
.NODE_ELEMENT
&& firstChild
.mergeSiblings();
1638 if ( lastChild
&& !firstChild
.equals( lastChild
) && lastChild
.type
== CKEDITOR
.NODE_ELEMENT
)
1639 lastChild
.mergeSiblings();
1646 function getElement( style
, targetDocument
, element
) {
1648 elementName
= style
.element
;
1650 // The "*" element name will always be a span for this function.
1651 if ( elementName
== '*' )
1652 elementName
= 'span';
1654 // Create the element.
1655 el
= new CKEDITOR
.dom
.element( elementName
, targetDocument
);
1657 // http://dev.ckeditor.com/ticket/6226: attributes should be copied before the new ones are applied
1659 element
.copyAttributes( el
);
1661 el
= setupElement( el
, style
);
1663 // Avoid ID duplication.
1664 if ( targetDocument
.getCustomData( 'doc_processing_style' ) && el
.hasAttribute( 'id' ) )
1665 el
.removeAttribute( 'id' );
1667 targetDocument
.setCustomData( 'doc_processing_style', 1 );
1672 function setupElement( el
, style
) {
1673 var def
= style
._
.definition
,
1674 attributes
= def
.attributes
,
1675 styles
= CKEDITOR
.style
.getStyleText( def
);
1677 // Assign all defined attributes.
1679 for ( var att
in attributes
)
1680 el
.setAttribute( att
, attributes
[ att
] );
1683 // Assign all defined styles.
1685 el
.setAttribute( 'style', styles
);
1690 function replaceVariables( list
, variablesValues
) {
1691 for ( var item
in list
) {
1692 list
[ item
] = list
[ item
].replace( varRegex
, function( match
, varName
) {
1693 return variablesValues
[ varName
];
1698 // Returns an object that can be used for style matching comparison.
1699 // Attributes names and values are all lowercased, and the styles get
1700 // merged with the style attribute.
1701 function getAttributesForComparison( styleDefinition
) {
1702 // If we have already computed it, just return it.
1703 var attribs
= styleDefinition
._AC
;
1711 // Loop through all defined attributes.
1712 var styleAttribs
= styleDefinition
.attributes
;
1713 if ( styleAttribs
) {
1714 for ( var styleAtt
in styleAttribs
) {
1716 attribs
[ styleAtt
] = styleAttribs
[ styleAtt
];
1720 // Includes the style definitions.
1721 var styleText
= CKEDITOR
.style
.getStyleText( styleDefinition
);
1723 if ( !attribs
.style
)
1725 attribs
.style
= styleText
;
1728 // Appends the "length" information to the object.
1729 attribs
._length
= length
;
1731 // Return it, saving it to the next request.
1732 return ( styleDefinition
._AC
= attribs
);
1735 // Get the the collection used to compare the elements and attributes,
1736 // defined in this style overrides, with other element. All information in
1737 // it is lowercased.
1738 // @param {CKEDITOR.style} style
1739 function getOverrides( style
) {
1740 if ( style
._
.overrides
)
1741 return style
._
.overrides
;
1743 var overrides
= ( style
._
.overrides
= {} ),
1744 definition
= style
._
.definition
.overrides
;
1747 // The override description can be a string, object or array.
1748 // Internally, well handle arrays only, so transform it if needed.
1749 if ( !CKEDITOR
.tools
.isArray( definition
) )
1750 definition
= [ definition
];
1752 // Loop through all override definitions.
1753 for ( var i
= 0; i
< definition
.length
; i
++ ) {
1754 var override
= definition
[ i
],
1759 // If can be a string with the element name.
1760 if ( typeof override
== 'string' )
1761 elementName
= override
.toLowerCase();
1764 elementName
= override
.element
? override
.element
.toLowerCase() : style
.element
;
1765 attrs
= override
.attributes
;
1768 // We can have more than one override definition for the same
1769 // element name, so we attempt to simply append information to
1770 // it if it already exists.
1771 overrideEl
= overrides
[ elementName
] || ( overrides
[ elementName
] = {} );
1774 // The returning attributes list is an array, because we
1775 // could have different override definitions for the same
1777 var overrideAttrs
= ( overrideEl
.attributes
= overrideEl
.attributes
|| [] );
1778 for ( var attName
in attrs
) {
1779 // Each item in the attributes array is also an array,
1780 // where [0] is the attribute name and [1] is the
1782 overrideAttrs
.push( [ attName
.toLowerCase(), attrs
[ attName
] ] );
1791 // Make the comparison of attribute value easier by standardizing it.
1792 function normalizeProperty( name
, value
, isStyle
) {
1793 var temp
= new CKEDITOR
.dom
.element( 'span' );
1794 temp
[ isStyle
? 'setStyle' : 'setAttribute' ]( name
, value
);
1795 return temp
[ isStyle
? 'getStyle' : 'getAttribute' ]( name
);
1798 // Compare two bunch of styles, with the speciality that value 'inherit'
1799 // is treated as a wildcard which will match any value.
1800 // @param {Object/String} source
1801 // @param {Object/String} target
1802 // @returns {Boolean}
1803 function compareCssText( source
, target
) {
1804 function filter( string
, propertyName
) {
1805 // In case of font-families we'll skip quotes. (http://dev.ckeditor.com/ticket/10750)
1806 return propertyName
.toLowerCase() == 'font-family' ? string
.replace( /["']/g, '' ) : string
;
1809 if ( typeof source
== 'string' )
1810 source
= CKEDITOR
.tools
.parseCssText( source
);
1811 if ( typeof target
== 'string' )
1812 target
= CKEDITOR
.tools
.parseCssText( target
, true );
1814 for ( var name
in source
) {
1815 if ( !( name
in target
) ) {
1819 if ( !( filter( target
[ name
], name
) == filter( source
[ name
], name
) ||
1820 source
[ name
] == 'inherit' ||
1821 target
[ name
] == 'inherit' ) ) {
1828 function applyStyleOnSelection( selection
, remove
, editor
) {
1829 var doc
= selection
.document
,
1830 ranges
= selection
.getRanges(),
1831 func
= remove
? this.removeFromRange : this.applyToRange
,
1836 // In case of fake table selection, we would like to apply all styles and then select
1837 // the original ranges. Otherwise browsers would complain about discontiguous selection.
1838 if ( selection
.isFake
&& selection
.isInTable() ) {
1839 originalRanges
= [];
1841 for ( i
= 0; i
< ranges
.length
; i
++ ) {
1842 originalRanges
.push( ranges
[ i
].clone() );
1846 var iterator
= ranges
.createIterator();
1847 while ( ( range
= iterator
.getNextRange() ) )
1848 func
.call( this, range
, editor
);
1850 selection
.selectRanges( originalRanges
|| ranges
);
1851 doc
.removeCustomData( 'doc_processing_style' );
1856 * Generic style command. It applies a specific style when executed.
1858 * var boldStyle = new CKEDITOR.style( { element: 'strong' } );
1859 * // Register the "bold" command, which applies the bold style.
1860 * editor.addCommand( 'bold', new CKEDITOR.styleCommand( boldStyle ) );
1863 * @constructor Creates a styleCommand class instance.
1864 * @extends CKEDITOR.commandDefinition
1865 * @param {CKEDITOR.style} style The style to be applied when command is executed.
1866 * @param {Object} [ext] Additional command definition's properties.
1868 CKEDITOR
.styleCommand = function( style
, ext
) {
1870 this.allowedContent
= style
;
1871 this.requiredContent
= style
;
1873 CKEDITOR
.tools
.extend( this, ext
, true );
1877 * @param {CKEDITOR.editor} editor
1880 CKEDITOR
.styleCommand
.prototype.exec = function( editor
) {
1883 if ( this.state
== CKEDITOR
.TRISTATE_OFF
)
1884 editor
.applyStyle( this.style
);
1885 else if ( this.state
== CKEDITOR
.TRISTATE_ON
)
1886 editor
.removeStyle( this.style
);
1890 * Manages styles registration and loading. See also {@link CKEDITOR.config#stylesSet}.
1892 * // The set of styles for the <b>Styles</b> drop-down list.
1893 * CKEDITOR.stylesSet.add( 'default', [
1895 * { name: 'Blue Title', element: 'h3', styles: { 'color': 'Blue' } },
1896 * { name: 'Red Title', element: 'h3', styles: { 'color': 'Red' } },
1899 * { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } },
1900 * { name: 'Marker: Green', element: 'span', styles: { 'background-color': 'Lime' } },
1904 * name: 'Image on Left',
1907 * style: 'padding: 5px; margin-right: 5px',
1917 * @extends CKEDITOR.resourceManager
1919 CKEDITOR
.stylesSet
= new CKEDITOR
.resourceManager( '', 'stylesSet' );
1921 // Backward compatibility (http://dev.ckeditor.com/ticket/5025).
1922 CKEDITOR
.addStylesSet
= CKEDITOR
.tools
.bind( CKEDITOR
.stylesSet
.add
, CKEDITOR
.stylesSet
);
1923 CKEDITOR
.loadStylesSet = function( name
, url
, callback
) {
1924 CKEDITOR
.stylesSet
.addExternal( name
, url
, '' );
1925 CKEDITOR
.stylesSet
.load( name
, callback
);
1928 CKEDITOR
.tools
.extend( CKEDITOR
.editor
.prototype, {
1930 * Registers a function to be called whenever the selection position changes in the
1931 * editing area. The current state is passed to the function. The possible
1932 * states are {@link CKEDITOR#TRISTATE_ON} and {@link CKEDITOR#TRISTATE_OFF}.
1934 * // Create a style object for the <b> element.
1935 * var style = new CKEDITOR.style( { element: 'b' } );
1936 * var editor = CKEDITOR.instances.editor1;
1937 * editor.attachStyleStateChange( style, function( state ) {
1938 * if ( state == CKEDITOR.TRISTATE_ON )
1939 * alert( 'The current state for the B element is ON' );
1941 * alert( 'The current state for the B element is OFF' );
1944 * @member CKEDITOR.editor
1945 * @param {CKEDITOR.style} style The style to be watched.
1946 * @param {Function} callback The function to be called.
1948 attachStyleStateChange: function( style
, callback
) {
1949 // Try to get the list of attached callbacks.
1950 var styleStateChangeCallbacks
= this._
.styleStateChangeCallbacks
;
1952 // If it doesn't exist, it means this is the first call. So, let's create
1953 // all the structure to manage the style checks and the callback calls.
1954 if ( !styleStateChangeCallbacks
) {
1955 // Create the callbacks array.
1956 styleStateChangeCallbacks
= this._
.styleStateChangeCallbacks
= [];
1958 // Attach to the selectionChange event, so we can check the styles at
1960 this.on( 'selectionChange', function( ev
) {
1961 // Loop throw all registered callbacks.
1962 for ( var i
= 0; i
< styleStateChangeCallbacks
.length
; i
++ ) {
1963 var callback
= styleStateChangeCallbacks
[ i
];
1965 // Check the current state for the style defined for that callback.
1966 var currentState
= callback
.style
.checkActive( ev
.data
.path
, this ) ?
1967 CKEDITOR
.TRISTATE_ON : CKEDITOR
.TRISTATE_OFF
;
1969 // Call the callback function, passing the current state to it.
1970 callback
.fn
.call( this, currentState
);
1975 // Save the callback info, so it can be checked on the next occurrence of
1977 styleStateChangeCallbacks
.push( { style: style
, fn: callback
} );
1981 * Applies the style upon the editor's current selection. Shorthand for
1982 * {@link CKEDITOR.style#apply}.
1984 * @member CKEDITOR.editor
1985 * @param {CKEDITOR.style} style
1987 applyStyle: function( style
) {
1988 style
.apply( this );
1992 * Removes the style from the editor's current selection. Shorthand for
1993 * {@link CKEDITOR.style#remove}.
1995 * @member CKEDITOR.editor
1996 * @param {CKEDITOR.style} style
1998 removeStyle: function( style
) {
1999 style
.remove( this );
2003 * Gets the current `stylesSet` for this instance.
2005 * editor.getStylesSet( function( stylesDefinitions ) {} );
2007 * See also {@link CKEDITOR.editor#stylesSet} event.
2009 * @member CKEDITOR.editor
2010 * @param {Function} callback The function to be called with the styles data.
2012 getStylesSet: function( callback
) {
2013 if ( !this._
.stylesDefinitions
) {
2015 // Respect the backwards compatible definition entry
2016 configStyleSet
= editor
.config
.stylesCombo_stylesSet
|| editor
.config
.stylesSet
;
2018 // The false value means that none styles should be loaded.
2019 if ( configStyleSet
=== false ) {
2024 // http://dev.ckeditor.com/ticket/5352 Allow to define the styles directly in the config object
2025 if ( configStyleSet
instanceof Array
) {
2026 editor
._
.stylesDefinitions
= configStyleSet
;
2027 callback( configStyleSet
);
2031 // Default value is 'default'.
2032 if ( !configStyleSet
)
2033 configStyleSet
= 'default';
2035 var partsStylesSet
= configStyleSet
.split( ':' ),
2036 styleSetName
= partsStylesSet
[ 0 ],
2037 externalPath
= partsStylesSet
[ 1 ];
2039 CKEDITOR
.stylesSet
.addExternal( styleSetName
, externalPath
? partsStylesSet
.slice( 1 ).join( ':' ) : CKEDITOR
.getUrl( 'styles.js' ), '' );
2041 CKEDITOR
.stylesSet
.load( styleSetName
, function( stylesSet
) {
2042 editor
._
.stylesDefinitions
= stylesSet
[ styleSetName
];
2043 callback( editor
._
.stylesDefinitions
);
2046 callback( this._
.stylesDefinitions
);
2052 * Indicates that fully selected read-only elements will be included when
2053 * applying the style (for inline styles only).
2056 * @property {Boolean} [includeReadonly=false]
2057 * @member CKEDITOR.style
2061 * Indicates that any matches element of this style will be eventually removed
2062 * when calling {@link CKEDITOR.editor#removeStyle}.
2065 * @property {Boolean} [alwaysRemoveElement=false]
2066 * @member CKEDITOR.style
2070 * Disables inline styling on read-only elements.
2073 * @cfg {Boolean} [disableReadonlyStyling=false]
2074 * @member CKEDITOR.config
2078 * The "styles definition set" to use in the editor. They will be used in the
2079 * styles combo and the style selector of the div container.
2081 * The styles may be defined in the page containing the editor, or can be
2082 * loaded on demand from an external file. In the second case, if this setting
2083 * contains only a name, the `styles.js` file will be loaded from the
2084 * CKEditor root folder (what ensures backward compatibility with CKEditor 4.0).
2086 * Otherwise, this setting has the `name:url` syntax, making it
2087 * possible to set the URL from which the styles file will be loaded.
2088 * Note that the `name` has to be equal to the name used in
2089 * {@link CKEDITOR.stylesSet#add} while registering the styles set.
2091 * **Note**: Since 4.1 it is possible to set `stylesSet` to `false`
2092 * to prevent loading any styles set.
2094 * Read more in the [documentation](#!/guide/dev_styles)
2095 * and see the [SDK sample](http://sdk.ckeditor.com/samples/styles.html).
2097 * // Do not load any file. The styles set is empty.
2098 * config.stylesSet = false;
2100 * // Load the 'mystyles' styles set from the styles.js file.
2101 * config.stylesSet = 'mystyles';
2103 * // Load the 'mystyles' styles set from a relative URL.
2104 * config.stylesSet = 'mystyles:/editorstyles/styles.js';
2106 * // Load the 'mystyles' styles set from a full URL.
2107 * config.stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
2109 * // Load from a list of definitions.
2110 * config.stylesSet = [
2111 * { name: 'Strong Emphasis', element: 'strong' },
2112 * { name: 'Emphasis', element: 'em' },
2117 * @cfg {String/Array/Boolean} [stylesSet='default']
2118 * @member CKEDITOR.config