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