如何在CKEditor 5中将跨度类和样式添加到所选文本？

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        styles: [
            { name: 'Red Text', element: 'span', attributes: { class: 'red-text' } },
            { name: 'Blue Text', element: 'span', attributes: { class: 'blue-text' } }
        ],
        toolbar: [ 'bold', 'italic', 'redText', 'blueText' ]
    } )
    .then( editor => {
        editor.model.document.on( 'change:data', () => {
            const selection = editor.model.document.selection;
            const ranges = selection.getSelectedRanges();

            for ( const range of ranges ) {
                editor.view.change( writer => {
                    const textAttributes = { class: 'red-text' };
                    writer.addClasses( 'red-text', range );
                    writer.setStyle( 'color', 'blue', range );
                } );
            }
        } );

        editor.ui.componentFactory.add( 'redText', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Red Text',
                icon: 'path/to/red-icon.png',
                tooltip: true
            } );

            view.on( 'execute', () => {
                editor.execute( 'redText' );
            } );

            return view;
        } );

        editor.ui.componentFactory.add( 'blueText', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Blue Text',
                icon: 'path/to/blue-icon.png',
                tooltip: true
            } );

            view.on( 'execute', () => {
                editor.execute( 'blueText' );
            } );

            return view;
        } );
    } )
    .catch( error => {
        console.error( error );
    } );