strapi-plugin-ckeditor5 - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #llm #rust #deep-learning #docker #windows #kubernetes #awesome-list #pytorch #openai #open-source

strapi-plugin-ckeditor5

(★ 242)

Replace Strapi default WYSIWYG editor with enhanced build of CKEditor 5

파일 탐색기

최종 버전 다운로드 (.zip)

- - create_release.yml
- - index.js
  - pluginId.js
.editorconfig
.gitattributes
.gitignore
package-lock.json
package.json
README.md
strapi-admin.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd strapi-plugin-ckeditor5

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i strapi-plugin-ckeditor5@latest

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run strapi build

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm i strapi-plugin-ckeditor5@1.14.0

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Strapi CKEditor5 plugin

Replace default [Strapi](https://github.com/strapi/strapi) markdown WYSIWYG editor with enhanced build of HTML [CKEditor 5](https://github.com/ckeditor/ckeditor5).

![strapi-plugin-ckeditor5](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg/raw/main/demo/demo.png)

[👀 **Live Demo**](https://roslovets-inc.github.io/ckeditor5-build-strapi-wysiwyg/)

## Features

-   [Enhanced build of CKEditor 5](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg) with more capabilities then Classic Editor build
-   Extensive set of features for your rich content
-   Optional editor customization
-   Automatically upload Inserted images to Media Library (thanks to [ckeditor5-strapi-upload-plugin](https://github.com/gtomato/ckeditor5-strapi-upload-plugin))
-   Media Library button to insert stored images directly to the editor 🔥
-   Automatic translation of UI into selected in Strapi language 🔥 (Strapi v3)
-   Full screen mode 🔥

## How to try

Check out [👀 **live demo**](https://roslovets-inc.github.io/ckeditor5-build-strapi-wysiwyg/) where you can test most of the features.

## How to install

### Strapi v4 (work in progress)

Go to your Strapi project folder and execute

```bash
npm i strapi-plugin-ckeditor5@latest
```

Don't forget to rebuild Strapi

```bash
npm run strapi build
```

### Strapi v3

Go to your Strapi project folder and execute

```bash
npm i strapi-plugin-ckeditor5@1.14.0
```

Don't forget to rebuild Strapi

```bash
npm run strapi build
```

## How to remove unused buttons (Strapi v3)

See [customization guide](#how-to-customize-editor-optional).

## How to customize editor (optional, Strapi v3)

If you want to change appearance of the editor or remove unused buttons you can add a custom CKEditor configuration to override default settings:

0. Go to your Strapi folder

1. Copy template config file [`node_modules/strapi-plugin-ckeditor5/admin/src/config/ckeditor.js`](admin/src/config/ckeditor.js) to `extensions/ckeditor5/admin/src/config`

2. Set up `extensions/ckeditor5/admin/src/config/ckeditor.js` (see [CKEditor configuration guide](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html))

3. Rebuild Strapi

```bash
npm run strapi build
```

### Configuration example (Strapi v3)

```js
// ckeditor.js
module.exports = {
    // Override toolbar config to leave a few buttons
    toolbar: {
        items: [
            "heading",
            "|",
            "bold",
            "italic",
            "link",
            "alignment",
            "|",
            "undo",
            "redo",
        ],
    },
};
```

### Default configuration (Strapi v3)

For information and inspiration: default editor configuration defined [here](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg/blob/e259d72cfc611a0f03aaa7686865412f421fc49c/src/ckeditor.js#L78).

## How to add more features to the editor

If you want to see more features in this plugin feel free to request it in [issues](https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5/issues) or create pull request in the [ckeditor5-build-strapi-wysiwyg](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg) repo. Together we will build a comprehensive editor for common needs.

## Acknowledgement

This plugin uses some code from [official manual](https://strapi.io/documentation/developer-docs/latest/guides/registering-a-field-in-admin.html).

## Links

-   [NPM package](https://www.npmjs.com/package/strapi-plugin-ckeditor5)
-   [GitHub repository](https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5)

## ⭐️ Show your support

Give a star if this project helped you.