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

V2EX = way to explore

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

已注册用户请登录

爱意满满的作品展示区。

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

花了几天让 `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` 的重要的组件.

嗯, 好了. 欢迎提建议.

插入

contentEditable

16 条回复 • 2016-09-04 17:00:40 +08:00

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/) 首页上一试便知