如何在服务器上保存内联编辑器内容？ [复制]答案

【问题标题】：How do I save inline editor contents on the server? [duplicate]如何在服务器上保存内联编辑器内容？ [复制]
【发布时间】：2012-12-17 20:51:46
【问题描述】：

我正在使用 CKeditor 允许用户在登录后内联编辑页面上的内容。

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

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

但我不知道如何将数据发送到脚本以便更新数据库。如果每次有人取消选择 contenteditable 元素时运行脚本会很酷......但我不知道这是否可能。

任何提示都会很棒！ :)

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

【问题讨论】：

标签： javascript ajax ckeditor

【解决方案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 );
    };
})();

【讨论】：

是否可以在特定类而不是 ID 上调用 ckeditor - 因为我在页面上有多个区域要编辑。
将contenteditable="true" 添加到您的元素并设置CKEDITOR.disableAutoInline = false。
那么我如何让 ckeditor 在没有模糊的情况下触发：CKEDITOR.inline( 'headline', { on: { blur: function( event ) {
CKEDITOR.on( 'blur', function( event ) {} ) 适用于所有编辑。
当我在我的contenteditable=true div 中单击或失去焦点时，没有调用您最后一个命令定义的事件处理程序...

【解决方案2】：

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

试试这个。

【讨论】：

【解决方案3】：

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

【讨论】：

好的，那么当页面上有很多 contenteditable=true 元素时，你怎么知道“编辑器”是什么，但你不知道它们中的一个何时会处于活动状态（或者你甚至不知道初始化时元素是什么，因为有些元素可能会被动态添加。）使用 CKEDITOR.on 似乎不起作用（永远不会调用事件）
我所做的，我根据数据动态创建编辑器，有时是一个，有时是十个等等。在这种情况下，我的脚本中有一个“编辑器”实例。它不是全局的“CKEDITOR.on”，而是确切的实例“editor.on”。所以我能够在每个实例上准确地定义精确的“模糊”事件。通常，它是一个简单的函数，将“获取数据 (editor.getData()) 并发送”消息发送到与服务器对话的部分应用程序。