多语言展示
当前在线:118今日阅读:61今日分享:18

在线文本编辑器CKEditor的使用步骤

CKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致。利用它,我们可以在 Web 上实现类似于 Microsoft Word 的许多强大的功能。那么该如何在工程中配置在线文本编辑器呢?下面将详细讲解:
工具/原料

myeclipse 或eclipse Tomcat7.x CKEditor源码

方法/步骤
1

首先,下载CKEditor源码。到 CKEditor官网进行下载。然后将下载的文件进行解压。

2

打开解压后的文件,将 ckeditor\WebContent\ckeditor  目录下的文件复制到工程目录

3

新建一个index.jsp用来编写页面代码。

4

新建一个servlet用来接收前端的请求。package com;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;/** * Servlet implementation class UpLoadServlet */@WebServlet('/upLoad')@MultipartConfigpublic class UpLoadServlet extends HttpServlet {    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    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('');                out.flush();        out.close();                            }}

5

前端页面效果展示,如下图。

注意事项

必须引入 js文件 src='ckeditor/ckeditor.js'

推荐信息