用代码点亮灵感！让你的Vue3富文本编辑器支持代码语法高亮

2023-08-19 20:51:21

使用 CKEditor 在 Vue.js 项目中实现代码语法高亮显示

作为一名程序员，清晰易读的代码至关重要。代码语法高亮功能可以让代码井然有序，易于理解。本文将指导你如何在 Vue.js 项目中使用 CKEditor 富文本编辑器轻松实现此功能。

安装 CKEditor

第一步是安装 CKEditor 富文本编辑器：

npm install --save @ckeditor/ckeditor5-vue

注册 CKEditor

在 Vue.js 项目中，你需要注册 CKEditor：

import CKEditor from '@ckeditor/ckeditor5-vue';

Vue.use(CKEditor);

配置 CKEditor

在 Vue.js 组件中，使用 v-model 指令绑定 CKEditor 富文本编辑器的值：

<ckeditor v-model="content"></ckeditor>

启用代码语法高亮显示

要启用代码语法高亮显示，你需要安装 @ckeditor/ckeditor5-highlight 插件：

npm install --save @ckeditor/ckeditor5-highlight

然后，在 CKEditor 配置中添加 highlight 插件：

import CKEditor from '@ckeditor/ckeditor5-vue';
import Highlight from '@ckeditor/ckeditor5-highlight';

Vue.use(CKEditor);

Vue.component('ckeditor', {
  components: {
    CKEditor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editorConfig: {
        plugins: [Highlight]
      }
    }
  },
  template: `
    <ckeditor v-model="value" :config="editorConfig"></ckeditor>
  `
});

代码示例

以下是一个代码示例，演示如何在 Vue.js 项目中使用 CKEditor 实现代码语法高亮显示：

<template>
  <div>
    <ckeditor v-model="content"></ckeditor>
  </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import Highlight from '@ckeditor/ckeditor5-highlight';

Vue.use(CKEditor);

export default {
  components: {
    CKEditor
  },
  data() {
    return {
      content: '// JavaScript code\nconst sum = (a, b) => a + b;'
    }
  },
  editorConfig: {
    plugins: [Highlight]
  }
};
</script>