@budgetthuis/ckeditor5-button-element-plugindeprecated

plugin for ckeditor5 to insert a custom tag <button> into the editor

Usage no npm install needed!

<script type="module">
  import budgetthuisCkeditor5ButtonElementPlugin from 'https://cdn.skypack.dev/@budgetthuis/ckeditor5-button-element-plugin';
</script>

README

ckeditor5-button-element-plugin

Plugin for ckeditor5 to insert a custom tag -button- into the editor (MVP)

Install

NPM Install:

  • npm install @budgetthuis/ckeditor5-button-element-plugin

Or add to application dependencies:

  • "@budgetthuis/ckeditor5-button-element-plugin": "^1.0.1"

Show Add button tag in editor

how to add

add to your editor js: ** plugins: BudgetButton (eg. plugins: [ Essentials, Paragraph, Bold, Italic, BudgetButton ]) ** toolbar: 'button' (eg. toolbar: [ 'bold', 'italic', 'button' ])

how does it work

Then you will see an icon with a hand. Click on it and you will see 2 popups:

  • url for the button
  • width (in percentage of the editor width)
  • once the button is in the editor visible you can add a custom text to the 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.