posts - 13, comments - 7, trackbacks - 0, articles - 0

在线HTML编辑器htmlarea简单使用

Posted on 2007-02-07 13:47 赵永超 阅读(1315) 评论(1)  编辑  收藏 所属分类: Html

 

这几步是如果使用htmlarea3.0的说明,是在网上看到的. 在/htmlarea/examples/web-menu这个文件里有更为详细的说明.下边的这个链接的版本是多国语言版本,默认的语言为英语.

    下载HTMLarea3.0 http://www.jhdown.com/soft/8/141/html/2006220010681.html,解压里面的文件到web站点的/htmlarea目录下(可以是自己建的目录,这里建议直接用htmlarea做为目录);

二、定义javascript的全局变量及引入js文件:

 <script type="text/javascript">
   _editor_url = "${pageContext.request.contextPath}/htmlarea/";
   _editor_lang = "en";
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/htmlarea/htmlarea.js"></script>

<script type="text/javascript">
var editor = null;
function initEditor() {
  editor = new HTMLArea("content");
  editor.generate();
}
</script>

有句editor = new HTMLArea("content");"content"是表单中textarea属性的id,如:

      <html:form action="/actionBbsreply.do?method=update" onsubmit="this['content'].value=editor.getHTML();">
        <textarea cols="110" rows="15" id="content" name="content">
          <bean:write name="bbsreply" property="content"/>
        </textarea>
        <html:submit value=" 提 交 ">
        </html:submit>
      </html:form>

三、在body的onload事件中加载initEditor():

  如:<body bgcolor="#ffffff" onload="initEditor()">

四、注意点:

1、editor = new HTMLArea("content");参数值是表单中textarea属性id;

2、在body的onload事件中加载initEditor();

3、表单onsubmit事件调用this['content'].value=editor.getHTML()

在使用的过程中发现,因为默认是英文语方,提示信息也是英文的, 这对于飞惯用中文的朋友来说很是不方便 ,如果要改变语言的话
   _editor_lang = "en";
把上边代码里的._editor_lang="gb"理论上就可以了, 这样,当代码去运行的时候会找/lang文件夹下的gb.js文件,但是作者发布这套源代码的时候jb.js里的中文是用iso8859-1编码的,我用MyEclipse的javascriptEdit查看器(MyEclipse下*.js的默认)打开的时候看到的全是乱码,这就导至了在jsp页面出现错误.解决的办法就是在改变gb.js的文件的属性, 将编码格式改为utf-8的格式. 然后再加上en.js下边的
 buttons: {
  "ok":           "确定",
  "cancel":       "取消"
 },

 msg: {
  "Path":         "路径",
  "TEXT_MODE":    "现在模式是文本模式.  按[<>]键切换到可视化编辑模式.",

  "IE-sucks-full-screen" :
  // translate here
  "The full screen mode is known to cause problems with Internet Explorer, " +
  "due to browser bugs that we weren't able to workaround.  You might experience garbage " +
  "display, lack of editor functions and/or random browser crashes.  If your system is Windows 9x " +
  "it's very likely that you'll get a 'General Protection Fault' and need to reboot.\n\n" +
  "You have been warned.  Please press OK if you still want to try the full screen editor."
 },

 dialogs: {
  "Cancel"                                            : "Cancel",
  "Insert/Modify Link"                                : "Insert/Modify Link",
  "New window (_blank)"                               : "New window (_blank)",
  "None (use implicit)"                               : "None (use implicit)",
  "OK"                                                : "OK",
  "Other"                                             : "Other",
  "Same frame (_self)"                                : "Same frame (_self)",
  "Target:"                                           : "Target:",
  "Title (tooltip):"                                  : "Title (tooltip):",
  "Top frame (_top)"                                  : "Top frame (_top)",
  "URL:"                                              : "URL:",
  "You must enter the URL where this link points to"  : "You must enter the URL where this link points to"
 }

这些代码.如果有需要的话, 可以把右边属性的值翻译成汉语,这里还有一个要注意的地方就是要对照格式,我把我改正过的贴到这里, 方便查看

// I18N constants -- Chinese GB
// by Dave Lo -- dlo@interactivetools.com
HTMLArea.I18N = {

 // the following should be the filename without .js extension
 // it will be used for automatically load plugin language.
 lang: "gb",

 tooltips: {
  bold:           "粗体",
  italic:         "斜体",
  underline:      "底线",
  strikethrough:  "删除线",
  subscript:      "下标",
  superscript:    "上标",
  justifyleft:    "位置靠左",
  justifycenter:  "位置居中",
  justifyright:   "位置靠右",
  justifyfull:    "位置左右平等",
  orderedlist:    "位置左右平等",
  unorderedlist:  "无序清单",
  outdent:        "减小行前空白",
  indent:         "加宽行前空白",
  forecolor:      "文字颜色",
  backcolor:      "背景颜色",
  horizontalrule: "水平线",
  horizontalrule: "水平标尺",
  createlink:     "插入连结",
  insertimage:    "插入图形",
  inserttable:    "插入表格",
  htmlmode:       "切换HTML原始码",
  popupeditor:    "放大",
  about:          "关於 HTMLArea",
  help:           "说明",
  textindicator:  "字体例子"
 },


 buttons: {
  "ok":           "确定",
  "cancel":       "取消"
 },

 msg: {
  "Path":         "路径",
  "TEXT_MODE":    "现在模式是文本模式.  按[<>]键切换到可视化编辑模式.",

  "IE-sucks-full-screen" :
  // translate here
  "The full screen mode is known to cause problems with Internet Explorer, " +
  "due to browser bugs that we weren't able to workaround.  You might experience garbage " +
  "display, lack of editor functions and/or random browser crashes.  If your system is Windows 9x " +
  "it's very likely that you'll get a 'General Protection Fault' and need to reboot.\n\n" +
  "You have been warned.  Please press OK if you still want to try the full screen editor."
 },

 dialogs: {
  "Cancel"                                            : "Cancel",
  "Insert/Modify Link"                                : "Insert/Modify Link",
  "New window (_blank)"                               : "New window (_blank)",
  "None (use implicit)"                               : "None (use implicit)",
  "OK"                                                : "OK",
  "Other"                                             : "Other",
  "Same frame (_self)"                                : "Same frame (_self)",
  "Target:"                                           : "Target:",
  "Title (tooltip):"                                  : "Title (tooltip):",
  "Top frame (_top)"                                  : "Top frame (_top)",
  "URL:"                                              : "URL:",
  "You must enter the URL where this link points to"  : "You must enter the URL where this link points to"
 }
};

呵呵.文件改好了以后,就把这个文件复制到/plugins/下.(在plugins下有5个子文件夹,每个又文件夹下有一个lang文件夹,把gb.js文件放进去就OK了.)
然后启动,成功了...^_^


赵永超原创,转载请注明

 


 

Feedback

# re: 在线HTML编辑器htmlarea简单使用  回复  更多评论   

2009-09-13 22:58 by 附属物

夫顶替 压顶 侉

只有注册用户登录后才能发表评论。


网站导航: