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

在CKEditor 5中，要将跨度类和样式添加到所选文本，可以按照以下步骤进行操作：

首先，确保已经将CKEditor 5集成到你的项目中，并且已经创建了一个编辑器实例。
在编辑器实例的配置中，可以使用config.styles属性定义你想要添加的跨度类和样式。这个属性是一个数组，每个元素代表一个样式定义。
在每个样式定义中，可以使用name属性指定样式的名称，使用element属性指定样式应用的HTML元素，使用attributes属性指定要添加到元素的属性。
在样式定义中，还可以使用isDefault属性指定该样式是否为默认样式。
在编辑器实例的配置中，可以使用config.toolbar属性定义工具栏的按钮和功能。可以添加一个按钮，用于触发添加跨度类和样式的操作。
在按钮的点击事件中，可以使用编辑器实例的model和view对象来操作所选文本。
使用model对象的change方法，可以监听编辑器内容的变化。
在change方法的回调函数中，可以使用model对象的getSelectedRanges方法获取当前所选文本的范围。
使用view对象的addClasses方法，可以将跨度类添加到所选文本的范围内。
使用view对象的setStyle方法，可以将样式添加到所选文本的范围内。
最后，使用model对象的change方法，将修改后的内容应用到编辑器中。

以下是一个示例代码，演示如何在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 );
    } );

在上述示例代码中，我们定义了两个样式：Red Text和Blue Text，分别将红色和蓝色应用到所选文本。我们还定义了两个按钮，用于触发添加样式的操作。

请注意，上述示例代码中的路径和图标仅为示例，你需要根据实际情况进行修改。

对于CKEditor 5的更多详细信息和使用方法，你可以参考腾讯云的CKEditor 5产品介绍页面：CKEditor 5产品介绍