Ckeditor5: Font plugin: support of point to set font-size

Created on 30 Nov 2018  ·  1Comment  ·  Source: ckeditor/ckeditor5

🆕 Feature request
Font plugin: support for points to set the font-size

💻 Version of CKEditor

inline build v11.1.1, font-plugin v10.0.3

📋 Steps to reproduce

  1. call setData() with html text:
    <p><span style=\"font-size:10pt;\">some text </span></p>

    ✅ Expected result
    Font size applied.

    ❎ Actual result
    Font size remains unchanged for this element.

question

Most helpful comment

You can achieve this using configuration:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ArticlePluginSet, FontSize ],
        toolbar: [
            'heading', '|', 'fontSize' //..., 
        ],
        fontSize: {
            options: [
                generatePtSetting( '10' ),
                generatePtSetting( '12' ),
                generatePtSetting( '14' ),
                'default',
                generatePtSetting( '18' ),
                generatePtSetting( '20' ),
                generatePtSetting( '22' ),
            ]
        }
    } );

function generatePtSetting( size ) {
    return {
        model: size,
        title: size,
        view: {
            name: 'span',
            styles: {
                'font-size': `${ size }pt`
            }
        }
    };
}

In action:
selection_082

>All comments

You can achieve this using configuration:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ArticlePluginSet, FontSize ],
        toolbar: [
            'heading', '|', 'fontSize' //..., 
        ],
        fontSize: {
            options: [
                generatePtSetting( '10' ),
                generatePtSetting( '12' ),
                generatePtSetting( '14' ),
                'default',
                generatePtSetting( '18' ),
                generatePtSetting( '20' ),
                generatePtSetting( '22' ),
            ]
        }
    } );

function generatePtSetting( size ) {
    return {
        model: size,
        title: size,
        view: {
            name: 'span',
            styles: {
                'font-size': `${ size }pt`
            }
        }
    };
}

In action:
selection_082

Was this page helpful?
0 / 5 - 0 ratings

Related issues

wwalc picture wwalc  ·  3Comments

devaptas picture devaptas  ·  3Comments

MansoorJafari picture MansoorJafari  ·  3Comments

Reinmar picture Reinmar  ·  3Comments

hybridpicker picture hybridpicker  ·  3Comments