原生javascript 富文本编辑

原生JavaScript富文本编辑器（Native HTML Editor）指的是使用JavaScript直接操作DOM来实现的文本输入和格式化功能，而不是依赖于第三方库。在JavaScript中，常用的富文本编辑功能可以通过以下几个步骤来实现：

1. 创建`<textarea>`或`<div contenteditable="true">`元素：这是基础，允许用户直接编辑内容，其内容会实时反映在DOM中。

<textarea id="myEditor"></textarea>

或者

<div id="myEditor" contenteditable="true"></div>

2. 添加事件监听：监听`oninput`或`onchange`事件，以便在用户输入时更新显示内容或执行格式化操作。

const editor = document.getElementById('myEditor');
editor.addEventListener('input', function() {
  // 更新或格式化内容
});

3. DOM操作：通过操作`innerHTML`、`innerText`、`createElement`等方法，动态创建或修改HTML元素来添加格式（如字体、颜色、段落、列表等）。

const boldButton = document.createElement('button');
boldButton.innerText = 'Bold';
boldButton.addEventListener('click', () => {
  editor.innerHTML = `<b>${editor.innerHTML}</b>`;
});

4. 实现更复杂的功能：可以结合正则表达式、HTML解析库（如`DOMPurify`）来处理用户输入的HTML，确保安全性和格式一致性。

5. 使用光标和选区API：如`Range`, `Selection`等，来支持复制、粘贴、撤销/重做等高级编辑操作。