CKEditor 工具栏配置指南 (三)

CKEditor工具栏配置指南(三)

引言

在现代Web开发中，富文本编辑器是不可或缺的工具之一，它使用户能够轻松地创建、编辑和格式化文本内容。CKEditor作为一款功能强大且易于集成的富文本编辑器，在众多开发者中备受青睐。其灵活的工具栏配置使得开发者能够根据项目需求定制编辑器的功能和外观，从而提升用户体验和工作效率。

本文将承接上文,重点探讨CKEditor工具栏的配置，介绍如何通过简单的配置和定制，实现编辑器功能的精确控制，并提供常用工具栏选项的详细说明和示例。同时，我们还将介绍如何引入中文语言包和实现图片上传功能，以满足中文用户的需求。

CKEditor中文语言包引入

为了提供更好的用户体验，我们首先需要引入中文语言包。通过以下步骤，我们可以将编辑器界面切换为中文显示：

1. 导入中文语言包：import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js'。
2. 在编辑器配置项中设置语言为中文：language: 'zh-cn'。

这样一来，编辑器的界面和提示信息将以中文显示，更符合中文用户的使用习惯。

<script setup>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js'
const editor = ClassicEditor
const editorData = '<p>Content of the editor.</p>'
const editorConfig = {
  language: 'zh-cn',
  toolbar: [
    'Heading',
    {
      label: 'Basic styles',
      icon: 'text',
      items: ['bold', 'italic']
    }
  ],
}
</script>
<template>
  <div class="container" id="main">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  background: #000;
  padding: 40px;
}
</style>

常用工具栏选项

CKEditor的工具栏提供了丰富的功能选项，以下是总结的一些常见的工具栏选项及其功能描述：

功能	描述
Heading 段落	用于添加标题，帮助结构文档，并让内容更易于阅读和搜索引擎解析。
bold 字体加粗	用于将选定文本设置为粗体。
italic 斜体	用于将选定文本设置为斜体。
link 超链接	用于添加超链接到选定文本。
bulletedList 无序列表	用于创建无序列表，列出项目之间没有明确的顺序。
numberedList 有序列表	用于创建有序列表，列出项目按照特定的顺序排列。
outdent 减少缩进	用于减少选定文本的缩进量。
indent 增加缩进	用于增加选定文本的缩进量。
imageUpload 上传图片	用于上传并插入图片到编辑器中。
blockQuote 块引用	用于引用他人的内容或者突出显示特定文本块。
insertTable 插入表格	用于插入一个新的表格到编辑器中。
mediaEmbed 插入媒体	用于插入嵌入式媒体内容（如视频、音频等）到编辑器中。
undo 撤销	用于撤销最近的编辑操作。
redo 重做	用于重做被撤销的编辑操作。
Basic styles 字体样式	提供了字体样式设置，如粗体、斜体等。

items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo'],

这些功能使得CKEditor更加灵活和强大，能够满足用户在编辑文本时的不同需求。

自定义配置

你同样也可以添加自定义的标题, 比如追加 h4 - h5, 或者自定义的段落样式, 在全局 css 中扩展 class 即可。

  heading: {
    options: [
      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
      {
        model: 'heading1',
        view: 'h1',
        title: 'Heading 1',
        class: 'ck-heading_heading1'
      },
      {
        model: 'heading2',
        view: 'h2',
        title: 'Heading 2',
        class: 'ck-heading_heading2'
      },
      {
        model: 'heading3',
        view: 'h3',
        title: 'Heading 3',
        class: 'ck-heading_heading3'
      },
      {
        model: 'heading4',
        view: 'h4',
        title: 'Heading 4',
        class: 'ck-heading_heading4'
      },
      {
        model: 'heading5',
        view: 'h5',
        title: 'Heading 5',
        class: 'ck-heading_heading5'
      },
      {
        model: 'custom_red',
        view: '红色标题',
        title: '红色标题',
        class: 'ck-heading_custom_red'
      }
    ]
  }

上传图片功能配置

除了常用的文本编辑功能外，CKEditor还支持上传图片功能。要启用图片上传功能，我们需要进行以下配置：

1. 配置额外的上传插件：通过引入上传适配插件和编写上传适配器来实现图片上传功能。
2. 设置编辑器配置项：在工具栏选项中配置上传图片按钮，并在配置中添加额外插件的引用。

// CKEditor 上传适配插件
const CkUploadAdapterPlugin = () => {}
const editorConfig = {
  extraPlugins: [CkUploadAdapterPlugin],
}

CkUploadAdapterPlugin

function CkUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        // 在这里将URL配置为后端上载脚本
        return new CkUploadAdapter(loader);
    };
}

CkUploadAdapter

const UPLOAD_URL = "你的服务端上传图片地址"
class CkUploadAdapter {
    constructor(loader) {
        // 要在上载期间使用的文件加载器实例
        this.loader = loader;
    }

    // 启动上载过程
    upload() {
        return this.loader.file
            .then(file => new Promise((resolve, reject) => {
                this._initRequest();
                this._initListeners(resolve, reject, file);
                this._sendRequest(file);
            }));
    }

    // 中止上载过程
    abort() {
        if (this.xhr) {
            this.xhr.abort();
        }
    }

    // 使用传递给构造函数的URL初始化XMLHttpRequest对象.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open('POST', UPLOAD_URL, true);
        xhr.responseType = 'json';
    }

    // 初始化 XMLHttpRequest 监听.
    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `无法上传文件: ${file.name}.`;

        xhr.addEventListener('error', () => reject(genericErrorText));
        xhr.addEventListener('abort', () => reject());
        xhr.addEventListener('load', () => {
            const response = xhr.response;
            // 当code＝＝200说明上传成功，可以增加弹框提示；
            // 当上传失败时，必须调用reject()函数。
            if (!response || response.error) {
                return reject(response && response.error ? response.error.message : genericErrorText);
            }
            //上传成功，从后台获取图片的url地址
            // console.log("上传成功，从后台获取图片的url地址:", response)
            resolve({
                default: response.data.file_link
            });
        });

        // 支持时上传进度。文件加载器有#uploadTotal和#upload属性，用于在编辑器用户界面中显示上载进度栏。
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', evt => {
                if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            });
        }
    }

    // 准备数据并发送请求
    _sendRequest(file) {
        //通过FormData构造函数创建一个空对象
        const data = new FormData();
        //通过append()方法在末尾追加key为files值为file的数据
        data.append('file', file);//上传的参数data
        // data.append( 'memberId', "666" );
        /**
         * 重要提示:这是实现诸如身份验证和CSRF保护等安全机制的正确位置。
         * 例如，可以使用XMLHttpRequest.setRequestHeader()设置包含应用程序先前生成的CSRF令牌的请求头。
         */
        this.xhr.send(data);
    }
}

通过以上配置，我们可以实现在CKEditor中上传并插入图片的功能，提升用户编辑体验。

结语

通过本文的介绍，我们了解了如何配置CKEditor的工具栏，实现编辑器功能的定制和优化。同时，我们也探讨了常用工具栏选项的功能和用法，并介绍了中文语言包的引入和图片上传功能的配置方法。希望本文能够帮助您更好地使用CKEditor，并为您的项目开发提供便利。