CKEditor5 创建插件、工具栏添加自定义工具、自定义按钮图标

引言

首先，我这里是vite+vue+ts构建的项目

其次，关于怎么集成CKEditor5，可以看我上一篇文章

这里使用的路径，参考上一篇文章即可

创建插件

导包

    "@ckeditor/ckeditor5-core": "40.1.0",
    "@ckeditor/ckeditor5-ui": "40.1.0",

 修改：ckeditor5\src\ckeditor.ts

懒得新建一个文件，直接在文件里开搞，造一个插件类：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
class Timestamp extends Plugin {
    init() {
        console.log( 'Timestamp was initialized.' );
    }
}

 然后在插件列表里添加上：

class Editor extends ClassicEditor {
	public static override builtinPlugins = [
		Timestamp,//添加这个插件

执行package里面的build

构建一下，然后就可以在simple文件夹里的index.html文件看到效果了

别忘了回到自己的项目上，更新一下依赖哦

创建工具栏按钮

修改：ckeditor5\src\ckeditor.ts

还是不新建...，继续造

import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
class Timestamp extends Plugin {
    init() {
        const editor = this.editor;
		editor.ui.componentFactory.add( 'timestamp', () => {
            // The button will be an instance of ButtonView.
            const button = new ButtonView();

            button.set( {
                label: 'Timestamp',
                withText: true
            } );
			
			button.on( 'execute', () => {
                const now = new Date();

                // Change the model using the model writer.
                editor.model.change( writer => {

                    // Insert the text at the user's current position.
                    editor.model.insertContent( writer.createText( now.toString() ) );
                } );
            } );

            return button;
        } );
    }
}

 加入到工具栏

public static override defaultConfig = {
		toolbar: {
			items: [
				'timestamp',

效果，点击按钮，在光标位置插入时间戳：

自定义按钮图标

直接使用svg的xml源码，方便快捷

button.set( {
                label: 'Time',
				tooltip:'插入时间戳',
				icon:'<svg t="1715062605726" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5479"><path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667z m0 106.666666a21.333333 21.333333 0 0 1 21.333333 21.333334v234.666666h170.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H469.333333a21.333333 21.333333 0 0 1-21.333333-21.333334V298.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667z" fill="#222429" p-id="5480"></path></svg>'
            } );

老规矩，build一下，来看效果

 

别忘了回到自己的项目上，更新一下依赖哦