如何将行内编辑器的内容保存到服务器？

Question

我将使用CKeditor允许用户在登录后直接内联编辑页面内容。

我知道可以使用以下方式访问数据：

var data = CKEDITOR.instances.editable.getData();

但我不知道如何将数据发送到脚本，以便可以更新数据库。如果脚本每次有人取消选中 contenteditable 元素时运行，那就太棒了...但我不知道这是否可能。

任何提示都会很好！ :)

我的网站是使用php/mysql构建的。

- Dan Temple

Answer 1

像这样的东西：

CKEDITOR.disableAutoInline = true;

CKEDITOR.inline( 'editable', {
    on: {
        blur: function( event ) {
            var data = event.editor.getData();
            // Do sth with your data...
        }
    }
} );

请注意，此方法不适用于其他交互方式，例如：用户调用editor.setData()或在编辑时关闭网页。这种情况下，内容将会丢失。如果我是你，我宁愿定期检查是否有新数据：

CKEDITOR.disableAutoInline = true;

var editor = CKEDITOR.inline( 'editable', {
    on: {
        instanceReady: function() {
            periodicData();
        }
    }
} );

var periodicData = ( function(){
    var data, oldData;

    return function() {
        if ( ( data = editor.getData() ) !== oldData ) {
            oldData = data;
            console.log( data );
            // Do sth with your data...
        }

        setTimeout( periodicData, 1000 );
    };
})();

- oleq

---

是否可以在特定类上调用ckeditor，而不是ID - 因为我有多个要编辑的页面区域。 - Dan Temple

将 contenteditable="true" 添加到您的元素中，并设置 CKEDITOR.disableAutoInline = false。 - oleq

那么，如果我不使用以下代码，如何使ckeditor在失焦时触发：CKEDITOR.inline( 'headline', { on: { blur: function( event ) { - Dan Temple

对于所有编辑器，使用以下代码：CKEDITOR.on( 'blur', function( event ) {} ) - oleq

当我在contenteditable=true的div上单击或失去焦点时，您最后一个命令定义的事件处理程序没有被调用... - Michael

Answer 2

CKEDITOR.inline('editable'  ,{
        on:{
            blur: function(event){
                if (event.editor.checkDirty())
                    console.log(event.editor.getData());
            }
        }
    });

试一下这个。

- kei.

Answer 3

看起来 "blur" 事件可能会对您有所帮助： http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#event:blur

- Andriy Kuba

---

好的，那么当页面上有很多contenteditable=true元素时，你如何知道什么是“编辑器”，但你不知道哪一个会处于活动状态（或者甚至在初始化时你可能不知道这些元素将是什么，因为有些可能会被动态添加）。使用CKEDITOR.on似乎不起作用（事件从未被调用）。 - Michael

我所做的是根据数据动态创建编辑器，有时一个，有时十个等等。在这种情况下，我的脚本中有一个“editor”实例。它不是全局的“CKEDITOR.on”，而是确切的实例“editor.on”。因此，我能够在每个实例上精确定义“blur”事件。通常，这是一个简单的函数，将消息“获取数据（editor.getData()）并发送”发送到与服务器通信的应用程序部分。 - Andriy Kuba