V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
alexlah
V2EX  ›  程序员

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

  •  
  •   alexlah · 2014-08-17 22:26:55 +08:00 · 3488 次点击
    这是一个创建于 3749 天前的主题,其中的信息可能已经有所发展或是发生改变。
    没有文本编辑框的那种~

    谢谢大家啦=)
    15 条回复    2014-08-18 23:34:53 +08:00
    zzNucker
        1
    zzNucker  
       2014-08-17 22:30:07 +08:00   ❤️ 1
    contentEditable
    lrz0lrz
        2
    lrz0lrz  
       2014-08-17 22:51:22 +08:00
    contentEditable + 1
    jsonline
        3
    jsonline  
       2014-08-18 01:13:03 +08:00   ❤️ 1
    楼上说的都无法满足需求。
    应该是在鼠标点击的位置插入一个 contentEditable 的 div,绝对定位,位于最上层。
    bombless
        4
    bombless  
       2014-08-18 06:37:01 +08:00   ❤️ 1
    这里有一个问题是网页的内容是会变的,各个元素会移位。那么你是按照视窗的位置来插入呢还是按照页面整体的位置来插入呢?直接插入到文本流中就没法实现任意位置了,那么会带来更多的棘手的选择题。
    所以这个问题一是要给出更多的限制条件,也就是意识到不同类型的页面不可能都一致的处理,另一方面做一些痛苦的妥协。

    我之前做的一个是回溯需要插入的元素的祖先元素中第一个不是静态定位的元素,直接给找到的这个元素插入一个绝对定位的子元素。
    bombless
        5
    bombless  
       2014-08-18 06:37:55 +08:00
    噗,meikd
    bombless
        6
    bombless  
       2014-08-18 06:38:56 +08:00
    没看到标题的空白网页不好意思,那用canvas吧
    kisshere
        7
    kisshere  
       2014-08-18 08:37:33 +08:00   ❤️ 1
    javascript:document.body.contentEditable=true;
    ETiV
        8
    ETiV  
       2014-08-18 11:27:50 +08:00   ❤️ 1
    如果想像 Word 那种, 双击任意位置就可以开启文本插入的编辑模式, 3楼的做法是正确的
    zzcworld
        9
    zzcworld  
       2014-08-18 17:11:00 +08:00
    任意位置编辑内容?推荐嵌入CKEditor,官方网站在这里: http://ckeditor.com/,示例在这里: http://ckeditor.com/demo#inline
    heliumhgy
        10
    heliumhgy  
       2014-08-18 20:41:20 +08:00 via Android
    楼主是要实现OneNote那种效果吧
    alexlah
        11
    alexlah  
    OP
       2014-08-18 21:19:22 +08:00
    @heliumhgy 是的!
    alexlah
        12
    alexlah  
    OP
       2014-08-18 21:23:32 +08:00
    @heliumhgy 您知道怎么实现吗?
    alexlah
        13
    alexlah  
    OP
       2014-08-18 21:44:40 +08:00
    就是OneNote那种编辑效果,整个页面就是画布~

    我试了一下contenteditable,还是会有边框呢。。
    heliumhgy
        14
    heliumhgy  
       2014-08-18 23:00:22 +08:00 via Android
    @alexlah o(︶︿︶)o 不清楚啊
    heliumhgy
        15
    heliumhgy  
       2014-08-18 23:34:53 +08:00 via Android
    不知道 OneNote 的online版是如何实现的,你参考一下吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2794 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 14:26 · PVG 22:26 · LAX 06:26 · JFK 09:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.