CKEditor5+vue3使用以及如何添加新工具栏，自定义设置字体fontFamily，自定义上传图片

@YDX

已于 2024-03-08 13:10:56 修改

阅读量8.2k

点赞数 19

分类专栏： vue3 CKEditor5 文章标签： vue.js javascript 前端

于 2023-01-05 13:39:11 首次发布

本文链接：https://blog.csdn.net/weixin_43485503/article/details/128559820

版权

vue3 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

CKEditor5

1 篇文章 0 订阅

订阅专栏

基本使用

官网地址：https://ckeditor.com/ckeditor-5/online-builder/
官网提供了以下几种模式，一般使用经典模式居多，具体差别可访问官网自己试一下。
在这里插入图片描述

基本的使用方法(经典模式)，先别急着操作，看完再决定使用哪种方法。

//下载ckeditor5-vue
npm install @ckeditor/ckeditor5-vue
//下载经典模式
npm install @ckeditor/ckeditor5-build-classic

代码

<template>
  <div id="ckeditor">
    <ckeditor
      ref="editorRef"
      v-model="editorDesign"
      :editor="editor"
      :config="editorConfig"
      :disabled="disabled"
      @ready="onEditorReady"
      @focus="onEditorFocus"
      @blur="onEditorBlur"
      @input="onEditorInput"
      @destroy="onEditorDestroy"
    ></ckeditor>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js' //引入中文包
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false, //是否禁用
  },
})
const editor = ClassicEditor
const editorDesign = ref('') //默认内容

const editorConfig = reactive({
  language: 'zh-cn',
  toolbar: {
    items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo'],
  },
  language: 'zh',
  image: {
    toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
  },
  table: {
    contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
  },
  ckfinder: {
    uploadUrl: `/uploadfile`, // 上传图片接口
    options: {
      resourceType: 'Images',
    },
  },
})

const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy'])

const editorRef = ref(null)
const onEditorReady = () => {
  console.log('准备好了')
  emit('ready')
}

const onEditorFocus = () => {
  console.log('聚焦')
  emit('focus')
}
const onEditorBlur = () => {
  console.log('失去焦点')
  emit('blur')
}

const onEditorInput = () => {
  console.log('正在录入')
  emit('input')
}

const onEditorDestroy = () => {
  console.log('销毁')
  emit('destroy')
}
</script>

<style lang="scss">
#ckeditor {
  .ck-editor__editable {
    min-height: 100px;
    max-height: 500px;
  }
}
</style>

效果如图

在这里插入图片描述

以上基本的工具栏配置比较少，如果基本的满足你的需要，可直接使用如上的方法。

我想要添加更多的工具栏。
以下是我的踩坑经历，我想要一个字体的工具栏，直接下载了字体的依赖

npm i @ckeditor/ckeditor5-font

引入

import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';

然后直接报错Uncaught CKEditorError:ckeditor-duplicated-modules Read more …
在这里插入图片描述
文档说明
大概意思就是重复安装了一些模块，因此以上方法行不通。

更多新工具栏使用方法

如果想要多工具栏的，直接按照如下方法操作。第一种基本使用方法可不操作。

先说一下操作思路，在@ckeditor/ckeditor5-build-classic代码的基础上，添加新工具栏，然后上传打包后的包到私服或者放到项目目录里。

官网去设置工具栏
官网地址：https://ckeditor.com/ckeditor-5/online-builder/
1、这里我使用的是第一个经典模式classic

2、这一步操作，可以直接在下面的工具栏中add想要的工具栏。带☆的是收费的。在默认的基础上我又添加了几种。
在这里插入图片描述

3、把上面的工具栏添加到下面的可以看效果
在这里插入图片描述

4、选择第二个Chinese语言包
在这里插入图片描述

5、start生成包并下载
在这里插入图片描述
6、下载下来之后，在package.json里面可以看到这些依赖就是刚才我们选择的。build文件就是咱们项目中用到的包。

目前已经有的工具栏就是刚才选择的。如果需要增加新的工具栏，在当前目录执行如添加字体 npm i @ckeditor/ckeditor5-font -D，然后在src/ckeditor.js文件引入，添加到builtinPlugins，defaultConfig
在这里插入图片描述

最后执行npm run build打包，重新生成的build文件夹，就是最新的包，把这个包直接放在项目目录里，或者上传到私服都可以。

