five-editor

ckeditor5 富文本编辑器

概述

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

当前修改内容

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

如何使用？

安装

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

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>

样式