ckeditor官网：http://ckeditor.com/

这里介绍ckeditor的其中一个的用法，自己做小项目练手非常的适合，上手非常的快。

首先去官网下载这个东西，链接：http://pan.baidu.com/s/1nuXePuD 密码：rrr0，需要特别说明一下，这个东西需要配置，但是具体配置我也不是很清楚，所以你看到着篇博客，练习的话，最后使用上面上传的这个东西，目录呢，如图所示。

1：首先将这个ckeditor文件夹放到webcontent目录下面，然后进行开发。

　　使用这个文本编辑器的最重要需要引入的一句话是：

　　<script type="text/javascript" src="resource/ckeditor/ckeditor.js"></script>

　　然后在需要使用的地方引入这个：class="ckeditor"，如下所示：

　　<textarea  class="ckeditor" id="newsContent"  name="newsContent"   rows="15"   placeholder="请输入内容">　　　         </textarea>

完整的代码如下所示，文件名是news.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <%

     //获取绝对路径路径 ,开发项目一定要使用绝对路径，不然肯定出错

     String path = request.getContextPath();

     String basePath = request.getScheme() + "://"

                 + request.getServerName() + ":" + request.getServerPort()

                 + path + "/";

 %>

 <!DOCTYPE html >

 <html>

 <head>

 <base href="<%=basePath%>">

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>新闻发布</title>

 <!-- 新 Bootstrap 核心 CSS 文件 -->

 <link rel="stylesheet" href="resource/css/bootstrap.min.css">

 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

 <script src="resource/js/jquery.min.js"></script>

 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

 <script src="resource/js/bootstrap.min.js"></script>

 <script type="text/javascript" src="resource/ckeditor/ckeditor.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class="page-header">新闻发布</h1>

         <form class="form-horizontal" action="newsServlet" method="post">

             <div class="form-group">

                 <label for="newsMan" class="col-sm-1 control-label">发布人</label>

                 <div  class="col-sm-4">

                     <input  class="form-control " name="newsMan" id="newsMan" placeholder="请输入发布人"/>

                 </div>

             </div>

             <div class="form-group">

                 <label for="newsTitle" class="col-sm-1 control-label">新闻标题</label>

                 <div  class="col-sm-6">

                     <input  class="form-control " name="newsTitle" id="newsTitle" placeholder="请输入新闻标题"/>

                 </div>

             </div>

             <div class="form-group">

                 <label for="newsContent" class="col-sm-1 control-label">新闻内容</label>

                 <div  class="col-sm-11">

                     <textarea  class="ckeditor" id="newsContent"  name="newsContent"   rows="15"   placeholder="请输入内容"></textarea>

                 </div>

             </div>

             <div class="form-group">

                 <div  class="col-sm-4 col-sm-offset-1">

                     <input type="submit" value="发 布 新 闻 " class="btn btn-success btn-lg"/>

                 </div>

             </div>

         </form>

     </div>

 </body>

 </html>

2:这个jsp提交到servlet这个页面，完整代码如下所示，当然了，这里没有设计到数据库，因为涉及到数据库，更难理解和讲解，这里学会使用，自己摸索不是很难哦。

文件名是：NewsServlet.java

 package com.liu.servlet;

 import java.io.IOException;

 import javax.servlet.ServletException;

 import javax.servlet.annotation.WebServlet;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 @WebServlet("/newsServlet")

 public class NewsServlet extends HttpServlet {

     private static final long serialVersionUID = 1L;

     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

         //设置字符编码格式

         request.setCharacterEncoding("utf-8");

         //获取从前台传来的参数

         String newsMan = request.getParameter("newsMan");

         String newsTitle = request.getParameter("newsTitle");

         String newsContent = request.getParameter("newsContent");

         //控制台输出测试内容

         System.out.println("newsMan:"+newsMan);

         System.out.println("newsTitle:"+newsTitle);

         System.out.println("newsContent:"+newsContent);

         //将获取的参数保存到request域中

         request.setAttribute("newsMan", newsMan);

         request.setAttribute("newsTitle", newsTitle);

         request.setAttribute("newsContent", newsContent);

         //重定向操作

         request.getRequestDispatcher("/index.jsp").forward(request, response);

     }

 }

3:上面的servlet页面又重定向到了index.jsp,如下所示：

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <%

     //获取绝对路径路径 ,开发项目一定要使用绝对路径，不然肯定出错

     String path = request.getContextPath();

     String basePath = request.getScheme() + "://"

                 + request.getServerName() + ":" + request.getServerPort()

                 + path + "/";

 %>

 <!DOCTYPE html >

 <html>

 <head>

 <base href="<%=basePath%>">

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>新闻发布</title>

 <!-- 新 Bootstrap 核心 CSS 文件 -->

 <link rel="stylesheet" href="resource/css/bootstrap.min.css">

 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

 <script src="resource/js/jquery.min.js"></script>

 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

 <script src="resource/js/bootstrap.min.js"></script>

 <script type="text/javascript" src="resource/ckeditor/ckeditor.js"></script>

 </head>

 <body>

     <div class="container">

     <h1 class="page-header">查看新闻</h1>

     <form class="form-horizontal" action="newsServlet" method="post">

             <div class="form-group">

                 <label for="newsMan" class="col-sm-1 control-label">发布人</label>

                 <div  class="col-sm-4">

                     <p class="form-control-static">${newsMan }</p>

                 </div>

             </div>

             <div class="form-group">

                 <label for="newsTitle" class="col-sm-1 control-label">新闻标题</label>

                 <div  class="col-sm-6">

                     <p class="form-control-static">${newsTitle }</p>

                 </div>

             </div>

             <div class="form-group">

                 <label for="newsContent" class="col-sm-1 control-label">新闻内容</label>

                 <div  class="col-sm-11">

                     <p class="form-control-static">${newsContent }</p>

                 </div>

             </div>

         </form>

     </div>

 </body>

 </html>

