1. cis7 sites/all/libraries/at.js/index.html
  2. cle7 sites/all/libraries/at.js/index.html
  3. ecd7 sites/all/libraries/at.js/index.html
  4. elmsmedia7 sites/all/libraries/at.js/index.html
  5. harmony7 sites/all/libraries/at.js/index.html
  6. icor7 sites/all/libraries/at.js/index.html
  7. meedjum_blog7 sites/all/libraries/at.js/index.html
  8. mooc7 sites/all/libraries/at.js/index.html

And!! it support ContentEditable mode too!!

Try here now! :h


View source
<html lang="en">
  <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
  <link rel="stylesheet" href="dist/css/jquery.atwho.css" />
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="dist/js/jquery.atwho.js"></script>
  <script type="text/javascript" src="bower_components/Caret.js/src/jquery.caret.js"></script>
  <script type="text/javascript">
    var emojis = [
      "smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee",
      "a", "ab", "airplane", "alien", "ambulance", "angel", "anger", "angry",
      "arrow_forward", "arrow_left", "arrow_lower_left", "arrow_lower_right",
      "arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right",
      "art", "astonished", "atm", "b", "baby", "baby_chick", "baby_symbol",
      "balloon", "bamboo", "bank", "barber", "baseball", "basketball", "bath",
      "bear", "beer", "beers", "beginner", "bell", "bento", "bike", "bikini",
      "bird", "birthday", "black_square", "blue_car", "blue_heart", "blush",
      "boar", "boat", "bomb", "book", "boot", "bouquet", "bow", "bowtie",
      "boy", "bread", "briefcase", "broken_heart", "bug", "bulb",
      "person_with_blond_hair", "phone", "pig", "pill", "pisces", "plus1",
      "point_down", "point_left", "point_right", "point_up", "point_up_2",
      "police_car", "poop", "post_office", "postbox", "pray", "princess",
      "punch", "purple_heart", "question", "rabbit", "racehorse", "radio",
      "up", "us", "v", "vhs", "vibration_mode", "virgo", "vs", "walking",
      "warning", "watermelon", "wave", "wc", "wedding", "whale", "wheelchair",
      "white_square", "wind_chime", "wink", "wink2", "wolf", "woman",
      "womans_hat", "womens", "x", "yellow_heart", "zap", "zzz", "+1",
    var names = ["Jacob","Isabella","Ethan","Emma","Michael","Olivia","Alexander","Sophia","William","Ava","Joshua","Emily","Daniel","Madison","Jayden","Abigail","Noah","Chloe","你好","你你你"];

    var names = $.map(names,function(value,i) {
      return {'id':i,'name':value,'email':value+""};
    var emojis = $.map(emojis, function(value, i) {return {key: value, name:value}});

    var at_config = {
      at: "@",
      data: names,
      tpl: "<li data-value='@${name}'>${name} <small>${email}</small></li>",
      show_the_at: true
    var emoji_config = {
      at: ":",
      data: emojis,
      tpl:"<li data-value=':${key}:'>${name} <img src='${name}.png'  height='20' width='20' /></li>",
      insert_tpl: "<img src='${name}.png'  height='20' width='20' />",
    $inputor = $('#inputor').atwho(at_config).atwho(emoji_config);
    $inputor.caret('pos', 47);

    ifr = $('#iframe1')[0]
    ifrBody = ifr.contentDocument.body
    ifrBody.contentEditable = true = 'ifrBody'
    ifrBody.innerHTML = 'For <strong>WYSIWYG</strong> which using <strong>iframe</strong> such as <strong>ckeditor</strong>'

  <!--link href=',700|Bubblegum+Sans|Overlock:400,900|PT+Sans:400,700|PT+Sans+Narrow:400,700|Magra|Asap:400,700|Share:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' -->
  <link href=',700' rel='stylesheet' type='text/css'>

  <style type="text/css">
    html, body {
      padding: 0;
      margin: 0;
      font: 14px/1.6 "Lucida Grande", "Helvetica", sans-serif;
      color: #333;
    h1,h2,h3,h4 {
      font-family: 'PT Sans', sans-serif;
      line-height: 40px;
      color: inherit;
      font-weight: bold;
      margin: 10px 0;
      text-rendering: optimizelegibility;
    h2,h3 {
      color: gray;
    strong {
      color: #424242;

    a {
      color: #4183C4;
      text-decoration: none;
    a:hover {
      text-decoration: underline;
    .wrapper {
      width: 750px;
      padding: 20px;
      margin: 0 auto;
    header {
      margin-bottom: 50px;
    header h1 {
      text-align: center;
      font-size: 75px;
    h1 i {
      color: rgb(182, 180, 180);
      font-style: normal;
      font-weight: normal;

    .inputor {
      height: 160px;
      width: 90%;
      border: 1px solid #dadada;
      border-radius: 4px;
      padding: 5px 8px;
      outline: 0 none;
      margin: 10px 0;
      background: white;
      font-size: inherit;
      overflow-y: scroll;
    .inputor:focus {
      border: 1px solid rgb(6, 150, 247);

    ul.doc {
    ul.doc li {
      margin: 0 10px;

    footer {
      margin: 30px 0;

    .github {
      text-align: center;


  <div class="container wrapper">
    <!-- <a id="github" href="" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:999" src="" alt="Fork me on GitHub"></a> -->

    <div id="main">
        <textarea id="inputor" class="inputor">At.js, a github-like autocomplete library :s</textarea>

      <div id="editable" class="inputor" contentEditable="true">
          <b>And!!</b> it support <b style="font-size: 20px">ContentEditable</b> mode too!!
          <img src="" height="20" width="20">
          <img src="" height="20" width="20">
          <img src="" height="20" width="20">
          <b>Try here now!</b><img src="" height="20" width="20">

      <div class="inputor" style="overflow: hidden">
        <iframe src="" id="iframe1" style="width: 100%; height: 100%; border: 0px;"></iframe>

          -> <a class="github" href="">Fork me on GitHub!</a>




Error message

  • Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/elmsln_community/ in drupal_send_headers() (line 1499 of /var/www/html/elmsln_community/
  • Error: Call to undefined function apc_delete() in DrupalAPCCache->clear() (line 289 of /var/www/html/elmsln_community/
The website encountered an unexpected error. Please try again later.