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

爱意满满的作品展示区。

This topic created in 4642 days ago, the information mentioned may be changed or developed.

花了几天让 `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 replies • 2016-09-04 17:00:40 +08:00

heroicYang

Aug 27, 2013

赞！一直在用~

cam

Aug 27, 2013

`contentEditable` 是为了支持IE6-7吧。
辛苦，At.js非常赞。

ichord

Aug 27, 2013

@cam 不. 两种模式都支持, 而且可以同时使用. IE 6 不知道行不行, 没有测试. 其它是测过了的.

@heroicYang cool! :)

yolio2003

Aug 27, 2013

您好,at.js的用处是什么? 我看过几次还是没看懂, sorry有点笨

ichord

Aug 27, 2013

@yolio2003 去这个网站里尝试一下就知道 http://ichord.github.io/At.js

At.js 可以实现 `GitHub` issues 里的自动补全用户名和 emoji 表情, 或者微博的那个 @ 好友的功能.

liuweifeng

Aug 28, 2013

iOS Safari 6 中文出不来。。。

ichord

Aug 28, 2013

@liuweifeng 那个出发的中文全角的 `：`　吧！我项目主页的例子只监听了英文半角的 `:` 这个触发事件的字符随便换了啦，全角半角都弄一个．：）

liuweifeng

Aug 28, 2013

@ichord 我是试的@ 后面跟“你你”的那个。。。不是冒号

ichord

Aug 28, 2013

@liuweifeng 噢, 条件反射了, 不过都一样的啊...

ichord

Aug 28, 2013

@liuweifeng 呃... 我在 iPad 切换成中文输入 `@你` 的确是出不来的. 因为 `@` 是全角啦....
在 iPod touch 里 `contenteditable` mode 是没显示出来, 位置错了看不着.

joyqi

Aug 28, 2013

cool，一直在找这玩意

ichord

Aug 28, 2013

@liuweifeng ... 我又试了下. 你是对的. 那个虚拟键盘输入的东东有个"停止联想",要调查调查.

explon

Aug 30, 2013

不知楼主这个东西是在什么场景下使用，这个程序查找用户是初始化的时候就把用户列表加在 data 里面然后遍历查找，但是实际使用中不会有网站会把所有会员一次查出来，data 虽然提供远程 JSON 支持但却不支持搜索查询。

ichord

Aug 30, 2013

@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

Sep 30, 2015

stared 看看能不能整合到 editor.md 里面

C0VN

Sep 4, 2016

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