ajax传输富文本中base64编码图片

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

.net中用服务器控件<asp:textbox></asp:textbox> 后台可以直接用控件内容（含base64编码图片），并不存在这个问题，但ajax传输时涉及解码问题。

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

<textarea id="txtParameters" name="txtParameters"  class="ckeditor"></textarea>

ckeditor替换<textarea>的js代码：

<script type="text/javascript">

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

</script>

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

<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAA1AGADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDjs0w0maCa5jRCGk4paKQxD0oFFHSkwJFp4NRA09eaQ0PpRQBUipmhFDcGnbTUoTFO207kGXmimCnimIKWgU4LmgBlOAzT1jp4jp2FcYqVIqU8RmnhTmiw7iKlTKlCipVAqWNMQJTttPGKQkVNy0jBANSKlKq1Mq1pYxuMVB6VIsftT1WpVWqC4xY+KlEQx0p6gelSDGKQIh2UbcVKaYRQMaDTw1RmjNQykiXfSF6izSE1mzVIqKBUqiiiuk5SRelPBoopMEPDGnZNFFSWLmkbpRRQNDGplFFQy0JTSaKKyZof/9k=" style="height:53px; width:96px" />

这样图片可以直接作为代码传输。

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传输时”+”会转化成空格，而图片的base64编码中是含有“+“的，所以导致编码有误，这时需要ajax传输前把图片base64编码中“+”转化为“%2B”，用到正则表达式：

var parameter = encodeURI(txtParameters.getData().replace(/(<img [^>]*src=['"][^'"]+[^>]*>)/gi, function (match, capture) { return capture.replace(/\+/g, "%2B"); }));

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

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

ckeditor赋值时，用：txtParameters.setData(value);                  

这样ajax就能传输富文本编辑中含base64编码图片的内容。

欢迎阅读、分享，转载和使用请注明出处，文章来自三里河之光-风、物、情