html | 基于iframe的简易富文本编辑器

效果图

• 支持: 选中后 ctrl+I 斜体
  

代码

思路就是在iframe种嵌套html和css。

<pre>
- 支持: 选中后 ctrl+I 斜体
- todo: 鼠标实现单击斜体
</pre>
<iframe name="richedit" style="height:30%; width:100%;"></iframe><script>
window.addEventListener("load", ()=>{frames['richedit'].document.body.innerHTML="<b>hello</b> <span style='color:red'>world</span>! From js";frames['richedit'].document.designMode="on";//frames[0].document.designMode="on"
})
</script>

进一步完善 todo

• 鼠标实现单击斜体。
• 添加控制按钮，通过 postMessage 进行父子窗口的通信。
• 选中文字的获取和修饰