如何使用实时预览和光标制作编辑器[关闭]答案

【问题标题】：How to make an editor with live preview and a cursor [closed]如何使用实时预览和光标制作编辑器[关闭]
【发布时间】：2021-01-30 09:52:33
【问题描述】：

我想做一个类似于https://stackedit.io/app# 的实时编辑器。它不是用于降价，而是一些自定义格式。

它将页面一分为二，一方面，用户编辑内容。另一方面，内容被解析并转换为html，一些脚本在其上运行并呈现。

实现这一目标的一种简单方法是什么？编辑器是文本框，还是常规的 html。编辑器光标是由什么组成的？

【问题讨论】：

你的代码在哪里？
这个问题太笼统了。问如何做一个“编辑器”不是一个简单、简洁的问题。
这似乎对w3.org/wiki/Web_Editing_APIs有帮助

标签： javascript html css markdown

【解决方案1】：

您可以使用此 HTML API 'contenteditable' 创建一个非常基本的文本编辑器使用其他 API，如

document.execCommand('bold')
document.execCommand('underline')

你可以添加更多

这是 API 的一个小演示：

document.querySelector('#bold').addEventListener('click', function() {
    document.execCommand('bold');
});


document.querySelector('#udl').addEventListener('click', function() {
    document.execCommand('underline');
});

<div contenteditable="true" spellcheck="false">TYPE WHAT YOU WANT !!</div>
<button id="bold">BOLD</button>
<button id="udl">Under Line</button>

还有我从你提供的网站上得到的这行 HTML 代码

<pre class="editor__inner markdown-highlighting" tabindex="0" contenteditable="true" style="padding: 10px 25px 43px;" spellcheck="false"><div class="cledit-section">

是核心，但是要构建这样一个Web应用程序非常复杂，但是有很多js库可以帮助您，您不必重新发明轮子

【讨论】：