简单在线编辑器的使用

在做网页的时候免不了要使用在线编辑器的功能，使用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，就没有反应。如果知道怎么设定的朋友希望能告诉我。谢谢。

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

简单在线编辑器的使用相关推荐

html 简单在线编辑器 ie ff,一款垃圾中的极品HTML编辑器(兼容IE OR FF)
这东东实现了一些常用的功能,今天刚完成,大家多给点建议! 在FF下不完善,有些功能暂时还没实现! 这也是本人写的第一个编辑器(处女作哦),做得不好,千万别丢鸡蛋过来．．．先闪人! /******** ...
简单的在线编辑器，处理JSSC ver2.0的一个缺点
最近在JE论坛上面看到一位学生朋友实现的代码着色的JS代码,下载下来试用一下,先自己写了一个非常简单的简单的在线编辑器,类似于JE的"BBCoce编辑器": // 简单的在线编辑器 ...
用Vue实现简单的echarts在线编辑器
用Vue实现简单的echarts在线编辑器简述思路效果图页面分布 main.js的配置其中ace编辑器的配置按钮功能实现思路具体实现图表初始化图表组件传给父组件option配置对象 ...
ASP.net：添加.net(2.0C#)FCKeditor在线编辑器步骤
1.下载本版本的编辑器压缩包.源码下载地址 2.解压缩打开文件夹拥有如下文件: 3.在VS中添加"选择项"加载在此文件夹的Bin下FredCK.FCKeditorV2.dll. 4 ...
csdn自带的在线编辑器如何让图片并排显示
之前显示图片一直是一行一个,也就是按列来,是因为养成了习惯,每次插入图片之后就回车.其实我们发现,只要紧跟在上一个图片括号的后面插入你要的图片就可以完成并排显示. 1.先插入第一张图片,然后光标定位到 ...
jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用一.总结一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
CKedit在线编辑器
在线编辑器在实现所见即得的编辑效果. FCK 是开发者的名字的缩写 CKEditor 功能很完善的,具有,在线编辑与图片上传JS插件 UEdit ...
ASP:HTML在线编辑器的调用方法和使用方法详解
HTML在线编辑器不需要懂得使用Dreamweaver,会用Word就会使用此编辑器,在文章系统或者是新闻系统需要文字编辑的web程序中非常实用. 但是如何将html编辑器嵌入到web页中和怎么取得里 ...
在ASP.NET Core中使用百度在线编辑器UEditor
0x00 起因最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了能尽快使用,只要把ASP.NET版的服务端作为应用部署在IIS ...

简单在线编辑器的使用

简单在线编辑器的使用相关推荐

最新文章

热门文章