【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。