【Javascript练习记录】htmlbox插件及ajax传输时的特殊符号处理

htmlbox是一个基于jQuery的富文本编辑插件，可以实现较多功能，截图如下：

可以自己定制功能，我用的是full，也就是完全功能。

使用方式：在head中包含以下几个文件：

	<script language="Javascript" src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script language="Javascript" src="js/htmlbox.colors.js" type="text/javascript"></script>
	<script language="Javascript" src="js/htmlbox.styles.js" type="text/javascript"></script>
	<script language="Javascript" src="js/htmlbox.syntax.js" type="text/javascript"></script>
	<script language="Javascript" src="js/xhtml.js" type="text/javascript"></script>
	<script language="Javascript" src="js/htmlbox.min.js" type="text/javascript"></script>

这些文件都可以在  htmlbox官网下载 下载到，官网上也有相应的demo，以及 手册

需要使用时，首先建立一个textarea：

<textarea id='myHtmlBox'></textarea>

然后通过类似于demo中的jQuery代码来添加这个插件：

var htmlBox = $("#myHtmlBox").htmlbox({
	    toolbars:[
		    [
			// Cut, Copy, Paste
			"separator","cut","copy","paste",
			// Undo, Redo
			"separator","undo","redo",
			// Bold, Italic, Underline, Strikethrough, Sup, Sub
			"separator","bold","italic","underline","strike","sup","sub",
			// Left, Right, Center, Justify
			"separator","justify","left","center","right",
			// Ordered List, Unordered List, Indent, Outdent
			"separator","ol","ul","indent","outdent",
			// Hyperlink, Remove Hyperlink, Image
			"separator","link","unlink","image"
			
			],
			[// Show code
			"separator","code",
	        // Formats, Font size, Font family, Font color, Font, Background
	        "separator","formats","fontsize","fontfamily",
			"separator","fontcolor","highlight",
			],
			[
			//Strip tags
			"separator","removeformat","striptags","hr","paragraph",
			// Styles, Source code syntax buttons
			"separator","quote","styles","syntax"
			]
		],
		skin:"blue"
	});

这样就建好了如第一张图所示的在线富文本编辑器。

编写好后需要通过ajax提交，这里我用的也是jQuery的ajax方式，遇到了一点问题，记录一下：

1. 首先是获得htmlbox中的内容，在其手册中有具体的API，如图：

可以看到htmlbox编辑时默认自动生成html格式的，通过get_html()方法获得内容。

我这里就通过htmlBox.get_html()得到字符串。

这里其生成时，会自动将一些特殊符号转义成html的转义字符，但是还有一些不会转义，比如单引号“ ‘ ” 和双引号“ " ”，而且转义之后会生成&，所以直接在ajax中用字符串传输的话需要进行特殊处理，这里我使用的方式如下：

$.ajax({
	        url :'article_writeArticle', 
	        type:'POST', 
	        dataType:'json', 
	        data:{'title':$('#articleTitle').val(),'content':htmlBox.get_html()},
	        success:ajaxSuccess 
});

这样就将htmlBox中的内容直接传输到后台的article_writeArticle的action了，我是用的struts2接收的，在action中做如下定义：

public class ArticleActions extends ActionSupport{
	private String title;
	private String content;
...

再对应title和content各自的get&set方法就行了，中文也是可以传输的，但是注意前提将所有的字符集均设置成相同字符集就可以了，这里我是设置成utf-8。