I’m trying to create a ckeditor5 plugin that inserts a list of links into the editor when a toolbar button is pressed.
The code I have only inserts the links as text, and no list when the button is pressed.
For the context :
- It is in typescript,
- I compile in js and import my plugin in a Strapi (headless CMS) plugin that integrates CkEditor5 (ckeditor5 plugin).
- I think the list plugin (@ckeditor/ckeditor5-list) is required but my CKEditor5 from strapi probably have it bundled since the list buttons are available in the toolbar.
ckeditor5 toolbar list buttons screenshot
public async init(): Promise<void> {
const editor = this.editor;
const model = editor.model;
const links = ["https://www.google.fr", "https://www.google.com"];
editor.ui.componentFactory.add("damButton", (locale) => {
const button = new ButtonView(locale);
const t = editor.t;
button.set({
label: t("INSERT LIST"),
withText: true,
tooltip: true,
isToggleable: true
});
button.on("execute", () => {
try {
model.change((writer) => {
// Create the list element
const listElement = writer.createElement("ul", {
listType: 'bulleted',
indent: 0,
});
// Iterate over the links and create list items with links
links.forEach((link) => {
const listItem = writer.createElement("li", {
listType: 'bulleted',
indent: 1,
});
const linkElement = writer.createElement("a", { href: link });
writer.insertText(link, linkElement);
writer.append(linkElement, listItem);
writer.append(listItem, listElement);
});
// Insert the list element into the editor's model
editor.model.insertContent(listElement, editor.model.document.selection.getLastPosition());
});
editor.editing.view.focus();
} catch (e) {
console.error("Error", e);
}
});
return button;
});
I checked createElement documentation but did not understand how to properly use it:
createElement
New contributor
Kian Soltani is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.