Question

所以我尝试使用CKeditor进行内联编辑，并找到了一个插件，它将ckeditor元素的当前数据发送到ajax脚本，然后将该数据发送到php脚本以便保存。但由于我在每个页面上需要多个编辑器实例，我需要发送编辑器实例的id以及数据。这些是我的文件：

的index.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKeditor test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <div class="content">
        <div class="editable" contenteditable="true">
            Hello there my friend.
        </div>
    </div>

    <script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.disableAutoInline = true;
        CKEDITOR.inline( '.editable' )
    }
    </script>
</body>
</html>

保存数据的插件:(有点乱，对不起）

CKEDITOR.plugins.add( 'inlinesave',

{

    init: function( editor )

    {

        editor.addCommand( 'inlinesave',

            {

                exec : function( editor )

                {


                    addData();



function addData() {
                        var data = editor.getData();
                        var element = editor.element;



                        jQuery.ajax({
                            type: "POST",



                            /*Replace 'dump.php' with the name of the file you wish to use                                  to handle the data.

                            Data can be retrieved from the variable $_POST                                          ['editable_data'].
*/

                            url: "dump.php",



                            data: { editabledata: data + ID OF THE ELEMENT HERE }


                        })



                        .done(function (data, textStatus, jqXHR) {


                            alert("Your content was successfully saved. " +  + " [" +                           jqXHR.responseText + "]");


                        })



                        .fail(function (jqXHR, textStatus, errorThrown) {


                            alert("Error saving content. [" + jqXHR.responseText + "]");

                                });


                    }


                }

            });

        editor.ui.addButton( 'Inlinesave',

        {

            label: 'Save',

            command: 'inlinesave',
            icon: this.path + 'images/inlinesave.png'

        } );

    }

} );

如何实现这一目标？

Answer 1

我有同样的问题。

您可以这样做，因为您已经拥有内联编辑器正在处理的元素：

data: {
  editabledata: data,
  id: element.attr('id')
}

然后在dump.php上的传入请求中有2个POST值

Answer 2

你可以通过以下方式获得元素ID：

editor.container.getId()

CKeditor内联编辑，获取Element类

2 个答案: