V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ichord
V2EX  ›  分享创造

At.js 支持 `contentEditable` 模式啦!

  •  
  •   ichord · 2013-08-27 09:32:37 +08:00 · 4439 次点击
    这是一个创建于 4135 天前的主题,其中的信息可能已经有所发展或是发生改变。
    花了几天让 `At.js` 支持 `contentEditable` 模式了, :smile: 动手玩吧!

    At.js
    ===
    **http://ichord.github.io/At.js/**
    (ps. 也可以输入 `@` 试试看, 删除的时候会将整个名字去除掉)

    * 原来 `textarea` 的用法完全不变.
    * 既然可以插入 `HTML`, 那就有 **插入模板**,
    * 还能解决显示 **名字** 但提交 **ID** (API 调用获取已插入项的数据, 自动根据 `id` 过滤重复)
    * 嗯, 我在 `IE 7 - 10` 都测试通过了. (单元测试还没来得及写)

    Caret.js
    =====
    **http://ichord.github.io/Caret.js**
    这是 `At.js` 的重要的组件.


    嗯, 好了. 欢迎提建议.
    16 条回复    2016-09-04 17:00:40 +08:00
    heroicYang
        1
    heroicYang  
       2013-08-27 10:19:09 +08:00
    赞!一直在用~
    cam
        2
    cam  
       2013-08-27 10:20:52 +08:00
    `contentEditable` 是为了支持IE6-7吧。
    辛苦,At.js非常赞。
    ichord
        3
    ichord  
    OP
       2013-08-27 13:38:09 +08:00
    @cam 不. 两种模式都支持, 而且可以同时使用. IE 6 不知道行不行, 没有测试. 其它是测过了的.

    @heroicYang cool! :)
    yolio2003
        4
    yolio2003  
       2013-08-27 19:18:43 +08:00
    您好,at.js的用处是什么? 我看过几次还是没看懂, sorry有点笨
    ichord
        5
    ichord  
    OP
       2013-08-27 22:41:11 +08:00
    @yolio2003 去这个网站里尝试一下就知道 http://ichord.github.io/At.js

    At.js 可以实现 `GitHub` issues 里的自动补全用户名和 emoji 表情, 或者微博的那个 @ 好友的功能.
    liuweifeng
        6
    liuweifeng  
       2013-08-28 10:46:26 +08:00
    iOS Safari 6 中文出不来。。。
    ichord
        7
    ichord  
    OP
       2013-08-28 12:43:24 +08:00
    @liuweifeng 那个出发的中文全角的 `:` 吧!我项目主页的例子只监听了英文半角的 `:` 这个触发事件的字符随便换了啦,全角半角都弄一个.:)
    liuweifeng
        8
    liuweifeng  
       2013-08-28 12:46:21 +08:00
    @ichord 我是试的@ 后面跟“你你”的那个。。。不是冒号
    ichord
        9
    ichord  
    OP
       2013-08-28 12:55:59 +08:00
    @liuweifeng 噢, 条件反射了, 不过都一样的啊...
    ichord
        10
    ichord  
    OP
       2013-08-28 13:01:42 +08:00
    @liuweifeng 呃... 我在 iPad 切换成中文输入 `@你` 的确是出不来的. 因为 `@` 是全角啦....
    在 iPod touch 里 `contenteditable` mode 是没显示出来, 位置错了看不着.
    joyqi
        11
    joyqi  
       2013-08-28 13:03:26 +08:00
    cool,一直在找这玩意
    ichord
        12
    ichord  
    OP
       2013-08-28 13:09:47 +08:00
    @liuweifeng ... 我又试了下. 你是对的. 那个虚拟键盘输入的东东有个"停止联想",要调查调查.
    explon
        13
    explon  
       2013-08-30 09:43:27 +08:00
    不知楼主这个东西是在什么场景下使用,这个程序查找用户是初始化的时候就把用户列表加在 data 里面然后遍历查找,但是实际使用中不会有网站会把所有会员一次查出来,data 虽然提供远程 JSON 支持但却不支持搜索查询。
    ichord
        14
    ichord  
    OP
       2013-08-30 11:16:51 +08:00
    @explon 有个 `remote_filter` 的[Callbacks](https://github.com/ichord/At.js/wiki/Callbacks)可以设置. 然后就可以自由查询了.

    例子可以看这里: https://github.com/ichord/At.js/wiki/How-to-use-remote_filter
    Troevil
        15
    Troevil  
       2015-09-30 13:26:47 +08:00
    stared 看看能不能整合到 editor.md 里面
    xavierskip
        16
    xavierskip  
       2016-09-04 17:00:40 +08:00
    contentEditable 元素在使用 run api 的时候会报错
    `jquery.atwho.js:713 Uncaught TypeError: Cannot read property 'which' of undefined`

    `$('#editable').atwho('run')` 在 [at.js]( http://ichord.github.io/At.js/) 首页上一试便知
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2672 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 15:12 · PVG 23:12 · LAX 07:12 · JFK 10:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.