0

我尝试使用 CKEditor 保存我的表单并添加自动保存功能意味着所有输入都将自动保存：

<script>
//hide preview box 
$('document').ready(function() {
    $('#preview').hide(); //Default setting
}); 

//save in db
function CKupdate(){
    for ( instance in CKEDITOR.instances )

        CKEDITOR.instances[instance].updateElement(); //fix texrarea update value

        CKEDITOR.instances[instance].on('key', function() { //auto save 
                $("#save").trigger('click');
            });

        $('#article-form').ajaxForm( { //submit form
        target: '#preview', 
            success: function() { 
                $('#preview').show('slow').delay(800).hide('slow');
            } 
        }); 
}
</script>

<form id="article-form" name="article-form" method="post" action="save.php">
    <textarea name="bodyContent" id="bodyContent"><?php echo $row['content'] ?></textarea>
    <script type="text/javascript">
    CKEDITOR.replace('bodyContent');
    </script>

    <button onClick="CKupdate()" id="save" />Save</button>
</form>

<span id="preview"></span>

我的问题是：

  1. 此自动保存CKupdate()（参考行-> 注释//自动保存）仅在我按下按钮后触发Save .. 如果我不按下则不起作用save。我不确定如何在用户按下之前运行它save。

  2. 用户按下后save，每次用户在 textarea 中插入任何字符串时都会触发保存功能，几秒钟后我的浏览器将挂起。我认为这on('key',不能很好地运行，或者可能需要更改为其他内容。

我实际上想要做的是使用 CKEditor 创建 textarea 并将值保存到 db 并创建用于自动保存的函数。

4

2 回答 2

1

我很遗憾地说，但这看起来非常未经优化。您是否意识到在您第一次单击后，每次按键都会将“keypress”事件再次添加到编辑器实例中？就像您现在按 5 个键一样，您可以单击 5 次保存按钮。

与其让整个函数再次运行，为什么不将保存代码移到另一个函数中呢？像这样：

<script>
//hide preview box 
$('document').ready(function() {
    $('#preview').hide(); //Default setting
    for ( instance in CKEDITOR.instances ) {

        CKEDITOR.instances[instance].updateElement(); //fix texrarea update value

        CKEDITOR.instances[instance].on('key', function() { //auto save 
                $("#save").trigger('click');
            });

   }
}); 

//save in db
function CKupdate(){
    for ( instance in CKEDITOR.instances ) {

        CKEDITOR.instances[instance].updateElement(); //fix texrarea update value


        $('#article-form').ajaxForm( { //submit form
        target: '#preview', 
            success: function() { 
                $('#preview').show('slow').delay(800).hide('slow');
            } 
        }); 
    }
}
</script>

<form id="article-form" name="article-form" method="post" action="save.php">
    <textarea name="bodyContent" id="bodyContent"><?php echo $row['content'] ?></textarea>
    <script type="text/javascript">
    CKEDITOR.replace('bodyContent');
    </script>

    <button onClick="CKupdate()" id="save" />Save</button>
</form>
于 2012-12-03T06:58:23.933 回答
0

更改 CKEDITOR.instances[instance].updateElement(); 到 CKEDITOR.instances.content.getData(); 使用 Ckeditor 版本 3xx

于 2017-05-06T18:57:46.913 回答