引言
首先,我这里是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一下,来看效果
别忘了回到自己的项目上,更新一下依赖哦