Question

是否有一种简单快捷的方法可以向CKeditor添加onchange事件。

我希望在文本发生变化时做些什么？感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="js/ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="js/ckeditor/adapters/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
   $(function () {
        var config = {
            toolbar:
                    [
                        ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList']
                    ],
            width: 600,
            height: 400,
            resize: false
        };

        $('.jquery_ckeditor').ckeditor(config);


        CKEDITOR.instances[0].on('change', function () {
            alert("test");
        });





    });

    //]]>
    </script>
</head>
<body>
    <textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</body>
</html>

Answer 1

修改即可。对不起，我之前的答案版本不正确。

正如我所发现的那样，对于CKEDITOR而言，这并不是一个标志性的改变事件。而不是它你可以在textarea的另一个事件的帮助下模仿它。例如，您可以使用事件'keydown'。

通过将CKEDITOR的代码更改为下一个代码来尝试：

CKEDITOR.instances[idOfTextarea].document.on('keydown', function() {alert('text')});

More info

Answer 2

您的代码中存在错误：

CKEDITOR.instances[0]

实例是一个对象，你可以通过键获得值（编辑器）。

将其替换为

CKEDITOR.instances[yourInstanceName]

Answer 3

CKEDITOR.instances.editor1.on('change', function() { 
    console.log("TEST");
});

Answer 4

CKEditor提供了各种Documentation中提到的events。

Change Event：更改编辑器的内容时触发。

由于性能原因，无法验证内容是否确实更改。相反，编辑器监视通常会导致更改的几种编辑操作。因此，在某些情况下，如果没有发生任何更改便会触发此事件，甚至可能触发两次。

如果重要的是不要使更改事件触发得太频繁，则应在事件侦听器中比较以前和当前的编辑器内容。不建议在每次更改事件时都这样做。

请注意，更改事件仅在所见即所得模式下触发。为了在源代码模式下实现类似的功能，您可以侦听例如按键事件或本机输入事件（Internet Explorer 8不支持）。

CKEDITOR.instances.editor1.on('change', function () {
    // operations
});

此处editor1是元素{{1}的id或元素的textarea。

将onchange事件添加到ckeditor的简单方法？

4 个答案: