jhtmlarea使用方法及注意事项

项目上需要用到富文本编辑器，选了一个轻量级的jhtmlarea,基本够用，特此记录一下使用过程：

官网下载好代码，比较凌乱，自己整理一下，基本目录是这样：

在jsp页面上首先引用 jquery的包，再添加如下引用

页面代码如下：

 $("#infoContentTa").htmlarea({
         toolbar: [
             ["bold", "italic", "underline", "|", "forecolor"],
             ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
             ["link", "unlink"],
             ["orderedList","unorderedList"]
         ],
         toolbarText: $.extend({}, jHtmlArea.defaultOptions.toolbarText, {
                 "bold": "加粗",
                 "italic": "斜体 ",
                 "underline": "下划线",
                 "forecolor": "字体颜色",
                 "p": "分段",
                 "h1":"一级标题",
                 "h2":"二级标题", 
                 "h3":"三级标题", 
                 "h4":"四级标题", 
                 "h5":"五级标题", 
                 "h6":"六级标题",
                 "orderedlist":"项目列表",
                 "unorderedlist":"项目符号"
             }),
         // Specify a specific CSS file to use for the Editor
//          css: "style//jHtmlArea.Editor.css",
         loaded: function() {
         }
     });

最后效果如图：

具体按钮配置可以到官网上去看，都有详细的说明

注意点：

          1. 在使用过程可能会与其他框架有冲突，使用时引用 了easyui.js后，会出现无法编辑的结果；

           2. 获取值与清空值方法不一样，获取值:    $('#textareaId').val();               

                设置值时，调用 html方法(貌似从源码上只看到这个方法)：  $('#textareaId').htmlarea("html",''value“);

            3.按钮文字进行本地化时，官网说是用name就可以替换了，例如在配置中有：“h2”:"二级标题" 这种，结果到了“orderedList” 这种有大写的就不行了，后面到源码里面去看了一下，原来是源码全部是以小写来匹配的（orderedList 所以在配置本地化时要写成  orderedlist）,不然是无法显示成自定义的文本的。