Getting an error during create a custom plugin in ck editor 5.
Here I have added what I have tried so far. This is just basic example that I’m trying.
I want to create a custom plugin to add a predefined templates of html button on toolbar of ckeditor 5 custom button. on click of button table design will add in in ck editor 5 block.
This is screen shot I’m getting a error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CKEditor 5 Custom Plugin Example</title>
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<style>
.editor-container {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="editor-container">
<textarea name="editor" id="editor"></textarea>
</div>
<script>
// Custom plugin definition
class CustomPlugin {
constructor(editor) {
this.editor = editor;
}
init() {
const editor = this.editor;
const button = editor.ui.componentFactory.add('timestampButton', locale => {
const button = editor.ui.componentFactory.create('button', {
label: locale.t('Insert Timestamp'),
icon: 'clock', // Assuming you're using Font Awesome icons (optional)
title: 'Insert current timestamp',
});
// Handle the button click event (optional)
button.on('click', () => {
const now = new Date();
const formattedDate = now.toLocaleString();
editor.model.change(writer => {
const timestampElement = writer.createElement('paragraph');
writer.insertText(formattedDate, timestampElement);
editor.model.insertContent(timestampElement);
});
});
return button;
});
// Handle the button click event (optional)
}
}
// Initialize CKEditor 5
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [CustomPlugin, 'Heading'], // Include your custom plugin here
toolbar: ['heading', 'timestampButton'] // Add your custom button to the toolbar
})
.then(editor => {
console.log('Editor was initialized', editor);
})
.catch(error => {
console.error(error.stack);
});
</script>
</body>
</html>