# five-editor

> ckEditor5 自定义编辑器.

Latest version **1.0.6** (published 2023-02-21) · GPL-2.0-or-later license · 0 weekly downloads

## Install

```sh
npm install five-editor
pnpm add five-editor
yarn add five-editor
bun add five-editor
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score; popular repo.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-02-21 |
| First published | 2023-01-30 |
| Weekly downloads | 0 |
| License | GPL-2.0-or-later |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=14.0.0 |
| Dependencies | 22 |
| Unpacked size | 7.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10522 |
| Author | CKSource |
| Maintainers | bylf |
| Keywords | ckeditor5-build, ckeditor, ckeditor5, ckeditor 5, wysiwyg, rich text, editor, html, contentEditable, editing, operational transformation, ot, collaboration, collaborative, real-time, framework |

## Links

- npm: https://www.npmjs.com/package/five-editor
- Repository: https://github.com/ckeditor/ckeditor5
- Homepage: https://ckeditor.com/ckeditor-5
- Issues: https://github.com/ckeditor/ckeditor5/issues
- npm.io page: https://npm.io/package/five-editor

## Dependencies (22)

- [@ckeditor/ckeditor5-link](https://npm.io/package/@ckeditor/ckeditor5-link.md) ^36.0.0
- [@ckeditor/ckeditor5-list](https://npm.io/package/@ckeditor/ckeditor5-list.md) ^36.0.0
- [@ckeditor/ckeditor5-ckbox](https://npm.io/package/@ckeditor/ckeditor5-ckbox.md) ^36.0.0
- [@ckeditor/ckeditor5-image](https://npm.io/package/@ckeditor/ckeditor5-image.md) ^36.0.0
- [@ckeditor/ckeditor5-table](https://npm.io/package/@ckeditor/ckeditor5-table.md) ^36.0.0
- [@ckeditor/ckeditor5-indent](https://npm.io/package/@ckeditor/ckeditor5-indent.md) ^36.0.0
- [@ckeditor/ckeditor5-typing](https://npm.io/package/@ckeditor/ckeditor5-typing.md) ^36.0.0
- [@ckeditor/ckeditor5-heading](https://npm.io/package/@ckeditor/ckeditor5-heading.md) ^36.0.0
- [@ckeditor/ckeditor5-ckfinder](https://npm.io/package/@ckeditor/ckeditor5-ckfinder.md) ^36.0.0
- [@ckeditor/ckeditor5-paragraph](https://npm.io/package/@ckeditor/ckeditor5-paragraph.md) ^36.0.0
- [@ckeditor/ckeditor5-autoformat](https://npm.io/package/@ckeditor/ckeditor5-autoformat.md) ^36.0.0
- [@ckeditor/ckeditor5-easy-image](https://npm.io/package/@ckeditor/ckeditor5-easy-image.md) ^36.0.0
- [@ckeditor/ckeditor5-essentials](https://npm.io/package/@ckeditor/ckeditor5-essentials.md) ^36.0.0
- [@ckeditor/ckeditor5-word-count](https://npm.io/package/@ckeditor/ckeditor5-word-count.md) ^36.0.0
- [@ckeditor/ckeditor5-block-quote](https://npm.io/package/@ckeditor/ckeditor5-block-quote.md) ^36.0.0
- [@ckeditor/ckeditor5-media-embed](https://npm.io/package/@ckeditor/ckeditor5-media-embed.md) ^36.0.0
- [@ckeditor/ckeditor5-basic-styles](https://npm.io/package/@ckeditor/ckeditor5-basic-styles.md) ^36.0.0
- [@ckeditor/ckeditor5-cloud-services](https://npm.io/package/@ckeditor/ckeditor5-cloud-services.md) ^36.0.0
- [@ckeditor/ckeditor5-editor-classic](https://npm.io/package/@ckeditor/ckeditor5-editor-classic.md) ^36.0.0
- [@ckeditor/ckeditor5-adapter-ckfinder](https://npm.io/package/@ckeditor/ckeditor5-adapter-ckfinder.md) ^36.0.0
- [@ckeditor/ckeditor5-paste-from-office](https://npm.io/package/@ckeditor/ckeditor5-paste-from-office.md) ^36.0.0
- [@ckeditor/ckeditor5-special-characters](https://npm.io/package/@ckeditor/ckeditor5-special-characters.md) ^36.0.1

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.6 (latest) — 2023-02-21
- 1.0.5 — 2023-02-10
- 1.0.4 — 2023-02-10
- 1.0.3 — 2023-01-30
- 1.0.2 — 2023-01-30
- 1.0.1 — 2023-01-30
- 1.0.0 — 2023-01-30

## README

# ckeditor5 富文本编辑器

## 概述

这是一个自用的 ckeditor5 富文本编辑器，基于 build-classic 修改。

### 当前修改内容

- 工具栏去掉 图片、视频、表格
- 添加字数统计插件
- 添加文字样式插件
- 添加表情包

### 如何使用？

#### 安装

`npm install five-editor`
`npm install @ckeditor/ckeditor5-vue`

```js
main.ts:
import CKEditor from '@ckeditor/ckeditor5-vue'
...
createApp(App).use(router).use(CKEditor)
...

富文本编辑器组件：
<template>
  <div id="app">
    <ckeditor
      :editor="ClassicEditor"
      v-model="valueHtml"
      :config="editorConfig"
    >
    </ckeditor>
    <div v-if="maxCharacters" class="float-right text-#707070">
      {{ characters }} / {{ maxCharacters }}
    </div>
  </div>
</template>

<script setup lang="ts">
import ClassicEditor from 'five-editor'

const props = defineProps<{
  value: string
  placeholder?: string
  maxCharacters?: number
  characters: number
}>()
const emit = defineEmits<{
  (e: 'update:value', val: string): void
  (e: 'update:characters', val: number): void
}>()
const valueHtml = computed({
  get() {
    return props.value
  },
  set(val: string) {
    emit('update:value', val)
  }
})

const editorConfig = ref({
  placeholder: props.placeholder,
  wordCount: {
    onUpdate: (stats) => {
      emit('update:characters', stats.characters)
    }
  }
})
</script>


```

### 样式

![案例](./image/sample.png)

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