如何使用 HTML 实现在空白网页上任意位置编辑内容？

[alexlah]

没有文本编辑框的那种~

谢谢大家啦=）

[zzNucker]

contentEditable

[lrz0lrz]

contentEditable + 1

[jsonline]

楼上说的都无法满足需求。
应该是在鼠标点击的位置插入一个 contentEditable 的 div，绝对定位，位于最上层。

[bombless]

这里有一个问题是网页的内容是会变的，各个元素会移位。那么你是按照视窗的位置来插入呢还是按照页面整体的位置来插入呢?直接插入到文本流中就没法实现任意位置了，那么会带来更多的棘手的选择题。
所以这个问题一是要给出更多的限制条件，也就是意识到不同类型的页面不可能都一致的处理，另一方面做一些痛苦的妥协。

我之前做的一个是回溯需要插入的元素的祖先元素中第一个不是静态定位的元素，直接给找到的这个元素插入一个绝对定位的子元素。

[bombless]

噗，meikd

[bombless]

没看到标题的空白网页不好意思，那用canvas吧

[kisshere]

javascript:document.body.contentEditable=true;

[ETiV]

如果想像 Word 那种, 双击任意位置就可以开启文本插入的编辑模式, 3楼的做法是正确的

[zzcworld]

任意位置编辑内容？推荐嵌入CKEditor，官方网站在这里： http://ckeditor.com/，示例在这里： http://ckeditor.com/demo#inline

[heliumhgy]

楼主是要实现OneNote那种效果吧

[alexlah]

@heliumhgy 是的！

[alexlah]

@heliumhgy 您知道怎么实现吗？

[alexlah]

就是OneNote那种编辑效果，整个页面就是画布~

我试了一下contenteditable，还是会有边框呢。。

[heliumhgy]

@alexlah o(︶︿︶)o 不清楚啊

[heliumhgy]

不知道 OneNote 的online版是如何实现的，你参考一下吧