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

2013-08-27 09:32:37 +08:00
 ichord
花了几天让 `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` 的重要的组件.


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

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/80341

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX