【问题标题】:CKEditor and keypress eventCKEditor 和按键事件
【发布时间】:2013-09-07 17:20:29
【问题描述】:

我有一个简单的页面,它有两个输入文本字段和一个文本区域字段。我一直在为这三个表单字段关联一个按键事件。但是现在我已经使用 CKEditor 将 textarea 更改为富编辑器。我使用了 ckeditor.js、adapters/jquery.js 和其他来自 CKEditor 的相关文件。但是现在与 textarea 关联的按键事件失败了。这是我正在使用的部分代码。

.....
<input type="text" id="sub" name="subject" autocomplete="off">
<input type="text" id="rec" name="recvr" autocomplete="off">

 <textarea  cols="90" rows="18"  name="body" id="content" >  </textarea>

...

在我的 jquery 中,我有以下内容来创建 CKEditor 实例并为表单字段关联一个按键事件:

....
 if(CKEDITOR.instances['body']){
    delete CKEDITOR.instances['body'];
 }
 CKEDITOR.replace('body');

/*translate letters on key press */
$("input#sub").keypress(function(event){
  //alert(this.form);
  TranslateOnKeyPress(event, this.form);
});
/*$("textarea#body").keypress(function(event){
     // alert(this.form);
     TranslateOnKeyPress(event, this.form);
});
*/
 CKEDITOR.instances['body'].on('instanceReady', function() {
      this.document.on('keypress', function(event){
          alert(event + ">> " + this.form + " <<< ");
          TranslateOnKeyPress(event, this.form);
      });
 });
....

所以,现在的问题是 CKEditor 实例中的 this.form 最后返回 undefined 并且 TranslateOnKeyPress(event, this.form) 停止工作。其他文本字段完美运行。所以,我的问题似乎是用函数正确处理表单事件。谁能在这里给我他的手?我们将非常感谢您的帮助。

谢谢,

【问题讨论】:

    标签: ckeditor instance keypress


    【解决方案1】:

    这应该给你一个代表文本区域的父窗体的 jQuery 对象。

        CKEDITOR.instances['body'].on('instanceReady', function (e) {
            this.document.on('keypress', function (event) {
                var form = $("#" + e.editor.name).closest("form");
                TranslateOnKeyPress(event, form[0]);
            });
        });
    

    (使用 CK Editor 4.2 测试)

    【讨论】:

    • $("input#sub") 中的警报返回 '[object HTMLFormElement]'。但是您的答案中 var 的值会返回“[object Object]”。而且 TranslateOnKeyPress 功能仍然不起作用。谢谢。
    • form 变量是一个 jQuery 对象。您可以使用form[0] 获取 html 表单 DOM 元素
    • 我使用 'form[0]' 进行了检查,但按键事件仍然没有被 'TranslateOnKeyPress(event, form[0])' 处理。
    • 我没有TranslateOnKeyPress 的任何信息,所以我无法为您提供帮助
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-23
    • 2021-12-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多