javascript - 使用 ckeditor 进行内联编辑后没有保存数据

Question

我正在尝试构建一个文章系统，其中的内容 div 可以使用 ckeditor 进行内联编辑。内容 div 的数量是可变的，例如一篇文章有​​两个 div:

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

现在我已经浏览了论坛，并尝试将一些答案合并到我的解决方案中以将文本保存到我的数据库中。内联编辑部分有效，ckeditor 显示并且我可以编辑，但似乎我的代码没有发送到应该保​​存它的 php 文件，一旦我点击页面上的其他地方并且 ckeditor 关闭。

以下代码来自这些论坛:

<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 已加载，我的控制台中没有出现任何错误，但我也没有收到任何后期请求，而我确实设法在不同的页面上做了同样的事情，将文本保存在单击保存按钮时的输入表单。

感谢您的帮助。

Answer 1

你的问题是 data-sample="1"在<script>里面标签，这导致该标签内的脚本无法运行(这意味着 div 自动获得了 ckeditor，并通过 CKEDITOR.inline( content_id 。

检查这个:

<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>