我这里是上传到了私服，package.json如下配置，package.json的name自己重新命名一下。private改为false。
在这里插入图片描述
publishConfig为上传的私服地址

使用

npm install @ckeditor/ckeditor5-vue
//下载私服上的包
npm install @custom/ckeditor5-custom-build

实际项目中的用法和前面的基本方法一样，只需要更新一下toolbar里面的配置和引入的路径名称。
完整代码，包括自定义上传图片的功能：

<template>
  <div id="ckeditor">
    <ckeditor
      ref="editorRef"
      v-model="editorDesign"
      :editor="editor"
      :config="editorConfig"
      :disabled="disabled"
      @ready="onEditorReady"
      @focus="onEditorFocus"
      @blur="onEditorBlur"
      @input="onEditorInput"
      @destroy="onEditorDestroy"
    ></ckeditor>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import ClassicEditor from '@custom/ckeditor5-build-classic'
import '@customr/ckeditor5-build-classic/build/translations/zh-cn.js' //引入中文包
import MyUploadAdapter from './uploadImg'//自定义上传图片方法
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false, //是否禁用
  },
})
const editor = ClassicEditor
const editorDesign = ref('') //默认内容

const editorConfig = reactive({
  language: 'zh-cn',
  toolbar: {
    items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo','|','fontColor','fontFamily','fontSize','fontBackgroundColor',],
  },
  //自定义设置字体
   fontFamily: {
    options: [
      'default',
      '宋体',
      '新宋体',
      '仿宋',
      '楷体',
      '微软雅黑',
      '黑体',
      '华文仿宋',
      '华文楷体',
      '华文隶书',
      '华文宋体',
      '华文细黑',
      '华文新魏',
      '华文行楷',
      '华文中宋',
      '隶书',
      '苹方 常规',
      '幼圆',
    ],
  },
  language: 'zh',
  image: {
    toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
  },
  table: {
    contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
  },
  ckfinder: {
    uploadUrl: `/uploadfile`, // 上传图片接口
    options: {
      resourceType: 'Images',
    },
  },
})

const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy'])

const editorRef = ref(null)

const onEditorReady = editor => {
  console.log(editor, '准备好了')
  emit('ready')
  //自定义图片上传
  editor.plugins.get('FileRepository').createUploadAdapter = loader => {
    return new MyUploadAdapter(loader, props.filePath)
  }
}

const onEditorFocus = () => {
  console.log('聚焦')
  emit('focus')
}
const onEditorBlur = () => {
  console.log('失去焦点')
  emit('blur')
}

const onEditorInput = () => {
  console.log('正在录入')
  emit('input')
}

const onEditorDestroy = () => {
  console.log('销毁')
  emit('destroy')
}
</script>

<style lang="scss">
#ckeditor {
  .ck-editor__editable {
    min-height: 100px;
    max-height: 500px;
  }
  //设置默认字体
   .ck-editor__editable_inline p {
    font-family: '宋体' !important;
  }
}
</style>

uploadImg.js

export default class MyUploadAdapter {
  constructor(loader, filePath) {
    // Save Loader instance to update upload progress.
    this.loader = loader
    this.filePath = filePath
  }

  async upload() {
    const { fileUpload } = api//上传的接口
   
    let formData = new FormData()
    formData.append('uploadfile', await this.loader.file)

    formData.append('filePath', this.filePath)//存储到服务器的路径


    let config = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    }

    return new Promise(async (resolve, reject) => {
      fileUpload(formData, config)
        .then(async res => {
          
          //注意这里的resolve的内容一定要是一个对象，而且一定要有一个default设置为图片上传后的url，这是ckeditor的规定格式。这里后端返回的路径一定是一个图片全路径，不然回显不了。但是这会涉及到，换了个服务器地址，已经存在数据库的图片显示不出来，不通用。
          //可以让后端进行代理转发解决这个问题，类似于跨域的解决。存储的图片地址不写完整的路径，就是这里的url只有/image,后端代理转发到真正的服务器地址。
          

          resolve({ default: res.url|| '' })
        })
        .catch(err => {
          reject(err)
        })
    })
  }
}

CKEditor5设置默认字体，用的是css写法，这里尝试了config.font_defaultLabel = fontFamily这类写法，都没有用。最后用css实现的。

//设置默认字体
   .ck-editor__editable_inline p {
    font-family: '宋体' !important;
  }

@YDX

关注

19
点赞
踩
40

收藏

觉得还不错? 一键收藏
5
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录