medium-editor-insert-plugin-fork 是一款基于 MediumEditor 插件的 npm 包，它可帮助你在你的前端项目中快速构建出类似 Medium 网站的富文本编辑器。本文将引导你如何安装和使用这个插件以及如何对一些常见用例进行设置。
环境准备
使用 medium-editor-insert-plugin-fork，你需要了解一些基本的前端知识：
- 使用 npm 包管理器
- 基础的 HTML 和 CSS 语法
- 理解 JavaScript 中的 Promise
在此基础上我们将继续展开以下内容：
- 插件安装
- 插件使用说明
- 设置常见用例
插件安装
在你的项目目录下，通过以下命令可安装 medium-editor-insert-plugin-fork：
npm install medium-editor-insert-plugin-fork --save
如果你不熟悉 npm 包管理器可以参考 npm 官方文档。
插件使用说明
- 在 HTML 文件中添加必要的 DOM 元素：
<article id="editable-content"> </article> <ul id="editable-list"> </ul>
- 初始化插件
-- -------------------- ---- -------
--- ------ - --- ------------------------- -
-------- -
-------- -------- --------- ------------ ----- ----- ---------- ---------- --------- --------
-
---
--- ------------- - -
------- -------
------------------- -----------------------
---------------- ------------
------------------ ---------------
-------------- ------
------------- -----
--
-------------------------------------
------- -------
------- -
------- --------------
------- ---
----- ---
------- ---
------- ---
--- ---
------- ---
----------- ---
------- ---
----------- ---
------------- -------------
-
---
----------------------------------
------- -------
------- -
--------- ---
------- -------------
--
-------------- ----
---- 运行你的应用
现在，我们已经成功的使用 medium-editor-insert-plugin-fork 安装了一个富文本编辑器。我们也可以通过传递一些参数来自定义编辑器的外观和功能。
设置常见用例
介绍一些需要特别注意的设置：
图片上传
在以上的例子中，我们可以看到 imagesUploadScript 和 imagesUploadUrl 这两个参数设置，它们告诉插件在上传图片时要发送到哪里以及图片的 URL 格式。
同时，还需要指定 imagesUploadParam 参数来告诉插件在 POST 图片时应该使用哪个键名（例如，'image' 或 'photo'）。
排序列表
在 #editable-list 的设置中，我们也可以看到 sortingMethod 这一属性。如果你希望你的列表是有序的（即：从 1 开始），你可以将该属性设置为 'ol'，否则你可以将其设置为 'ui' 从而获得一个无序列表。
文件上传
在 editable-content 的设置中，我们可以看到 fileUpload 这一属性。通过上传文件，你可以将文件的地址作为编辑器中的链接来获取。但这一功能需要与具体的后端 services 配合使用，因为前端使用的只是一个简单的 URL。
总结
medium-editor-insert-plugin-fork 是一个极为强大的前端插件，它给我们带来了构建富文本编辑器的新方式。在文章中我们探讨了如何安装和使用插件，以及如何在客户端自定义插件。希望读者通过此文章的指导和学习能够更好地使用此插件以及构建出更好的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f081e8991b448d5040