npm 包 wysihtml 使用教程

什么是 wysihtml?

wysihtml(What You See Is What You Get HTML Editor)是一个基于 JavaScript 的 HTML 编辑器,它使用 contenteditable 属性来实现实时编辑效果。

wysihtml 提供了丰富的 API 和插件,可以很容易地扩展其功能。因此,它成为了许多网站和应用程序所使用的首选编辑器之一。

如何在项目中使用 wysihtml?

你可以通过 npm 安装 wysihtml:

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

然后,你需要引入 wysihtml 的 CSS 和 JS 文件:

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

接下来,你需要创建一个 textarea 元素,并在 JS 中将其转换为 wysihtml 编辑器:

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

wysihtml 的配置项

以下是一些常用的配置项:

  • toolbar: 工具栏上显示的按钮。默认为空数组。
  • parserRules: 解析器规则。默认为 WYSIWYG 规则。
  • stylesheets: 样式表。默认为空数组。
  • useLineBreaks: 是否使用换行符而不是 <br> 标签。默认为 false。
  • contentEditableMode: 内容可编辑模式。可取值为 'DIV' 或 'Iframe'。默认为 'DIV'。
  • contentEditableModeFull: 是否使用全屏编辑器。默认为 false。

wysihtml 的插件

wysihtml 提供了许多插件,可以扩展其功能。以下是一些常用的插件:

  • emphasis: 强调文字(粗体、斜体等)。
  • lists: 列表(有序列表、无序列表等)。
  • link: 超链接。
  • image: 图片。
  • table: 表格。

你可以通过以下方式引入这些插件:

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

然后在配置项中启用它们:

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

示例代码

以下是一个完整的示例代码:

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

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

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