返回介绍

usage with CKEditor

发布于 2019-05-19 12:54:06 字数 2023 浏览 986 评论 0 收藏 0

Download your CKEditor package

<script src="http://cdn.ckeditor.com/4.4.4/basic/ckeditor.js"></script>

Configure

var at_config = {
  at: "@",
  data: names,
  tpl: "<li data-value='@${name}'>${name} <small>${email}</small></li>"
}

// Bind to every CKEditor instance that'll load in the future
CKEDITOR.on('instanceReady', function(event) {
    
  var editor = event.editor;
    
  // Switching from and to source mode
  editor.on('mode', function(e) {
    load_atwho(this, at_config);
  });
  
  // First load
  load_atwho(editor, at_config);
    
});

function load_atwho(editor, at_config) {
  
  // WYSIWYG mode when switching from source mode
  if (editor.mode != 'source') {

    editor.document.getBody().$.contentEditable = true;
      
    $(editor.document.getBody().$)
      .atwho('setIframe', editor.window.getFrame().$)
      .atwho(at_config);
      
  }
  // Source mode when switching from WYSIWYG
  else {
    $(editor.container.$).find(".cke_source").atwho(at_config);
  }
  
}

Prevent adding a new line when pressing ENTER

var ckeditor = $('#yourSelector').ckeditor({...}).ckeditorGet();
ckeditor.enableEnter = true; //Use this as a flag

ckeditor.on('instanceReady',function(event) {
  var at_config = {...};

  this.document.getBody().$.contentEditable = true;
  $(this.document.getBody().$).atwho(at_config);
  $(this.document.getBody().$).on('shown.atwho', function(event){
      ckeditor.enableEnter = false;
  });
  $(this.document.getBody().$).on('hidden.atwho', function(event){
    setTimeout(function(){
      //console.log("hide! setting to TRUE");
      ckeditor.enableEnter = true;
    },100); //Give it a small time so that the ENTER key only affects the popup and not the editor
  });
});

ckeditor.on( 'key', function( event ) {
  if ( event.data.keyCode == 13 && !ckeditor.enableEnter ) {
    event.cancel();
  }
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文