编写我自己的 WYSIWYG 类媒体编辑器

Question

作为一个项目，我想尝试编写我自己的 WYSIWYG 编辑器（有点类似于 https://github.com/yabwe/medium-editor ）或者至少能够编辑已经创建的类似媒体的编辑器以包含我自己的功能。有人可以指导我编辑 yabwe 媒体编辑器以包含我自己的功能吗？我将类编辑为 include/delete 函数。如果我想编写自己的编辑器，当我突出显示某些文本时，如何让编辑器弹出。谢谢！

Answer 1

您主要需要的是具有 contenteditable 属性的 div。您可以在 react 中使用 dangerouslysethtml prop 或在正常 javascript 中使用 setinnerhtml 在其中设置数据。您将能够在其中键入内容，并使用 onChanged 事件捕获 div 内的更改，并在此函数内设置文本样式

document.getElementById("inner").innerHTML = "Paragraph changed!";

#inner{background:yellow}

<!DOCTYPE html>
<html>
<body>

<div class="outer" contenteditable="true">This is a paragraph. <span id="inner"></span> Try to change this text.</div>

</body>
</html>

编写我自己的 WYSIWYG 类媒体编辑器

Program my own WYSIWYG medium-like editor

javascript

wysiwyg

editor