效果圖
- 支持: 選中后 ctrl+I 斜體
代碼
思路就是在iframe種嵌套html和css。文章來源地址http://www.zghlxwxcb.cn/news/detail-659111.html
<pre>
- 支持: 選中后 ctrl+I 斜體
- todo: 鼠標實現(xiàn)單擊斜體
</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
- 鼠標實現(xiàn)單擊斜體。
- 添加控制按鈕，通過 postMessage 進行父子窗口的通信。
- 選中文字的獲取和修飾
文章來源：http://www.zghlxwxcb.cn/news/detail-659111.html
到了這里，關于html | 基于iframe的簡易富文本編輯器的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
