Nuxt.js中使用CKEditor并添加代码高亮功能

初衷是为了给本博客系统找一款支持代码编辑和高亮的富文本框组件，基于此，首先是寻找富文本框组件，以前在
Vue 中用过 CKEditor 和 wangEditor，前者功能全面强大，后者简洁易用。又搜索了一翻，从熟悉程度、文档完整性、更新支持程度最终选择了 CKEditor。

打开 CKEditor 官网，发现有两个版本可供选择：CKEditor4 和 CKEditor5。从官方文档了解到，CKEditor5 几乎完全重写，更组件化，更符合现代框架，并且有官方出品的 ckeditor-vue 组件加持，更易使用和集成，于是首先选择了 CKEditor5。

Nuxt.js 中添加和使用 CKEditor5 的步骤

1、NPM 安装 CKEditor5 及 ckeditor5-vue 组件：

1	npm install @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-vue --save

注：此处选择官方已构建好的 classic 版本，官方构建的其它版本还有 ckeditor5-build-inline、ckeditor5-build-balloon、ckeditor5-build-decoupled-document，另外也可以自行构建，参考官方文档：Creating custom builds。

2、在项目中 plugins 目录下创建 ckeditor.js（作为 ckeditor5-vue 引入的插件），代码如下：

1
2
3

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use(CKEditor);

3、在 nuxt.config.js 中配置，plugins 中增加一行如下：

1	{ src: '~/plugins/ckeditor', ssr: false }

4、在 vue 文件中使用 CKEditor，参考官方文档：Rich text editor component for Vue.js。

在 Nuxt.js 中惟一不同的是需要将

1	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

替换为：

let ClassicEditor;
if (process.browser) {
  ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
}

否则会报 ‘window is not defined’ 错误，这是因为服务端渲染并没有 window 对象，而 CKEditor 源码中使用到了 window 对象，因此需要判断在浏览器端渲染时才引入 CKEditor。此问题的官方说明参考：Window 或 Document 对象未定义？。

至此，搞定了富文本编辑器，接下来就是代码高亮功能了。百度和 Google 了一圈，发现 CKEditor5 并没有官方支持的代码高亮解决方案，并且在 Github 上的 issue 中，官方开发人员将此功能加入到 Roadmap 中，承诺将在后续版本中开发，见贴：Code blocks #436，其中可见从 17 年 12 月到现在快一年时间了，仍没有等到该功能的加入。

随后发现另外两个大牛写的扩展：opf/ckeditor5-code-block 和 Yeolar/ckeditor5-code-block，但是都报错，无法使用，只得继续搜索，终于发现这篇博文：CKEditor 代码高亮显示插件 Code Snippet 安装及使用方法，看到了一丝曙光，于是果断放弃 CKEditor5，改用 CKEditor4。

Nuxt.js 中添加和使用 CKEditor4 的步骤

1、到CKEditor 官网 CodeSnippet 插件下载包含了 Code Snippet 插件的 CKEditor4 压缩包，具体步骤见上面的博文链接；

2、将压缩包解压后放到 Nuxt 项目中 static 目录下；

3、配置 nuxt.config.js 中的 head 节，增加 script 标签对 static 中 ckeditor.js 的引用，代码如下：

head: {
  title: 'hello,world',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: 'hello,world' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ],
  // 添加如下代码，对ckeditor.js的引用
  script: [
    { src: '/ckeditor/ckeditor.js' }
  ]
}

4、在.vue 文件中使用 ckeditor4，为了避免烦琐的初始化、事件监听等步骤，可直接使用开源的vue-ckeditor2。

终于经过一番折腾，搞定了代码高亮的编辑，接下来就是代码高的显示问题了，支持代码高亮的库有prismjs、highlight.js等，这两个库都支持 CodeSnippet 插件生成的代码格式，经过比较之后选择了 prismjs。

Nuxt.js 中使用 prismjs 处理代码高亮的步骤

1、使用 npm 安装 prismjs：

1	npm install --save prismjs

2、在.vue 文件是引入 prismjs 及其样式：

1 2	import Prism from 'prismjs'; import 'prismjs/themes/prism.css';

3、如果需要显示行号和支持 copy 功能，则继续引入插件，不需要则忽略此步：

import 'prismjs/plugins/line-numbers/prism-line-numbers';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/toolbar/prism-toolbar';
import 'prismjs/plugins/toolbar/prism-toolbar.css';
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';

注：line-numbers 为显示代码行号的插件；copy-to-clipboard 为复制到粘贴板的插件，其依赖于 toolbar 插件，需要一并引入。

4、渲染 pre 代码块，在 mounted 钩子中加入如下代码：

mounted () {
  let pres = document.querySelectorAll('pre')
  for (let i = 0; i < pres.length; i++) {
    pres[i].className += ' line-numbers'
  }
  Prism.highlightAll()
}

注：如果没有使用任何 prismjs 插件，可省略此步骤，因为 prismjs 会自动渲染。

至此，关于代码高亮的编辑和查看就大功告成！