CKEDITOR.tools.style.border

Properties

• color : StringCKEDITOR.tools.style.border#color

  See source

  Represents the value of the CSS color property.

• style : StringCKEDITOR.tools.style.border#style

  See source

  Represents the value of the CSS style property.

• width : StringCKEDITOR.tools.style.border#width

  See source

  Represents the value of the CSS width property.

Methods

• constructor( [ props ] ) → borderCKEDITOR.tools.style.border#constructor

  See source

  Creates a new instance of the border style.

  Parameters

  [ props ] : Object

  Style-related properties.

  Returns

  border

  Static methods

  • static

    fromCssRule( value ) → borderCKEDITOR.tools.style.border#fromCssRule

    See source

    Parses the CSS border property shorthand format. This CSS property does not support inheritance.

    console.log( CKEDITOR.tools.style.border.fromCssRule( '3px solid #ffeedd' ) );
    // Logs: Border { width: '3px', style: 'solid', color: '#ffeedd' }
    

    Parameters

    value : String

    The border property value.

    Returns

    border

    Border style.

    static

    splitCssValues( styles, [ fallback ] ) → Object.<String, border>CKEDITOR.tools.style.border#splitCssValues

    See source

    Parses the style, width and color shorthand styles into border side shorthand styles.

    var styles = {
        'border-color': 'red blue',
        'border-style': 'solid dotted solid',
        'border-width': '1px 2px 3px 4px'
    };
    
    console.log( CKEDITOR.tools.style.border.splitCssValues( styles ) );
    // Logs:
    // {
    //  'border-top': Border { width: '1px', style: 'solid', color: 'red' },
    //  'border-right': Border { width: '2px', style: 'dotted', color: 'blue'},
    //  'border-bottom': Border { width: '3px', style: 'solid', color: 'red' },
    //  'border-left': Border { width: '4px', style: 'dotted', color: 'blue' }
    // }
    
    // Use fallback to fill up missing style:
    var partialStyles = {
            'border-style': 'solid',
            'border-width': '2px'
        },
        fallback = { color: 'red' };
    
    console.log( CKEDITOR.tools.style.border.splitCssValues( partialStyles, fallback ) );
    // Logs:
    // {
    //  'border-top': Border { width: '2px', style: 'solid', color: 'red' },
    //  'border-right': Border { width: '2px', style: 'solid', color: 'red' },
    //  'border-bottom': Border { width: '2px', style: 'solid', color: 'red' },
    //  'border-left': Border { width: '2px', style: 'solid', color: 'red' }
    // }
    

    Border side shorthands with greater style property specificity are preferred over more general shorthands.

    var styles = {
            'border-style': 'solid',
            'border-width': '2px',
            'border-color': 'red',
            'border-left-color': 'blue',
            'border-right-width': '10px',
            'border-top-style': 'dotted',
            'border-top-color': 'green'
    };
    
    console.log( CKEDITOR.tools.style.border.splitCssValues( styles ) );
    // Logs:
    // {
    //  'border-top': Border { width: '2px', style: 'dotted', color: 'green' },
    //  'border-right': Border { width: '10px', style: 'solid', color: 'red'},
    //  'border-bottom': Border { width: '2px', style: 'solid', color: 'red' },
    //  'border-left': Border { width: '2px', style: 'solid', color: 'blue' }
    // }
    

    Parameters

    styles : Object

    Border styles shorthand object.

    [ fallback ] : Object

    Fallback object used to fill up missing style.

    Returns

    Object.<String, border>

    Properties

    border-top : border

    Border top style.

    border-right : border

    Border right style.

    border-bottom : border

    Border bottom style.

    border-left : border

    Border left style.