4：特比需要注意的是下面这个servlet，只要复制粘贴会使用即可，可先不用看代码；

 package com.liu.servlet;

 import java.io.IOException;

 import java.io.PrintWriter;

 import java.util.UUID;

 import javax.servlet.ServletException;

 import javax.servlet.annotation.MultipartConfig;

 import javax.servlet.annotation.WebServlet;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import javax.servlet.http.Part;

 @WebServlet("/upLoad")

 @MultipartConfig

 public class UpLoadServlet extends HttpServlet {

     private static final long serialVersionUID = 1L;

     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

         request.setCharacterEncoding("utf-8");

         //获取文件的part

         Part part = request.getPart("upload");

         //获取请求的信息

         String requestinfo = part.getHeader("content-disposition");

         System.out.println(requestinfo);

         //获取文件的后缀名

         String str = requestinfo.substring(requestinfo.lastIndexOf("."),requestinfo.length()-1);

         System.out.println("后缀名:"+str);

         //获取上传文件的目录

         String root = request.getServletContext().getRealPath("//upload");

         System.out.println(root);

         //重新创建文件名

         String filename = UUID.randomUUID().toString()+str;

         String url = root+"\\"+filename;

         System.out.println(url);

         part.write(url);

         //响应

         PrintWriter out = response.getWriter();

         //获取路径

         String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();

         String callback = request.getParameter("CKEditorFuncNum");

         out.print("<script>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+basePath+request.getContextPath()+"/upload/"+filename+"') </script>");

         out.flush();

         out.close();

     }

 }

5：最后说一下需要注意的地方：

其一就是如下图所示的config.js文件，这里需要修改一下文件内容

如下图所示，将ckeditor修改为自己的项目名称即可；

演示效果：

还有完善的空间，继续加油哦。别先生

Ckeditor一种很方便的文本编辑器的更多相关文章

  1. quillJS 富文本编辑器源码分析系列1

    quillJS 富文本编辑器目前是一款很火富文本编辑器,使用广泛,github 上面的 star 有 22,492,虽然说不以 star 论英雄,不过这可以说明它还是比较受欢迎的: 它的特点是:轻量, ...

  2. django下的ckeditor 5.0 文本编辑器上传功能。

    完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...

  3. 富文本编辑器 CKeditor 配置使用 （带附件）

    Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...

  4. 富文本编辑器 CKeditor 配置使用

    作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  5. 富文本编辑器 CKeditor 配置使用+上传图片

    参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置  ...

  6. 文本编辑器 CKEditor 用法

    最新文本编辑器,FCK升级版:CKEditor.NET CKEditor.NET.dll 版本:3.6.4.0 官方网址:http://ckeditor.com/   效果图:     配置web.c ...

  7. 富文本编辑器CKEDITOR的使用配置(问题注解)

    CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用, 准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录. 第一步:引用js, ...

  8. ASP.NET 文本编辑器使用（CKEditor）与上传图片

    CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 方法一.在ASP.NET工程中添加CKE ...

  9. MVC5富文本编辑器CKEditor配置CKFinder

    富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

随机推荐

  1. java AOP使用配置项来进行注入实践

    java AOP使用注解@annotation方式实践 场景: 在目标方法前面和后面执行通知方法 目标类 @Component public class Play { public void watc ...

  2. datagrid点删除，弹出一个确认和取消的消息框

    有个简单的方法:在datagrid的删除按扭datagrid的属性生成器->列->添加按扭列->删除在数据字段中加上:<div id="de" onclic ...

  3. 如何学好web安全

    web服务组件: 横向就是如图所示,纵向就是数据流:数据流说白了就是http协议. 举例: 1.如果在操作系统没有处理好,就产生了OS命令执行的安全问题: 2.如果在存储层的数据库中没有处理好,数据库 ...

  4. ettercap中间人攻击--参数介绍

    攻击和嗅探  -M,  --mitm ARP欺骗,参数 -M arp remote    # 双向模式,同时欺骗通信双方,-M arp:remote. oneway   #单向模式,只arp欺骗第一个 ...

  5. SQL语句——重复记录

    1.查找重复记录: (按id查找) select * from user_info where id in ( select id from user_info group by id ) 即:sel ...

  6. 20155209 2016-2017-2 《Java程序设计》第九周学习总结 ## 教材学习内容总结

    教材学习内容总结 JDBC API 允许用户访问任何形式的表格数据,尤其是存储在关系数据库中的数据. 执行流程: •连接数据源,如:数据库. •为数据库传递查询和更新指令. •处理数据库响应并返回的结 ...

  7. json 不能 dumps Decimal 解决办法

    class DecimalEncoder(json.JSONEncoder): def default(self, o): if isinstance(o, decimal.Decimal): ret ...

  8. split('\r\n')

    '\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格.通常用的Enter是两个加起来. 实际我的脚本读取FTP的列表,如果用的split("\r\n"),可以获得正 ...

  9. 原 layer父子页面交互

    1.访问父页面元素值 2.访问父页面方法 3.如何关闭弹出的子页面窗口 parent.layer.close(index);//关闭弹出的子页面窗口 4.如何从子页面执行刷新父页面操作 [javasc ...

  10. mac系统在配置navicat时连接数据的时候提示can't connect to mysql server on '127.0.0.1'

          新建数据库连接的时候,将默认的端口号更改掉,改为3307,即可解决这个问题. 具体是为什么我也不清楚,我自己想的一个可能就是mac电脑 上的某个程序可能已经占用了3306那个默认的端口,因 ...