如何制作带有实时预览和光标的编辑器

Question

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

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

实现此目的的简单方法是什么？编辑器是文本框，还是普通的html。编辑器光标是用什么做的？

Answer 1

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

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

你可以添加更多

这是 APIs 的一个小演示：

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是我从你提供的网站上得到的，所以这个API

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

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

如何制作带有实时预览和光标的编辑器

How to make an editor with live preview and a cursor

html

javascript

css

markdown