Bootstrap wysiwyg，将富文本数据保存到mysql

朱雀 2021-05-10 11:18 585阅读 0赞

Bootstrap提供了一个叫[wysiwyg][]的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到mysql数据库，却不得而知。另外，如何将mysql数据库中的数据显示到wysiwyg也不得而知，对于这两个问题，让我来告诉你解决方案！

\#\#\#一、效果展示  
首先，我们先来看看效果如何：  
![这里写图片描述][20151022114417974]

1.  富文本中有一张图片，还有一个数字列表
2.  我们可以看到编辑后的数据保存成功，以及保存后对应的展示。

\#\#\#二、富文本  
度娘对于富文本的解释如下：

> 富文本格式（Rich Text Format, 一般简称为RTF）是由微软公司开发的跨平台文档格式。大多数的文字处理软件都能读取和保存RTF文档。RTF是Rich TextFormat的缩写，意即多文本格式。这是一种类似DOC格式（Word文档）的文件，有很好的兼容性，使用Windows“附件”中的“写字板”就能打开并进行编辑。RTF是一种非常流行的文件结构，很多文字编辑器都支持它。一般的格式设置，比如字体和段落设置，页面设置等等信息都可以存在RTF格式中，它能在一定程度上实现word与wps文件之间的互访。

如果说富文本不包含图片，我们可以使用普通的html转码方法，见标题四；如果富文本包含图片，普通的html转码已经满足不了我们了，就需要用到[jquery.base64.js][]，见标题三。

那么同时，我们看一看mysql字段的定义：

`description` longtext NOT NULL COMMENT '项目详细描述',

字段类型为longtext（LongText 最大长度4294967295个字元 (2^32-1)，虽然我也不知道到底有多大）。

\#\#\#三、jquery.base64  
\#\#\#\#①、引入jquery.base64.js

同时设置utf-8编码，确保中文不乱码.

$.base64.utf8encode = true;

\#\#\#\#②、富文本表单提交

var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='"
                            + $.base64.btoa($this.html()) + "' />";

关键代码：将富文本对象的html值转换为base64，然后封装到表单form中。  
详细见如下（一整个form提交的表单封装，参照与dwz框架）：

/** * 带文件上传的ajax表单提交 * * @param {Object} * form * @param {Object} * callback */
    function iframeCallback(form, callback) { 
    	YUNM.debug("带文件上传处理");
    
    	var $form = $(form), $iframe = $("#callbackframe");
    
    	// 富文本编辑器
    	$("div.editor", $form).each(
    			function() { 
    				var $this = $(this);
    				var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='"
    						+ $.base64.btoa($this.html()) + "' />";
    				$form.append(editor);
    			});
    
    	var data = $form.data('bootstrapValidator');
    	if (data) { 
    		if (!data.isValid()) { 
    			return false;
    		}
    	}
    
    	if ($iframe.size() == 0) { 
    		$iframe = $("<iframe id='callbackframe' name='callbackframe' src='about:blank' style='display:none'></iframe>")
    				.appendTo("body");
    	}
    	if (!form.ajax) { 
    		$form.append('<input type="hidden" name="ajax" value="1" />');
    	}
    	form.target = "callbackframe";
    
    	_iframeResponse($iframe[0], callback || YUNM.ajaxDone);
    }
    function _iframeResponse(iframe, callback) { 
    	var $iframe = $(iframe), $document = $(document);
    
    	$document.trigger("ajaxStart");
    
    	$iframe.bind("load", function(event) { 
    		$iframe.unbind("load");
    		$document.trigger("ajaxStop");
    
    		if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For
    		// Safari
    		iframe.src == "javascript:'<html></html>';") {  // For FF, IE
    			return;
    		}
    
    		var doc = iframe.contentDocument || iframe.document;
    
    		// fixing Opera 9.26,10.00
    		if (doc.readyState && doc.readyState != 'complete')
    			return;
    		// fixing Opera 9.64
    		if (doc.body && doc.body.innerHTML == "false")
    			return;
    
    		var response;
    
    		if (doc.XMLDocument) { 
    			// response is a xml document Internet Explorer property
    			response = doc.XMLDocument;
    		} else if (doc.body) { 
    			try { 
    				response = $iframe.contents().find("body").text();
    				response = jQuery.parseJSON(response);
    			} catch (e) {  // response is html document or plain text
    				response = doc.body.innerHTML;
    			}
    		} else { 
    			// response is a xml document
    			response = doc;
    		}
    
    		callback(response);
    	});
    }

\#\#\#\#③、富文本数据展示

$('#editor').html($.base64.atob(description, true));

通过base64对数据库中保存的html代码进行解码。

\#\#\#\#④、wysiwyg组件  
关于wysiwyg组件封装代码，我已上传到CSDN的代码库，可详细参照。

\#\#\#四、普通html转码做法

function html_encode(str) { 
    	var s = "";
    	if (str.length == 0)
    		return "";
    	s = str.replace(/&/g, ">");
    	s = s.replace(/</g, "<");
    	s = s.replace(/>/g, ">");
    	s = s.replace(/ /g, " ");
    	s = s.replace(/\'/g, "'");
    	s = s.replace(/\"/g, """);
    	s = s.replace(/\n/g, "<br>");
    	return s;
    }
    
    function html_decode(str) { 
    	var s = "";
    	if (str.length == 0)
    		return "";
    	s = str.replace(/>/g, "&");
    	s = s.replace(/</g, "<");
    	s = s.replace(/>/g, ">");
    	s = s.replace(/ /g, " ");
    	s = s.replace(/'/g, "\'");
    	s = s.replace(/"/g, "\"");
    	s = s.replace(/<br>/g, "\n");
    	return s;
    }

一般情况下，使用上面两个方法对html数据进行编码和解码，但是对于图片的保存却无能为力。

![20190430093935456.jpg][]

[wysiwyg]: http://www.bootcss.com/p/bootstrap-wysiwyg/
[20151022114417974]: /images/20210506/cb5a3285a64c48e79ad9d9a45c279afc.png
[jquery.base64.js]: http://plugins.jquery.com/base64/
[20190430093935456.jpg]: /images/20210506/e5952df8435445318a780b33081b06f1.png