ckeditor inline save/submit

9 浏览
0 Comments

ckeditor inline save/submit

我无法弄清楚如何从CKEditor实例中获取编辑后的数据并将其发布到一个URL上。\n我在查看这个示例：\nhttp://nightly.ckeditor.com/3995/samples/inlineall.html\n但我无法弄清楚如何保存更改。我可以将新编辑的数据与正在编辑的元素的ID一起发布到PHP吗？\n类似于这样：\n

editor.on('configLoaded', function(){
    // 做一些操作
});

\n我希望能够做类似于这样的操作：\n

editor.on('clickAway', function(e){
    id = e.id();
    // 做一些ajax操作
});

\n但是我似乎找不到任何信息。\n有人知道如何做到这一点吗？\n谢谢。

0

3 答案

0 Comments

问题的原因是：在ckeditor inline编辑器中，通过重写默认的保存按钮来实现保存功能。但是在保存之前，需要比较新旧数据是否有变化。

解决方法是：在编辑器初始化时，获取当前数据并保存在变量中。然后重写保存功能，并使用ajax将数据发送到服务器进行保存。在ajax请求的回调函数中，根据保存结果弹出相应的提示信息。

具体代码如下：

CKEDITOR.disableAutoInline = true;
$("div[contenteditable='true']").each(function(index) {
    var content_id = $(this).attr('id');
    var tpl = $(this).attr('tpl');
    var oldData = null;
    CKEDITOR.inline(content_id, {
        on: {
            instanceReady: function(event) {
                //获取当前数据并保存在变量中
                oldData = event.editor.getData();
                // 重写保存功能
                event.editor.addCommand("save", {
                    modes: {
                        wysiwyg: 1,
                        source: 1
                    },
                    exec: function() {
                        var data = event.editor.getData();
                        // 检查是否有变化
                        if (oldData !== data) {
                            oldData = data;
                            $.ajax({
                                    type: 'POST',
                                    url: 'process.php',
                                    data: {
                                        content: data,
                                        content_id: content_id,
                                        tpl: tpl
                                    }
                                })
                                .done(function(data) {
                                    alert('保存成功');
                                })
                                .fail(function() {
                                    alert('保存失败');
                                });
                        } else
                            alert('数据没有变化');
                    }
                });
            }
        }
    });
});

希望这能帮到你！

0
0 Comments

在这个问题中，用户发现了一个解决方案，解决了关于在服务器上保存ckeditor内联编辑器内容的问题。解决方案是使用模糊事件。

该问题链接到了一个被标记为重复问题的链接。

0
0 Comments

问题的出现原因：

在给定的代码中，出现了一个名为"ckeditor inline save/submit"的问题。这个问题是在一个使用Smarty模板引擎的HTML文件中使用CKEditor进行内联编辑时出现的。

解决方法：

为了解决这个问题，作者提供了以下解决方法：

1. 首先，在HTML模板文件中使用contenteditable属性为true的div标签，将其转换为可内联编辑的区域。

2. 当内容被编辑后（失去焦点），将被编辑的元素id、模板文件名和编辑后的内容通过ajax调用发送到服务器端。

3. 在服务器端，使用PHP代码加载HTML文件，并定位具有正确id的div标签，然后将div标签的内容替换为通过ajax调用发送的内容。

4. 最后，将更新后的HTML文件重新保存到服务器。

还有一些额外的代码，用于存储备份版本以防万一。

问题“ckeditor inline save/submit”的出现是因为作者想要在使用Smarty模板引擎的HTML文件中使用CKEditor进行内联编辑。为了解决这个问题，作者使用了一些JavaScript和PHP代码，通过ajax调用将编辑后的内容发送到服务器，并将内容替换到HTML文件中的相应区域。这个解决方法适用于多个可编辑区域的情况，并提供了备份机制以防止意外情况的发生。

0