ckeditor中@某人

by 亮 薛

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.2/css/jquery.atwho.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.2/js/jquery.atwho.min.js"></script>
<textarea name="editor1" id="editor1" cols="30" rows="10" class="ckeditor"></textarea>

JavaScript

var jeremy = decodeURI("J%C3%A9r%C3%A9my") // Jérémy
    var names = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia", "Alexander", "Sophia", "William", "Ava", "Joshua", "Emily", "Daniel", "Madison", "Jayden", "Abigail", "Noah", "Chloe", "你好", "你你你", jeremy, "가"];
    names = $.map(names, function(value, i) {
      return {
        'id': i,
        'name': value,
        'email': value + "@email.com"
      };
    });
    var at_config = {
      at: "@",
      data: names,
      headerTpl: '<div class="atwho-header">Member List<small>↑&nbsp;↓&nbsp;</small></div>',
      insertTpl: '${name}',
      displayTpl: "<li>${name} <small>${email}</small></li>",
      limit: 200
    }
    CKEDITOR.on('instanceReady', function() {
      var iframe = $('#cke_editor1 iframe')[0];
      var iframeDocument = iframe.contentWindow.document;
      $(iframeDocument.body).atwho('setIframe', iframe).atwho(at_config);
    })