使用ckeditor内联编辑后，没有运气保存数据

Question

I'm trying to build an article system, where the content divs can be edited inline with ckeditor. The number of content divs is variable, so an article has for example two divs:

<div id="content_11439" contenteditable="true">Click to edit.</div>
<div id="content_11440" contenteditable="true">Click to edit.</div>

Now I have already browsed the forums, and have tried incorporating some answers into my solution for saving the text to my database. The inline editing part works, ckeditor shows and I can edit, but it seems like my code isn't being send to the php-file that should save it once I click somewhere else on the page and ckeditor closes.

The following code comes from these forums:

<script type="template" data-sample="1">

CKEDITOR.disableAutoInline = true;

$("div[contenteditable='true']" ).each(function( index ) {

    var content_id = $(this).attr('id');

    CKEDITOR.inline( content_id, {
        on: {
            blur: function( event ) {
                var data = event.editor.getData();

                var request = jQuery.ajax({
                    url: "http://www.xxxxxx/saveTextDetails.php",
                    type: "POST",
                    data: {
                        content : data,
                        content_id : content_id
                    },
                    dataType: "html"
                });

            }
        }
    } );

});

Jquery is loaded, I don't get any errors in my console, but I don't get any post-requests either, while I did manage to do about the same thing on a different page, to save the text in an input form when clicking a save button.

Thank you for your help.

Answer 1

Your problem was with data-sample="1" inside the <script> tag, which caused the script inside that tag to not run (which means the divs got automatically the ckeditor, and by CKEDITOR.inline( content_id.

Check this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>

<div id="content_11439" contenteditable="true">Click to edit.</div>
<div id="content_11440" contenteditable="true">Click to edit.</div>
<script>
  CKEDITOR.disableAutoInline = true;
  $("div[contenteditable='true']" ).each(function( index ) {
    var content_id = $(this).attr('id');
    CKEDITOR.inline( content_id, {
      on: {
        blur: function( event ) {
          var data = event.editor.getData();
          alert("Sending: " + data)
          /*
          var request = jQuery.ajax({
            url: "http://www.xxxxxx/saveTextDetails.php",
            type: "POST",
            data: {
              content : data,
              content_id : content_id
            },
            dataType: "html"
          });
          */
        }
      }
    } );
  });
</script>

</div>