# testCk

**Repository Path**: binarylhb/test-ck

## Basic Information

- **Project Name**: testCk
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-09
- **Last Updated**: 2024-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## CKEditor5 Demo

ckeditor5 安装指南（vue3）
一、安装
● 安装 ckeditor5 核心
npm install --save @ckeditor/ckeditor5-vue

● 在线定制需要的工具包，然后下载后，放到项目根目录，命名 ckeditor5
● 进入 ckeditor5 文件夹，运行
npm install 或者 yarn install

● 接着运行
npm run build 或者 yarn run build

● 返回项目根目录，运行
yarn add file:./ckeditor5 或者 npm install ./ckeditor5

● 配置 vite.config.js
optimizeDeps: {
include: ['ckeditor5-custom-build/build/ckeditor']
},
build: {
commonjsOptions: {
include: ['ckeditor5-custom-build/build/ckeditor']
}
},

二、使用
● 在 main.js 中引入
// 富文本插件
import CKEditor from '@ckeditor/ckeditor5-vue'
const app = createApp(App)
app.use(CKEditor)

● 再需要使用的地方，或者封装成组件

```js

<template>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>

<script setup>
import { Editor as ClassicEditor } from 'ckeditor5-custom-build/build/ckeditor'
import { onMounted, ref } from 'vue'

const editor = ClassicEditor
const editorData = ref('')

const editorConfig = {
  // The configuration of the editor.
  toolbar: {
    items: [
      'undo',
      'redo',
      '|',
      'findAndReplace',
      'selectAll',
      '|',
      'heading',
      '|',
      'removeFormat',
      'bold',
      'italic',
      'strikethrough',
      'underline',
      'code',
      'subscript',
      'superscript',
      '|',
      'specialCharacters',
      'horizontalLine',
      'pageBreak',
      '|',
      '-',
      'highlight',
      'fontSize',
      'fontFamily',
      'fontColor',
      'fontBackgroundColor',
      '|',
      'link',
      'blockQuote',
      'insertTable',
      'uploadImage',
      // 'codeBlock',//代码块
      // 'htmlEmbed',//html源码
      '|',
      'bulletedList',
      'numberedList',
      'todoList',
      '|',
      'outdent',
      'indent',
      'alignment',
      '|',
      // 'textPartLanguage',
      '|',
      'sourceEditing'
    ],
    shouldNotGroupWhenFull: false
  },
  heading: {
    options: [
      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
      { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
      { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
      { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
      { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
      { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
      { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
    ]
  }
}
</script>

```