如何使用ckeditor通过Ajax提交textarea数据？

Question

Ok so this I what I'm working with. This is the code for the textarea being affected:

<div class="chat">
    <div class="messages"></div>
    <textarea class="entry" name="entry" placeholder="Welcome to the Chat. Enter your message here!"></textarea>
    <script type="text/javascript">
        editor = CKEDITOR.replace('entry');
    </script>
</div>

This is the code for my chat.js file that calls all the functions for the chat:

var chat = {}

chat.fetchMessages = function () {
    $.ajax({
        url: 'ajaxchat.php',
        type: 'post',
        data: {
            method: 'fetch'
        },
        success: function (data) {
            $('.chat .messages').html(data);
        }
    });
}

chat.throwMessage = function (message) {
    if ($.trim(message).length != 0) {
        $.ajax({
            url: 'ajaxchat.php',
            type: 'post',
            data: {
                method: 'throw',
                message: message
            },
            success: function (data) {
                chat.fetchMessages();
                chat.entry.val('');
            }
        });
    }
}

chat.entry = $('.chat .entry');
chat.entry.bind('keydown', function (e) {
    if (e.keyCode === 13 && e.shiftKey === false) {
        chat.throwMessage($(this).val());
        e.preventDefault();
    }
});

chat.interval = setInterval(chat.fetchMessages, 5000)
chat.fetchMessages();

Right now all this code is working but the return key isnt being caught to submit the message. Not sure what else I need to do. CKeditor is interpreting the enter/return key as a new paragraph and I need it to submit message data.

Answer 1

If I understood the problem correctly, your issue is with events. You don't bind to events like that for CKEditor. It doesn't use the textarea element directly, it does some magic tricks and creates an iframe and has its own event handling system. To attach to the 13 key event, do something like the following

CKEDITOR.on('instanceReady', function(ev) {
    var editor = ev.editor;

    editor.on('key', function(evt) {
        if (evt.data.keyCode === 13) {
            // do your enter handling here
        }
    }
}

---

On a related note, getting the value like that is a little strange too. Does it actually work? I would change that for the more CKEditor-like

CKEDITOR.instances.entry.getData();