文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
usage with CKEditor
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论