# @webhandle/ckeditor-multi-widget-panel

> Adds a wiget to the ck editor which shows multiple widgets that a user can choose to add to the editor.

Latest version **1.0.2** (published 2025-02-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @webhandle/ckeditor-multi-widget-panel
pnpm add @webhandle/ckeditor-multi-widget-panel
yarn add @webhandle/ckeditor-multi-widget-panel
bun add @webhandle/ckeditor-multi-widget-panel
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2025-02-24 |
| First published | 2024-11-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dankolz |

## Links

- npm: https://www.npmjs.com/package/@webhandle/ckeditor-multi-widget-panel
- npm.io page: https://npm.io/package/@webhandle/ckeditor-multi-widget-panel

## Recent versions

- 1.0.2 (latest) — 2025-02-24
- 1.0.1 — 2025-01-09
- 1.0.0 — 2024-11-12

## README

# MultiWidgetPanel

Adds a wiget to the ck editor which shows multiple widgets that a user can
choose to add to the editor.

## Install

```bash
npm install @webhandle/ckeditor-multi-widget-panel
```

## Use

### CK Editor Config

Add `multi-widget-panel` to the ck editor config file like

```js
	config.extraPlugins = (config.extraPlugins ? config.extraPlugins + ',' : '') + 'multi-widget-panel'
```

### Webhandle Server Side

This is safe to run multiple times

```js
import('@webhandle/ckeditor-multi-widget-panel').then(mod => {
	mod.default()
})
```


### Adding a widget to the panel

This code is the sort of thing a ck editor plugin would run

```js
// Just make sure the data structures are in place
if(!window['@webhandle/ckeditor-widget-panel']) {
	window['@webhandle/ckeditor-widget-panel'] = {
		widgets: {}
	}
}
if(!window['@webhandle/ckeditor-widget-panel'].widgets) {
	window['@webhandle/ckeditor-widget-panel'].widgets = {}
}


// The secret sauce here is the `template` which should be markup which will
// be recognized as a widget, and the `action` method, which inserts it.
// If your widget does not have an editor, remove the call to edit.
// It's important to check if the widget is registered with the panel already
// because the widget will be initialized multiple times, once per editor
// on the page.
if(!window['@webhandle/ckeditor-widget-panel'].widgets[widgetName]) {
	window['@webhandle/ckeditor-widget-panel'].widgets[widgetName] = {
		name: widgetName
		, label: "Widget Start"
		, template: template
		, icon: this.path + `icons/widget-start.png`
		, description: 'Adds a basic widget to the editor'
		, action: function(editor) {
			editor.insertHtml(this.template)
			setTimeout(function() {
				let keys = Object.keys(editor.widgets.instances)
				let widget = editor.widgets.instances[keys[keys.length - 1]]

				widget.focus()
				widget.edit()
			})
		}
	}
}

```

---
_Source: https://npm.io/package/@webhandle/ckeditor-multi-widget-panel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._