使用 ckeditor 进行内联编辑后没有保存数据
No luck saving data after editing inline with ckeditor
我正在尝试构建一个文章系统,其中的内容 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 已加载,我的控制台中没有任何错误,但我也没有收到任何 post 请求,而我确实设法做了同样的事情在不同的页面上,单击保存按钮时将文本保存在输入表单中。
感谢您的帮助。
您的问题出在 <script>
标签内的 data-sample="1"
,这导致该标签内的脚本不是 运行(这意味着 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>
我正在尝试构建一个文章系统,其中的内容 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 已加载,我的控制台中没有任何错误,但我也没有收到任何 post 请求,而我确实设法做了同样的事情在不同的页面上,单击保存按钮时将文本保存在输入表单中。
感谢您的帮助。
您的问题出在 <script>
标签内的 data-sample="1"
,这导致该标签内的脚本不是 运行(这意味着 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>