Nuxt.js - 该死的 CKEditor 5

由于小弟近日专案需要使用文字编辑器,于是选择了 CKEditor 5,意外发现这鬼东西有够难用,所以记录一下使用过程,以防我以后又忘记~哈哈哈哈

安装 CKEditor 5

目前官方共有提供四种版本供使用,分别为 ClassicInlineBalloonDecoupled,在此我选用最基础的 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 的标籤插入档案内,且绑定 editoreditorConfig,并记得将 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 载入我们的页面了
ClassicEditor

客製化自己的 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 即可运作
ckeditor5 客製化

结语

其实将 node_modules 内的东西替换掉不是很好的做法,只是小弟我目前还没研究出其他方法,如果有人知道也麻烦跟我说一下XD


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章