ckeditor5 fontSize pt examples

This commit is contained in:
Sahatsawat Kanpai 2025-01-07 09:47:55 +07:00
parent e98f74f169
commit c51b8d419e

View File

@ -30,7 +30,8 @@ import {
FontFamily, FontFamily,
FontColor, FontColor,
FontSize, FontSize,
FontBackgroundColor FontBackgroundColor,
Alignment
} from 'ckeditor5'; } from 'ckeditor5';
import CKEditorInspector from '@ckeditor/ckeditor5-inspector'; import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
@ -67,7 +68,8 @@ ClassicEditor
FontFamily, FontFamily,
FontColor, FontColor,
FontSize, FontSize,
FontBackgroundColor FontBackgroundColor,
Alignment
], ],
toolbar: [ toolbar: [
'undo', 'undo',
@ -77,6 +79,8 @@ ClassicEditor
'|', '|',
'heading', 'heading',
'|', '|',
'alignment',
'|',
'bold', 'bold',
'italic', 'italic',
'link', 'link',
@ -113,6 +117,14 @@ ClassicEditor
'tableRow', 'tableRow',
'mergeTableCells' 'mergeTableCells'
] ]
},
fontSize: {
options: [
generatePtSetting( 14 ),
generatePtSetting( 16 ),
generatePtSetting( 18 ),
generatePtSetting( 20 )
]
} }
} ) } )
.then( editor => { .then( editor => {
@ -123,3 +135,16 @@ ClassicEditor
.catch( err => { .catch( err => {
window.console.error( err.stack ); window.console.error( err.stack );
} ); } );
function generatePtSetting( size: number ): any {
return {
model: size,
title: `${ size }pt`,
view: {
name: 'span',
styles: {
'font-size': `${ size }pt`
}
}
};
}