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入门系列（十二）Java反射

    Why--指的是为什么做这件事,也既事物的本质. 反射之中包含了一个“反”的概念,所以要想解释反射就必须先从“正”开始解释,一般而言,当用户使用一个类的时候,应该先知道这个类,而后通过这个类产生实例化 ...

  2. JavaScript常用函数总结

    1.test()方法 var str = "wzltestreg"; var reg = new RegExp("wzl", ""); al ...

  3. 通过COM组件方式实现java调用C#写的DLL文件 转

    最近一段时间单位在做一个Web项目,工程师用JAVA语言,需要公用人员信息,统一用户名和密码,原有的平台中是用C#语言开发的,在网上查找解决方法,通过JAVA调用C#的DLL文件实现.网上资料很多,自 ...

  4. mysql创建数据库指定编码格式

    CREATE DATABASE `databasename` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

  5. 关于apache 开启 ssl https 支持 TLS1.2 的些事

    项目背景 需要搭建一个小程序的服务器,当然要使用https协议服务器windows service 2012 r2,后台语言是php,服务集成环境装的是appserv2.5 ,apache2.2证书申 ...

  6. python - 用类写装饰器

    这里用到了__call__的class内置参数 #类装饰器: class zsq(): #本质是定义一个参数,让装饰的主题传递至__call__方法内部 def __init__(self,obj): ...

  7. Freemarker导出带多个不重复图片的word

    1.新建一个word,添加一张图片,调整好图片大小与位置.

  8. 一步一步详解ID3和C4.5的C++实现

    1. 关于ID3和C4.5的原理介绍这里不赘述,网上到处都是,可以下载讲义c9641_c001.pdf或者参考李航的<统计学习方法>. 2. 数据与数据处理 本文采用下面的训练数据: 数据 ...

  9. Check Box、Radio Button、Combo Box控件使用

    Check Box.Radio Button.Combo Box控件使用 使用控件的方法 1.拖动控件到对话框 2. 定义控件对应的变量(值变量或者控件变量) 3.响应控件各种消息 Check Box ...

  10. CEdit使用（Edit Control控件）

    CEdit使用(Edit Control控件) 编辑框只读 属性 Read Only等于 True,就有了只读效果 密码框 属性 Password 等于 True,就有了密码效果 获取值/赋予值 Up ...