NPM 包 CKEditor-5-Build-Classic-For-Classic-Use 使用教程

背景

CKEditor 是一款非常流行的在线编辑器，许多网站都在使用它。它使用简便，功能强大，而且通过插件可以实现更多的功能。然而，CKEditor 4 已经过时，不再得到更新和维护。同时，CKEditor 5 将原来的一些插件重新设计成了功能独立的子模块，大大增强了可扩展性，但也需要更多的配置和自定义。在此，我们介绍使用 CKEditor 5 构建经典模式用法的 npm 包 CKEditor-5-Build-Classic-For-Classic-Use，为大家提供更为简单快捷的使用方式。

安装

在项目根目录下执行：

npm install --save ckeditor5-build-classic-for-classic-use

使用方法

引入组件

使用时，需要在需要使用的组件中引入 CKEditor-5-Build-Classic-For-Classic-Use：

import ClassicEditor from "ckeditor5-build-classic-for-classic-use";

初始化 CKEditor

在组件的 mounted 中初始化 CKEditor：

mount() {
  ClassicEditor.create(this.$refs.editor).then(editor => {
    this.editor = editor;
  }).catch(error => {
    console.error(error);
  });
}

在组件的 destroyed 中销毁 CKEditor：

-- -------------------- ---- -------
--------------- -
  -- ------------- -
    ----------------------------- -- -
      ----------- - -----
    -------------- ---
      ---------------------
    ---
  -
-

获取已编辑内容

在获取已编辑内容时，需要使用 CKEditor 提供的 getData() 方法：

const data = this.editor.getData();

设置编辑内容

在设置编辑内容时，需要使用 CKEditor 提供的 setData() 方法：

this.editor.setData("Hello, CKEditor!");

配置

CKEditor-5-Build-Classic-For-Classic-Use 提供了一些默认的配置，例如工具栏、Placeholder 等。如果需要对配置进行更改，可以在创建实例时传递配置项：

const config = {
  toolbar: [ "heading", "|", "bold", "italic", "link", "bulletedList", "numberedList", "|", "undo", "redo" ]
};

ClassicEditor.create(this.$refs.editor, config).then(editor => {
  // ...
});

更多的配置项参考 CKEditor 官方文档。

示例代码

下面是一个完整的示例代码：

-- -------------------- ---- -------
----------
  -----
    ---- -------------------
    ------- ---------------------------------
    ------- --------------------------------
  ------
-----------

--------
------ ------------- ---- ------------------------------------------

------ ------- -
  ------ -
    ------ -
      ------- ----
    -
  --
  --------- -
    --------------------------------------------------- -- -
      ----------- - -------
    -------------- -- -
      ---------------------
    ---
  --
  --------------- -
    -- ------------- -
      ----------------------------- -- -
        ----------- - -----
      -------------- ---
        ---------------------
      ---
    -
  --
  -------- -
    --------- -
      ----- ---- - ----------------------
      ------------------
    --
    --------- -
      --------------------------- ------------
    -
  -
--
---------

总结

CKEditor-5-Build-Classic-For-Classic-Use 是使用 CKEditor 5 构建经典模式用法的 npm 包，提供了快速简便的使用方式。通过本文的介绍，我们可以轻松上手 CKEditor 的使用，希望大家能够享受到它带来的便利。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f72775838a3