javascript - 编写我自己的所见即所得媒体编辑器

标签 javascript editor wysiwyg

作为一个项目,我想尝试编写自己的所见即所得编辑器(类似于 https://github.com/yabwe/medium-editor ),或者至少能够编辑已经创建的类似媒体的编辑器以包含我自己的功能。有人可以指导我编辑 yabwe 媒体编辑器以包含我自己的功能吗?我将编辑哪些类来包含/删除函数。如果我想编写自己的编辑器,如何在突出显示某些文本时弹出编辑器。谢谢你!

最佳答案

您主要需要的是一个具有 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>

关于javascript - 编写我自己的所见即所得媒体编辑器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50704380/

相关文章:

javascript - javascript 中特殊字符的屏蔽

javascript - 我在实时服务器上的 WordPress 项目未对 JS 文件进行排队(收到 404 错误)

android - 已安装但无法配置 FFMPEG

django - 使用 Django 和 S3 静态文件托管的 Heroku 所见即所得

javascript - 如何使用 Jquery 验证引擎来验证 CLEditor(html 编辑器)输入

javascript - 设置所见即所得编辑器的默认字体类型

javascript - 创建 Node.js + socket.io 服务器/客户端,进行用户身份验证、发送/接收数据

javascript - 如何以编程方式填充使用 React 构建的输入元素?

visual-studio - 如何使 Visual Studio 编辑器停止滚动到文件底部?

emacs - Emacs相当于Vim的yy10p?