ckeditor5-button-element-plugin
Plugin for ckeditor5 to insert a custom tag <button> into the editor (MVP)
Install
NPM Install:
- npm install @budgetthuis/ckeditor5-custom-button-element-plugin
Show Add button tag in editor
add to your editor js:
- import CustomButtonElement from '@budgetthuis/ckeditor5-custom-button-element-plugin/src/custombuttonelement
- plugins: CustomButtonElement (eg. plugins: [ Essentials, Paragraph, Bold, Italic, CustomButtonElement ])
- toolbar: 'customButtonElement' (eg. toolbar: [ 'bold', 'italic', 'customButtonElement' ])
How does it work
If added to editor you will see an icon with a hand. Click on it and you will see 3 popups:
- url for the button
- width (in percentage of the editor width)
- text for the button
Clicking on the button that was added in the editor and then the text can be changed.
model & view
Model:
<ButtonFrame href="urlforbutton" width="widthforbutton" style="width:widthforbutton%;">Text for button</ButtonFrame>
View:
<button href="urlforbutton" width="widthforbutton" style="width:widthforbutton%;">Text for button</button>
styling the button in editor
In your editor styling you can add styling for ck-content button to style the button according to your own styles.
Note
Version 1.x.x is the first version of this button-element. It's an MVP.