`

kindeditor留言板

阅读更多

该留言板我只选中了其中部分工具栏,这个可以根据自己的需要进行设置;

该留言板在前台留言成功后不会在前台显示出来,只能在后台由管理人员进行查看

该留言板数据库设计:留言内容对应的数据库字段类型为:CLOB

一、先看效果图再看代码:

1、整体效果

2、点击图片上传

按钮后的效果图

3、选择本地上传后:确定

然后提交,搞定!

注:需要引入的包:commons-io-1.4.jar、commons-fileupload-1.2.1.jar、json_simple-1.1.jar,亲们可以去我的文件里面去下载

二、代码:

1、messageBoard.jsp(留言板页面)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content_1") != null ? request.getParameter("content_1") : "";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>留言板</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" href="/kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="/kindeditor/plugins/code/prettify.css" />
    <script src="/scripts/jquery-1.4.2.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript" charset="utf-8" src="/kindeditor/kindeditor.js"></script>
    <script type="text/javascript" charset="utf-8" src="/kindeditor/lang/zh_CN.js"></script>
    <script charset="utf-8" src="/kindeditor/plugins/code/prettify.js"></script>
    

    <script type="text/javascript">  

  var editor1; //一定要在外面声明
     KindEditor.ready(function(K) {
            editor1 = K.create('textarea[name="content_1"]', {
                items : ['formatblock', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold','image', 'advtable', 'hr', 'emoticons'],//根据自己的需求设定工具栏
                cssPath : '/kindeditor/plugins/code/prettify.css',
                uploadJson : '/kindeditor/jsp/upload_json.jsp',//图片上传
                fileManagerJson : '/kindeditor/jsp/file_manager_json.jsp',//文件上传
                allowFileManager : true
            });
            prettyPrint();
        });   

        
    function checkData(){
        var regu = "^[A-Za-z0-9\u4e00-\u9fa5]+$";//只能输入汉字、字母、数字
        var re = new RegExp(regu);
        //留言人
        var user = $("#userName").val();
        //联系方式
        var phone = $("#phone").val();
        //留言标题
        var title = $("#title").val();
        //留言内容
//        var oEditor = $("#content_1").val() ;
//        var oEditor = KE.util.getPureData("content_1");
        var oEditor=editor1.html();
        if(user==""){
        alert("留言人姓名不能为空!!");
        return false;
        }
        if(!(re.test(user))){
              alert("用户名格式错误!");
              return false;
        }
        if(phone==""){
            alert("联系方式不能为空!!");
            return false;
        }
        if(!check_mobile()){
            alert("手机格式不对");
            return false;
        }
        if(title==""){
            alert("标题不能为空!!");
            return false;
        }
        if(!(re.test(title))){
              alert("标题格式错误!");
              return false;
        }
        if(!checkEmpty(oEditor)){
            alert("留言内容不能为空");
             return false;        
        }
        /*
        $.post("${path}/messageboard/callCreateMessageBoardAction.htm",function(data){
                    if(data=="yes"){
                        alert("留言成功");
                        window.close();
                    }
        },"html");
        */
        return true;

    }
//联系方式
function check_mobile(){
    mobile_phone = $("input[name='phone']").val();
    var reg = /^0?1[358]\d{9}$/;
    if (!reg.test(mobile_phone)){
        alert('手机号不合法');
        return false;
    }else{
        return true;
    }
}
    //判断替换字符串前后半角和全角空格后的字符串是否为空
       function checkEmpty(paraVal) {
            var blReturn = true;
            if (paraVal.replace(/(^[\s\u3000]*)|([\s\u3000]*$)/g, "") == ""){//替换字符串前后半角和全角空格
                blReturn = false;
            }
            return blReturn;
        }
    </script>
  </head>
  <body>
  <%=htmlData%>
      <form action="${path}/messageboard/callCreateMessageBoardAction.htm" onsubmit="return checkData();" method="post" id="createMessageBoardForm" name="createMessageBoardForm" >
        <table  border="1" align="center" cellpadding="0" cellspacing="0">
            <tr>
                  <td width="20%">姓名:</td>
                  <td width="80%" height="48" align="left">
                      <input name="userName" type="text" id="userName" size="35"  class="shurukuang4"/>
                  </td>
            </tr>
            <tr>
                  <td width="20%">手机:</td>
                  <td width="80%" height="48" align="left">
                      <input name="phone" type="text" id="phone" size="35"  class="shurukuang4"/>
                  </td>
            </tr>
            <tr>
                  <td width="20%">标题:</td>
                  <td width="80%" height="48" align="left">
                      <input name="title" type="text" id="title" size="35"  class="shurukuang4"/>
                  </td>
            </tr>
            <tr>
                  <td width="20%" valign="top" >内容:</td>
                  <td >
                <textarea id="content_1" name="content_1" style="width:300px;height:150px;"></textarea>  
                 </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" name="submit" id="submit" value="提交" />
                </td>
            </tr>
          </table>   
      </form>             
  </body>
</html>
<%!
private String htmlspecialchars(String str) {
    str = str.replaceAll("&", "&amp;");
    str = str.replaceAll("<", "&lt;");
    str = str.replaceAll(">", "&gt;");
    str = str.replaceAll("\"", "&quot;");
    return str;
    
}
%>

2、在根目录下添加一下文件夹"attached"

3、根据需求修改/kindeditor/jsp/upload_json.jsp中的路径(如果前台留言和后台查看在同一个端口下就不需要改)

原文件保存目录URL

String saveUrl  = request.getContextPath() + "/attached/";

修改后的文件保存目录URL
String saveUrl  = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/attached/";
 

分享到:
评论

相关推荐

    php+mysql简单简洁留言板

    在网页开发中,留言板功能是常见且实用的交互模块,它允许用户发表评论、提出建议或者进行交流。本项目以“php+mysql简单简洁留言板”为主题,旨在实现一个功能完备且界面简洁的在线交流平台。该项目采用了流行的PHP...

    guestbook:简易的留言板程序

    在实际的开发过程中,这个简易留言板程序可能会包含以下知识点: 1. **PHP基础**:包括变量声明、条件语句、循环、函数、数组等,这些都是编写PHP脚本的基础。 2. **MySQL数据库操作**:涉及创建数据库和表,插入...

    Yes!SUN企业网站系统 v3.08 build 20090728.rar

    动态缓存、静态生成、伪静态、URL友好设置等功提升搜索引擎及用户友好度,一键多语言版开设,支持数据模型,后台操作即可为网站添加产品属性、留言板、调查、帮助、在线报名等在线交互系统,数据调用功能让建设网站...

    米芽CMS 1.2.rar

    2、程序虽小,站点配置、分类管理、文章管理、广告管理、留言板功能、友情链接功能、站内搜索功能俱全。 3、界面设计简洁灵动、美观大方,适用于个人博客、小型团体网站(如小型团队、班级群组)、专题页面、会议...

    Cn文章管理系统v1.0[asp源码]

    2、系统模块:系统管理-文章模块-产品模块-软件模块-采集模块-会员模块-留言板-说明-数据库管理-广告-评论等一系列功能!二次开发很方便! 3、后台使用Jquery ajax实现,调试更方便! 4、后台使用kindeditor v4.1.4...

    【Asp_CMS】Cn文章管理系统v1.0免费版.rar

    2、系统模块:系统管理-文章模块-产品模块-软件模块-采集模块-会员模块-留言板-说明-数据库管理-广告-评论等一系列功能!二次开发很方便! 3、后台使用Jquery ajax实现,调试更方便! 4、后台使用kindeditor v...

    HTML在线编辑器-论坛-留言簿-blog

    HTML在线编辑器就是用于在线编辑的工具,编辑的内容是基于HTML的文档。因为它可用于在线编辑基于HTML的文档,所以,它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方

    GBBS微论坛 v3.1.8.rar

    3、可做为论坛、贴吧、信息发布、网络调查、商铺展示、留言板、相册、广告系统使用; 4、SEO优化静态化及搜索引擎优化一键设置,再无麻烦; 5、JS调用可支持跨浏览器、跨平台调用资讯布局; 6、图片展示、文字...

    将博CMS企业版V1.7.3源码 JumboECMS173.rar

    模块有:企业介绍、新闻、案例、产品、招聘、下载、在线订购、留言等等,支 持中英文。懂二次开发的朋友可以自行扩展其他语言! 二、源码说明 正式建站时进行如下几步操作: 1、将解决方案从Debug改为Release,...

    DES算法实现 DES.rar

    模块有:企业介绍、新闻、案例、产品、招聘、下载、在线订购、留言等等,支 持中英文。懂二次开发的朋友可以自行扩展其他语言! 二、源码说明 正式建站时进行如下几步操作: 1、将解决方案从Debug改为Release,...

    STCMS音乐系统 v1.3.rar

     5、强大的文件上传和留言管理功能。系统上次的每一个文件都入库,用户可以方便上次和删除。对专辑、音乐都支持评论,后台管理员可以用kindeditor回复评论。  6、系统设置功能强大:管理员可以设置本系统的所有...

    星艺开源 XYCIW v2.0.zip

    1、星艺开源 XYCIW_V2.0 建站系统共分六组企业常规固定栏目,分别对应关于我们,活动策划,产品展示,解决方案,案例展示,留言板。该版本程序历经多次升级,各个环节设计相当完善,在程序运行安全上也都有相关设置...

    STCMS 音乐系统 v2.0.rar

     5、强大的文件上传和留言管理功能。系统上次的每一个文件都入库,用户可以方便上次和删除。对专辑、音乐都支持评论,后台管理员可以用kindeditor回复评论。  6、系统设置功能强大:管理员可以设置本系统的所有...

    Yes!SUN企业网站系统 v3.08 build 20090728

    动态缓存、静态生成、伪静态、URL友好设置等功提升搜索引擎及用户友好度,一键多语言版开设,支持数据模型,后台操作即可为网站添加产品属性、留言板、调查、帮助、在线报名等在线交互系统,数据调用功能让建设网站...

    GBBS微论坛

    3、做为手机版论坛、微贴吧、信息系统、淘宝二维码购物网、商铺展示、留言板、相册、广告系统等使用; 4、SEO优化静态化及搜索引擎优化一键设置,省心无麻烦,布局符合SEO原则,搜索引擎爱收录; 5、jquery/js的特性...

    GBBS微论坛 v3.2.3.rar

    3、可做为PC论坛、手机论坛、微贴吧、信息系统、微商铺、轻电商、留言板、相册、广告系统等使用; 4、SEO优化静态化及搜索引擎优化一键设置,省心无麻烦,布局符合SEO原则,搜索引擎爱收录; 5、jquery/js的特性可...

    GBBS微论坛 v4.0.zip

    3、做为手机版论坛、微贴吧、信息系统、淘宝二维码购物网、商铺展示、留言板、相册、广告系统等使用; 4、SEO优化静态化及搜索引擎优化一键设置,省心无麻烦,布局符合SEO原则,搜索引擎爱收录; 5、jquery/js的...

    dtcms网站管理系统

    3.后台系统参数设置进一步增加或修正属性,可设置每页显示条数、留言、评论是否需要审核、 是否开启URL重写功能; 4.解决了后台管理员登录经常超时问题; 5.上传图片或文件时可在同一个页面重复使用,也就是说一个...

    Python Django开发管理后台+Bootstrap响应式网站+源码+开发文档+部署说明(毕业设计&课程设计&项目开发)

    3.新闻:集成KindEditor富文本编辑插件,编辑、修改回调等 4.用户管理、角色权限管理、菜单管理:实现增删改查、菜单路径配置、修改回调、用户权限分配等功能 5.留言管理:基本管理查看功能,新增留言条数显示 6....

Global site tag (gtag.js) - Google Analytics