简单在线编辑器的使用

来源：互联网发布：ff14猫女3.0捏脸数据编辑：程序博客网时间：2024/04/29 21:13

在做网页的时候免不了要使用在线编辑器的功能，使用FCK编辑器又太大，而且配置麻烦，有时候我们不需要太多的功能，只要一些简单的能让用户输入数据并编排格式就行了。现在我介绍几种自己实践后的比较方便的方法。在JSP里面使用在线编辑器我自己使用的有如下几个方法（应该还有很多的，但本人没有这方面的资料，下面所说的都是自己在做小项目时实践出来的。）：
1.使用ExtJS实现在线编辑器功能：
首先ExtJS这个框架学习应该有点难度的，本人也刚开始接触。所以不对的地方希望看贴的朋友指正。
下面跟我来做一下：
第一步：在你的JSP页面导入需要的ExtJS的脚本支持库如下的代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>My JSP 'formSample.jsp' starting page</title>
        <link rel="stylesheet" type="text/css"
            href="../Ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="../Ext/ext-base.js"></script>
        <script type="text/javascript" src="../Ext/ext-all.js"></script>
        <script type="text/javascript" src="../Ext/ext-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../script/edit.js"></script>
    </head>
    <body>
    </body>
</html>
第二步：新建一个JS文件用于生成脚本控制的代码：
Ext.onReady(function() {

    Ext.QuickTips.init();

    var top = new Ext.FormPanel({
        labelAlign : 'top',
        frame : true,
        title : '在线编辑器',
        bodyStyle : 'padding:5px 5px 0',
        width : 600,
        items : [{
            xtype : 'htmleditor',
            id : 'content',
            fieldLabel : '请输入信息',
            height : 200,
            anchor : '98%'
        }],

        buttons : [{
            text : 'Save',
            type : 'submit',
            handler : function() {
                top.form.doAction('submit', {
                    url : '../exithtml/content.jsp',// 文件路径
                    method : 'post',// 提交方法post或get
                    params : '',// 参数
                    // 提交成功的回调函数
                    success : function(form, action) {
                        if (action.result.msg == '') {
                            Ext.Msg.alert('错误', '信息内容不能为空');
                        } else {
                            document.location = '../exithtml/content.jsp';
                        }
                    },
                    // 提交失败的回调函数
                    failure : function() {
                        Ext.Msg.alert('错误', '服务器出现错误请稍后再试！');
                    }
                });
            }
        }, {
            // 重置表单
            text : 'Cancel',
            handler : function() {
                top.form.reset();
            }
        }]
    });

    top.render(document.body);
});
第三步：用JSP页面接受用户输入的数据，看看后台是否能接收到
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("UTF-8");
    String str = request.getParameter("content");
    System.out.println(str);
    if (null == str || "".equals(str)){
       //此处的msg可以跟一些你要提示的字符串
        response.getWriter().write("{success:true,msg:''}");
    }else{
        response.getWriter().write("{success:true,msg:''}");
    }
%>
注意：在运行前，你要把ExtJS最小的运行库都要放入当前应用的WebRoot下，然后修改第一步的导入连接，不然JSP找不到ExtJS的类库肯定运行不了的。还有就是JS文件里面的连接地址的属性，也应该改成你自己的地址。一般只要能运行一次，下次就直接复制过去就能用了。很方便，不足之处在于，在编辑器的工具提示，还是英文的，这个地方不知道怎么修改。但这点小小的瑕疵不是最大的问题。

2.第二种方法是使用Struts2.0的标签库
使用这个方法必须用到struts2的Ajax主题，我在使用Struts2.0的标签库时发现当<s:areatext></s:aretext>标签当被应用了ajax主题的时候就能有在线编辑器的效果。如果你在使用框架的话，struts2.0的这个功能很实用，但也有瑕疵，也可能是我不了解。主要表现在当你使用时，无法将输入栏调整大小，比如输入栏我要求高度为10行，宽度为200，就没有反应。如果知道怎么设定的朋友希望能告诉我。谢谢。

后记：
如果有朋友知道跟多简单方便的编辑器，请留言，希望和大家交流提高！