ajax上传富文本,ajax传输富文本编辑器中base64编码图片

原标题：ajax传输富文本编辑器中base64编码图片

这里讲述ajax传输富文本编辑器ckeditor中含编码图片的内容的问题。有时用ajax传输富文本编辑器中编码图片存储到数据库后，再次读取的时候不能正确显示。这是因为ajax在传输编码图片时编码内容发生了变化。

.net中用服务器控件 后台可以直接用控件内容(含编码图片)，并不存在上述这个问题，但ajax传输时涉及解码问题。

首先ckeditor编辑器的安装。按着步骤安装，这里不再赘述。安装完成并设置后，要替换html文本编辑控件，这里要用控件，控件中填加样式“class="ckeditor"”如：

ckeditor替换的js代码：

var txtParameters = CKEDITOR.replace('txtParameters');

富文本编辑中可以直接粘贴word文档中含图片的内容，图片上传后以编码形式存在。这里选用一幅小的图片，如：

这样经编码后，图片可以直接作为代码传输。

js获取编辑器中的内容：

var parameter = txtParameters.getData();

此时，获得的内容是含有html标签的内容，传输之后，后台Request时会提示含有潜在风险的内容而无法接收。需要对内容进行编码，用到encodeURI()：

var parameter = encodeURI(txtParameters.getData());

此时，编码的内容即可在ajax中传输，后台C#解码：

String parameter = HttpUtility.UrlDecode(context.Request.Form["parameter"]);

解码后的内容可以存入数据库，但当读取数据库内容，返回ckeditor编辑器时，图片内容并不能显示，原因在于ajax传输时”+”会转化成空格，而图片的编码中是含有“+“的，所以导致编码有误，这时需要ajax传输前把图片编码中“+”转化为“%2B”，用到正则表达式：

var parameter = encodeURI(txtParameters.getData().replace(/(]*src=['"][^'"]+[^>]*>)/gi, function (match, capture) {

return capture.replace(/\+/g, "%2B");

}));

意思即是，把样式内容中的“+”替换为“%2B”,这样后台接收到的内容解码后，再返回ckeditor时，图片即会正常显示。

解释一下正则表达式：//之间为正则表达式，()为匹配内容，gi为修饰符，意为全局匹配，不区分大小写，[]为匹配其中的任意字符，[^]为匹配不在其中的任意字符。function()中，match为匹配, capture为匹配捕捉的第一项，此函数需要一个返回值 return，把匹配的字符串替换为新的字符串。

ckeditor赋值时，用：

txtParameters.setData(value);

这样ajax就能传输含编码图片的内容。

'河之光'，中国传统文化的根基，现代文明的源始。返回搜狐，查看更多

责任编辑：