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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3778 天前的主题，其中的信息可能已经有所发展或是发生改变。

没有文本编辑框的那种~

谢谢大家啦=）

编辑

文本

HTML

15 条回复 • 2014-08-18 23:34:53 +08:00

zzNucker

2014-08-17 22:30:07 +08:00

contentEditable

lrz0lrz

2014-08-17 22:51:22 +08:00

contentEditable + 1

jsonline

2014-08-18 01:13:03 +08:00

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

bombless

2014-08-18 06:37:01 +08:00

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

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

bombless

2014-08-18 06:37:55 +08:00

噗，meikd

bombless

2014-08-18 06:38:56 +08:00

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

kisshere

2014-08-18 08:37:33 +08:00

javascript:document.body.contentEditable=true;

ETiV

2014-08-18 11:27:50 +08:00

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

zzcworld

2014-08-18 17:11:00 +08:00

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

heliumhgy

2014-08-18 20:41:20 +08:00 via Android

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

alexlah

2014-08-18 21:19:22 +08:00

@heliumhgy 是的！

alexlah

2014-08-18 21:23:32 +08:00

@heliumhgy 您知道怎么实现吗？

alexlah

2014-08-18 21:44:40 +08:00

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

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

heliumhgy

2014-08-18 23:00:22 +08:00 via Android

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

heliumhgy

2014-08-18 23:34:53 +08:00 via Android

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