@ckeditor/ckeditor5-ui

Button

This code demonstrates how to create a simple button using the ButtonView class from @ckeditor/ckeditor5-ui. The button is labeled 'Click me' and is appended to the document body.

const ButtonView = require('@ckeditor/ckeditor5-ui').ButtonView;
const button = new ButtonView();
button.set({
  label: 'Click me',
  withText: true
});
button.render();
document.body.appendChild(button.element);

Toolbar

This code shows how to create a toolbar and add a button to it using the ToolbarView class from @ckeditor/ckeditor5-ui. The toolbar is then rendered and appended to the document body.

const ToolbarView = require('@ckeditor/ckeditor5-ui').ToolbarView;
const toolbar = new ToolbarView();
toolbar.items.add(button); // Assuming 'button' is a ButtonView instance
toolbar.render();
document.body.appendChild(toolbar.element);

Dropdown

This code demonstrates how to create a dropdown menu using the DropdownView class from @ckeditor/ckeditor5-ui. The dropdown button is labeled 'Options' and is appended to the document body.

const DropdownView = require('@ckeditor/ckeditor5-ui').DropdownView;
const dropdown = new DropdownView();
dropdown.buttonView.set({
  label: 'Options',
  withText: true
});
dropdown.render();
document.body.appendChild(dropdown.element);