关于Ajax上传数据不能序列化tinymce富文本内容

最近在重写之前的一个博客项目,终于到最后一步了,想说用ajax把用户评论上传到后台,然后发现上传后的数据不是一串不认识的代码,就是空数据
关于Ajax上传数据不能序列化tinymce富文本内容_第1张图片

原代码是这样写的:

$.ajax('/user/replay', {
     type: 'post',
     data: $('form').serialize(),
     dataType: 'json',
     success: function (data) {

在网上搜寻了一番,才找到了真正的原因,***tinyMce***是被装载在一个文本域中的,那么我们正常用***form***表单提交时,会从文本域中提交数据


    
tinyMCE.init({
    "theme": "advanced",
    "mode": "textareas",
    "width": 789,
    "height": 200
});

但是在ajax表单序列化时,它并不会通过文本域去拿***tinyMce***的内容,这个时候我们就得自己去从***tinyMce***中拿内容了
这是我从网上找的,详情:https://blog.csdn.net/u012679583/article/details/50505842

获取内容:tinyMCE.activeEditor.getContent()
设置内容:tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)

对代码进行了修改,测试已ok:

var content = tinyMCE.activeEditor.getContent();  //提取富文本内容
console.log(content);
$.ajax('/user/replay', {
	type: 'post',
	data: {content:content},  //以这种形式将数据提交
	dataType: 'json',
	success: function (data)

对于比较少的数据可以这样做,但是提交内容多的时候,就不适用了,总不能对每个input内容都去提取吧,然后我想到了一个方法,就是将序列化后的数据和富文本内容拼接起来:

因为form序列化后的内容是 “id=1&title=美食&content=xxxxx” 这种格式的,实际过程中是经过url编码的,这里就不写了

最终结果:

然后就去试了一些拼接,结果成功了:

var content = tinyMCE.activeEditor.getContent();
$.ajax('/user/blob', {
            type: 'post',
            //对富文本数据进行url编码,然后拼接到序列化的表单上
            data: $('form').serialize()+'&content='+encodeURIComponent(content), 
            dataType: 'json',

这个问题纠缠了一晚上,也算是搞明白了,方法有些笨,能用就行!哈哈~

你可能感兴趣的:(关于Ajax上传数据不能序列化tinymce富文本内容)