# ckeditor-designit-plugin

> Designbold designit button intergration for CKeditor

Latest version **1.1.1** (published 2018-11-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install ckeditor-designit-plugin
pnpm add ckeditor-designit-plugin
yarn add ckeditor-designit-plugin
bun add ckeditor-designit-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2018-11-06 |
| First published | 2018-10-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hiep Tran |
| Maintainers | hiepcua |

## Links

- npm: https://www.npmjs.com/package/ckeditor-designit-plugin
- npm.io page: https://npm.io/package/ckeditor-designit-plugin

## Dependencies (13)

- [webpack](https://npm.io/package/webpack.md) ^4.20.2
- [raw-loader](https://npm.io/package/raw-loader.md) ^0.5.1
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.1.2
- [style-loader](https://npm.io/package/style-loader.md) ^0.23.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^3.0.0
- [@ckeditor/ckeditor5-ui](https://npm.io/package/@ckeditor/ckeditor5-ui.md) ^11.1.0
- [@ckeditor/ckeditor5-core](https://npm.io/package/@ckeditor/ckeditor5-core.md) ^11.0.1
- [@ckeditor/ckeditor5-dev-utils](https://npm.io/package/@ckeditor/ckeditor5-dev-utils.md) ^11.0.1
- [@ckeditor/ckeditor5-paragraph](https://npm.io/package/@ckeditor/ckeditor5-paragraph.md) ^10.0.3
- [@ckeditor/ckeditor5-essentials](https://npm.io/package/@ckeditor/ckeditor5-essentials.md) ^10.1.2
- [@ckeditor/ckeditor5-theme-lark](https://npm.io/package/@ckeditor/ckeditor5-theme-lark.md) ^11.1.0
- [@ckeditor/ckeditor5-basic-styles](https://npm.io/package/@ckeditor/ckeditor5-basic-styles.md) ^10.0.3
- [@ckeditor/ckeditor5-editor-classic](https://npm.io/package/@ckeditor/ckeditor5-editor-classic.md) ^11.0.1

## Recent versions

- 1.1.1 (latest) — 2018-11-06
- 1.1.0 — 2018-10-16
- 1.0.5 — 2018-10-10
- 1.0.4 — 2018-10-10
- 1.0.3 — 2018-10-10
- 1.0.2 — 2018-10-10
- 1.0.1 — 2018-10-09
- 1.0.0 — 2018-10-08

## README

# Designbold designit button intergration for CKeditor 5

Designit a button allow designing image on CKeditor 5, written completely in Javascript.

For more information, check out the [proposal repo](https://github.com/designboldgit/designit-ckeditor-plugin).

## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

### Prerequisites.

In order to start developing CKEditor 5 you will require:

Node.js 6.9.0+
npm 4+ (note: some npm 5+ versions were known to cause problems, especially with deduplicating packages; upgrade npm when in doubt)

### Adding a plugin to a build

Adding plugins to existing builds is done through their customization. Editor builds are maintained in their respective GitHub repositories. Therefore, assuming that you want to customize the classic editor build you need to:

1 Clone the build repository.

2 Install the plugin package.

3 Add it to the build configuration.

4 Bundle the build.

### Installing

First, clone the build repository:

```
git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
npm install
```

Second, install the plugin package:

```
npm i ckeditor-designit-plugin
```

Third, edit the src/ckeditor.js file to add your plugin to the list of plugins which will be included in the build and to add your feature’s button to the toolbar:

```
/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md.
 */

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
...

// Import my plugin
import Designit from 'ckeditor-designit-plugin/designit';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	...,
	Designit
];

// Editor configuration.
ClassicEditor.defaultConfig = {
	toolbar: {
		items: [
			...,
			'Designit'
		]
	},
	// This value must be kept in sync with the language defined in webpack.config.js.
	language: 'en'
};
```

Finally, if everything worked, the editor build (which is available in the build/ directory) should be updated.

You can open the sample/index.html file in your browser to see whether the plugin was installed correctly.

### Versioning

#### 1.0.5

- [X] Fix the problem when click button designit
- [X] Clean code

#### 1.1.0

- [X] Change process show designit tool from open new tab to show popup.
- [X] Add Feature show popular doctype
- [X] Add Feature show all doctype
- [X] Add Feature custome size
- [X] Clean code
- [X] Update readme.md

#### 1.1.1

- [X] Add feature download image

---
_Source: https://npm.io/package/ckeditor-designit-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._