几天前，我突然想在我的在线编译器中添加Markdown编辑和预览功能，因此我花了两到三天的时间敲门，并且最初的实现了此功能。
实施这些功能似乎有些复杂，但是CodeMirror提供了许多可以更方便地修改编辑内容的API。
在解释我如何意识到这些功能之前，我首先列出实现它时使用的API。
是否在编辑器中选择任何文本。
选定的文本信息。
在编辑器中的给定点之间获取文本。
使用替换替换给定点之间的文本。
设置光标位置。
获取光标的位置。
设置选择范围。
获取一系列文本内容。
在上面的API中，codemirror实例，即编辑器实例。对于行数，列数（行中的字符）。
第一个是实现四个函数的相同方法。
当用户触发加分正体，斜体，中抽线或代码事件时，该过程如下：
如上图所示，让我们讨论未选择光标时的处理：
特定代码和注释如下：
让我们看一下效果：
如果在中文中选择光标，则处理过程相对复杂：
特定代码和注释如下：
让我们看一下效果：
接下来，我将讨论如何实现参考，非debts和有序列表。
我根据VSCODE的Markdown插件的机制处理这三种格式。用户运行时的处理过程，序列列表和有序列表如下：
特定代码和注释如下：
让我们看一下效果：
至于有序的列表，您需要删除当前行前面的空间和符号，然后确定是否从开始开始。如果有的话，取出下一行的数量和数量逐渐增加。其他位置类似于无序列表。
特定代码和注释如下：
让我们看一下效果：
在谈论编辑器之后，让我们谈论预览功能，支持Markdown的编辑如何不能同时滚动？
有两个方案可以实现同步滚动：
均匀的滚动是计算编辑窗口和预览窗口的滚动条的高度以及这两个高度的比例。例如，编辑窗口的滚动条的高度为，预览窗口滚杆高度为。
然后，每当编辑窗口滚动时，预览窗口滚动。
写这本书的优点是方便且良好的，但是缺陷很明显：
如果我在文档中添加图片并且图片很大，则在编辑器窗口中显示的代码，而预览窗口中的元素则不相对。当代码很多时，滚动栏被拉下时效果越明显。Sessencei以编辑器为例。MD工具在此举一个示例：
我很好地拉了滚动条。我们可以发现编辑窗口显示了表情符号的内容，但是预览窗口显示与它无关的公式和流程图。与公式和流程图相对应的代码实际上在表情符号下，影响编辑体验。
考虑到这个缺点，我决定使用元素顶部的顶部定位方法。
在元素顶部定位的原则是：
CodeMirror可以使用编辑器滚杆的位置来获取当前显示在顶部的行号：
获得行号后，您可以获取行的所有代码及以上的代码。
然后，我们使用工具将代码编译到HTML字符串中，并使用转换为真实的DOM元素：
为了考虑性能，我们无法匹配所有标签，因此我们需要制定匹配标签的集合：
以上是我们必须匹配的标签和选择器。我们选择满足匹配条件的元素：
然后，最后一个元素是我们在预览中看到的第一个元素。
下一个过程非常简单：
以上代码只是为了帮助理解实际代码比上面更为复杂。
此时，我们已经实现了滚动编辑窗口，并且预览窗口也滚动到相应的位置：
这样，就完成了一个简单但简单的使用标记编辑器！
CodeMirror是一种非常扩展的代码编辑工具。我们可以通过CodeMirror提供的API实施许多功能。
这是我的在线编辑地址和github仓库地址：
JS-Wcoder脱机版本
JS编码器Github
我仍然是前端Xiaobai。如果我认为这些地方需要优化和改进，我希望教书！