由于小弟近日专案需要使用文字编辑器,于是选择了 CKEditor 5,意外发现这鬼东西有够难用,所以记录一下使用过程,以防我以后又忘记~哈哈哈哈
安装 CKEditor 5
目前官方共有提供四种版本供使用,分别为 Classic
、Inline
、Balloon
、Decoupled
,在此我选用最基础的 Classic
版本进行开发
$ npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
将 CKEditor 5 作为 plugin 载入
首先于 plugins 资料夹内新增 ckeditor.js
档案,并载入 & 启用 CKEditor 5
// plugins/ckeditor.jsimport Vue from 'vue'import CKEditor from '@ckeditor/ckeditor5-vue'Vue.use(CKEditor);
将将刚刚的档案载入 nuxt.config.js
内的 plugins,且关闭 SSR
// nuxt.config.jsmodule.exports = { plugins: [ { src: '~/plugins/ckeditor.js', ssr: false } ]}
以上步骤完成后就已经将 CKEditor 5 作为 plugin 载入 nuxt 中了
将 CKEditor 5 插入页面内
首先我们将 ckeditor
的标籤插入档案内,且绑定 editor
与 editorConfig
,并记得将 Classic
样式载入,若无需做额外的设定也可以不必绑定 editorConfig
<template> <div class="container"> <ckeditor :config="editorConfig" :editor="editor"></ckeditor> </div></template><script>let ClassicEditorif (process.browser) { ClassicEditor = require('@ckeditor/ckeditor5-build-classic')}// 因为 node 没有 window 属性,故以此方式载入 Classic 样式export default { data() { return { editor: ClassicEditor, // Classic 样式 editorConfig: { // 客製化设定 } } }}</script>
到此就已经成功将 CKEditor 载入我们的页面了
客製化自己的 CKEditor
想对基础功能做调整可直接在 editorConfig
进行设定,但若要新增其他功能的话,则需要另外安装 plugin,详细可参考官方文档
客製化基础功能
这边示範一些简单的功能给大家看,基本上都只要做些简单的设定或是 css 的调整即可
初始化与工具列
工具列相关直接调整即可,另外还可设定语言,详细可参考官方文档
editorConfig: { toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList' ], // 设定工具列,可使用'|'隔开功能 }, removePlugins: ['Bold', 'Italic'], // 删除工具列的功能 placeholder: '请输入文章...', // 当编辑器内容为空时显示此字串 initialData: '<h2>我是预设字串</h2>', // 初始化载入文字 heading: { // 设定 Heading 内的样式,可新增多个 options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, { model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' }, { model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' } ] }, language: 'zh' // 设定语言}
若要调整编辑器宽高可使用 css 来做调整
.ck-editor__editable{ min-height: 200px;}
上传图片
上传图片可以使用 ckfinder
,需要特别注意的是这边设定 form-data 的 name 是 upload
editorConfig: { ckfinder: { uploadUrl: `${process.env.url}/upload`, // 后端的上传图片 API 路径 options: { resourceType: "Images" // 限定类型为图片 }}
图片对齐
图片对齐亦可直接设定,不过还需另外引入 css 来使用,详细可参考官方文档
editorConfig: { image: { // 设定图片可选择的对齐方式 toolbar: [ 'imageTextAlternative', '|', 'imageStyle:side', 'imageStyle:full', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight' ], styles: ['full', 'side', 'alignLeft', 'alignCenter', 'alignRight'] }}
附上官方 css 设定供参考
:root { --ck-image-style-spacing: 1.5em;}.image-style { .image-style-side, .image-style-align-left, .image-style-align-center, .image-style-align-right { max-width: 50%; } .image-style-side { float: right; margin-left: var(--ck-image-style-spacing); } .image-style-align-left { float: left; margin-right: var(--ck-image-style-spacing); } .image-style-align-center { margin-left: auto; margin-right: auto; } .image-style-align-right { float: right; margin-left: var(--ck-image-style-spacing); }}
影片
影片连结在基本的编辑器加上设定即可显示,不过还需另外搭配 css
editorConfig: { mediaEmbed: { previewsInData: true // 设定影片为可见的格式 }}
.media > div{ width: 100%;}
安装 plugin 客製化
若基本功能无法满足需求时,则可安装 plugin 来扩充功能,可参考官方文档
首先下载 classic
的专案,并进入资料夹使用 mpm 安装套件
$ git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git$ cd ckeditor5-build-classic$ npm install
再来安装需要的套件,这边以 Highlight 进行示範
$ npm install --save @ckeditor/ckeditor5-highlight
开启资料夹中的设定档,并将套件载入,也可在这边把预设样式一併设定完成
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';import Heading from '@ckeditor/ckeditor5-heading/src/heading';import Image from '@ckeditor/ckeditor5-image/src/image';import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';import Indent from '@ckeditor/ckeditor5-indent/src/indent';import Link from '@ckeditor/ckeditor5-link/src/link';import List from '@ckeditor/ckeditor5-list/src/list';import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';import Table from '@ckeditor/ckeditor5-table/src/table';import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';// 将套件 import 进来import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';export default class ClassicEditor extends ClassicEditorBase {}ClassicEditor.builtinPlugins = [ Essentials, UploadAdapter, Autoformat, Bold, Italic, BlockQuote, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Link, List, Paragraph, // 将套件加入建构工具列 Highlight];// 这边是预设的设定,刚刚上面的教学也可直接在这边设定ClassicEditor.defaultConfig = { // 加入 highlight 套件的设定 highlight: { options: [ { model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-highlight-marker-yellow)',type: 'marker' }, { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-highlight-marker-green)', type: 'marker' }, { model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-highlight-marker-pink)', type: 'marker' }, { model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-highlight-marker-blue)', type: 'marker' }, { model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-highlight-pen-red)', type: 'pen' }, { model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-highlight-pen-green)', type: 'pen' } ] }, toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'blockQuote', 'undo', 'redo', // 将套件放在想要的位置 'Highlight' ] }, image: { toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ] }, language: 'en'};
使用指令进行编译进行编译
$ npm run build
最后将自己专案内 node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js
替换成编译完成的 ckeditor5-build-classic/build/ckeditor.js
即可运作
结语
其实将 node_modules
内的东西替换掉不是很好的做法,只是小弟我目前还没研究出其他方法,如果有人知道也麻烦跟我说一下XD