npm 包 apostrophe-editor-2 使用教程

简介

Apostrophe-editor-2 是一个基于 ApostropheCMS 构建的富文本编辑器模块，它使用了 Quill.js 来实现内容的编辑和渲染。它是一个可定制性非常高的模块，可以根据你的需求进行扩展和配置。

安装

通过 npm 安装最新版本的 apostrophe-editor-2。

npm install apostrophe-editor-2

使用

apostrophe-editor-2 库提供了两个组件： apostrophe-rich-text-widgets 和 apostrophe-rich-text-area。前者是一个可以用于实例化一个带有富文本编辑器的小部件，后者是简单的 <div> 元素，你可以在它里面插入一些内容来初始化编辑器。

使用apostrophe-rich-text-widgets

1. 首先在 app.js 中引入模块。

   const apos = require("apostrophe")({
     modules: {
       "apostrophe-editor-2": {},
       "apostrophe-rich-text-widgets": {},
     },
   });

2. 然后在你的模板文件中使用小部件。

   {{ apos.singleton(data, "richText", "apostrophe-rich-text", {
     toolbar: ["Bold", "Italic", "Underline", "Link", "Unlink"],
   }) }}

   上面的代码中我们使用了 apos.singleton 方法来创建唯一的富文本编辑器小部件。data 是当前页面或者区块的数据对象，richText 是这个小部件的唯一标识符，apostrophe-rich-text 则是组件名称。

   toolbar 属性用于指定编辑器的工具栏按钮，它是一个数组，每个元素代表一个按钮。该属性支持 Quill.js 官方文档中提供的所有按钮，你可以根据你的需求来自由配置。

使用apostrophe-rich-text-area

1. 在你的模板中使用一个普通的 <div> 元素，并设置 data-rich-text 属性为 true。

   <div data-rich-text="{{ data._fields.body }}"></div>

   上面的代码中 data._fields.body 表示当前页面或区块的 body 字段。

2. 在 app.js 中注册 apostrophe-rich-text-area 组件。

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

   说明：

   1. apostrophe-rte 是渲染富文本的模块。
   2. sanitizeHtml 属性用于指定编辑器输出的 HTML 标签和属性，由于 Quill.js 会生成一些非标准的标签和属性，因此我们需要自定义它。
   3. additionalTags 表示要允许的自定义标签。
   4. additionalAttributes 表示要允许的自定义属性。

示例代码

下面是完整代码的示例：

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

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

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

结语

apostrophe-editor-2 是一个功能强大、易于扩展的富文本编辑器模块，它为构建基于 ApostropheCMS 的 Web 应用程序提供了便利。通过本文的介绍，你已经了解了它的主要功能和用法，希望能对你的开发有所帮助。

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