Ext Js 3.2中的Htmleditor的实例-CFANZ编程社区

1：实例程序
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>formPanel</title>
    
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">    
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  
  <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
  <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext3.2/ext-all.js"></script>
  <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
  
  <script type="text/javascript">
    Ext.onReady(function() {
        Ext.onReady(function() {
      Ext.QuickTips.init();  //初始化信息提示功能
      Ext.form.Field.prototype.msgTarget = 'side';   //统一指定错误提示浮动显示方式
      
      var config = {
        title: '心情',
        labelSeperator: ':',
        labelAlign: 'right',   //设置元素的对齐方式
        bodyStyle: 'padding: 5 5 5 5',    //设置边距
        frame: true,
        url: 'htmleditor.jsp',
        width: 700,
        renderTo: 'form1',
        items: [
           new Ext.form.HtmlEditor({
              width: 550,
              height: 300,
              fieldLabel: '您的心情',
              enableAlignments: true,  //允许编辑器中的按钮居左，居中和居右显示
              enableColors: true,      //允许前景/高亮颜色按钮显示
              enableFont: true,       //允许增大、缩小字号按钮显示
              enableFontSize: true,   //Enable the increase/decrease font size buttons (defaults to true)
              enableFormat: true,     //Enable the bold, italic and underline buttons (defaults to true)
              enableLinks: true,      //Enable the create link button. Not available in Safari. (defaults to true)
              enableLists: true,      //Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
              enableSourceEdit: true,  //Enable the switch to source edit button. Not available in Safari. (defaults to true)
              value: '好好学习Ext Js'
           })
        ],
        buttons: [
          new Ext.Button({       //定义一个确定按钮
            text: '确定',
            handler: function() {
              form.getForm().submit();
            }
          }),
          new Ext.Button({     //定义一个重置按钮
            text: '重置',
            handler: function() {
              form.getForm().reset();
            }
          })
        ]
      };
      var form = new Ext.form.FormPanel(config);
    });
  });
  </script>
  </head>
  
  <body>
    <div id="form1"> </div>
  </body>
</html>
2：程序效果图