前言
现在，在网上浏览文章的时候，我们经常可以看到 “使用 markdown 来编辑文章” 这一句话。但是，对于业务不熟悉的人来说，使用 markdown 还是较为困难的。因此，最近有大量的编辑器出现。其中，比较受欢迎的就是 Wiki-Editor。本文就要介绍如何使用这个 npm 包来编辑 markdown 文章。
Wiki-Editor 简介
Wiki-Editor 是一款专为 wiki 编辑者打造的编辑器，可以帮助用户优雅的编辑 markdown 格式文本。一款便捷好用的 markdown 编辑器能够大大提升文章编写效率，为在线协作注入了新的动力。
具体来说,使用该编辑器，用户无需了解深奥的 HTML 标签语言，不失精美的排版、图片、链接或者各类更复杂的样式，可以方便地将内部收集的材料、学术研究进文档化。
Wiki-Editor 使用教程
安装 npm 包
我们先来看一下如何安装 wiki-editor，打开终端，进入项目目录，运行下列命令所示即可：
npm i wiki-editor
引入依赖
安装完毕后，在需要使用编辑器的页面，我们需要引入 wiki-editor 的依赖包，可使用 require() 或 import 语句来引入该包。
const WikiEditor = require('wiki-editor')
import WikiEditor from 'wiki-editor'初始化和实例化编辑器
安装完毕，并引入依赖后，我们可以初始化和实例化编辑器了，具体代码如下所示：
<!-- HTML 结构 -->
<div id="myEditor"></div>
// js 代码
const editor = new WikiEditor({
el: document.querySelector('#myEditor')
})以上示例代码中，我们在 HTML 结构中插入一个 id 为 myEditor 的 div 元素，并在 js 代码中生成一个实例化编辑器的 editor 对象。当我们执行完以上代码后，浏览器会默认展示编辑器给我们提示编写。
获取编辑器中的内容
当编辑完成后，我们通常需要获取编辑器中的内容，可以使用 getContent() 方法来获取编辑器中的内容。
const content = editor.getContent() console.log(content) // 返回包含 markdown 格式的内容
插入图片
如果需要在文章中插入图片，我们可以使用 insertImage() 方法来实现。这个方法包含以下两个参数：
url：图片的地址。alt：图片的描述，这是一可选参数。
editor.insertImage('https://img-blog.csdnimg.cn/img_convert/4995319ac29d654b47e1b01efcccb5a5.png', '图片描述')插入代码
当我们需要在文章中插入代码时，可以使用 insertCode() 方法来实现。这个方法包含以下两个参数：
lang：代码的编程语言类型，这是一可选参数，默认为javascriptdata：代码真实内容
editor.insertCode('javascript', 'console.log("Hello, world!")')总结
本文介绍了 npm 包 wiki-editor 的使用方法，这是一款能够帮助我们编辑 markdown 文章的编辑器。我们学习了如何安装和使用这个包，并示范了插入图片和插入代码的方法。希望这篇文章能对正在使用或考虑使用编辑器的读者提供帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b481e8991b448e301b