各种极品米+站,请来西数米表来购买:https://www.west.cn/shop/?1299575

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

作者: avlikglti    标签:    点击:6    时间:2017-10-11

简介

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

工具/原料

  1. 1
    myeclipse或eclipseTomcat7.xCKEditor源码

方法/步骤

  1. 1
    首先,下载CKEditor源码。到CKEditor官网进行下载。然后将下载的文件进行解压。
    在线文本编辑器CKEditor的使用步骤
  2. 2
    打开解压后的文件,将ckeditor\WebContent\ckeditor目录下的文件复制到工程目录
    在线文本编辑器CKEditor的使用步骤 在线文本编辑器CKEditor的使用步骤
  3. 3
    新建一个index.jsp用来编写页面代码。
    在线文本编辑器CKEditor的使用步骤
  4. 4
    新建一个servlet用来接收前端擢爻充种的请求。packagecom;importjava.io.IOExc髫潋啜缅eption;importjava.io.PrintWriter;importjava.util.UUID;importjavax.servlet.ServletException;importjavax.servlet.annotation.MultipartConfig;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.servlet.http.Part;/***ServletimplementationclassUpLoadServlet*/@WebServlet("/upLoad")@MultipartConfigpublicclassUpLoadServletextendsHttpServlet{/***@seeHttpServlet#doPost(HttpServletRequestrequest,HttpServletResponseresponse)*/protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{request.setCharacterEncoding("utf-8");//获取文件的partPartpart=request.getPart("upload");//获取请求的信息Stringrequestinfo=part.getHeader("content-disposition");System.out.println(requestinfo);//获取文件的后缀名Stringstr=requestinfo.substring(requestinfo.lastIndexOf("."),requestinfo.length()-1);System.out.println("后缀名:" str);//获取上传文件的目录Stringroot=request.getServletContext().getRealPath("//upload");System.out.println(root);//重新创建文件名Stringfilename=UUID.randomUUID().toString() str;Stringurl=root "\\" filename;System.out.println(url);part.write(url);//响应PrintWriterout=response.getWriter();//获取路径StringbasePath=request.getScheme() "://" request.getServerName() ":" request.getServerPort();Stringcallback=request.getParameter("CKEditorFuncNum");out.print("<script>window.parent.CKEDITOR.tools.callFunction(" callback ",'" basePath request.getContextPath() "/upload/" filename "')</script>");out.flush();out.close();}}
    在线文本编辑器CKEditor的使用步骤 在线文本编辑器CKEditor的使用步骤
  5. 5
    前端页面效果展示,如下图。
    在线文本编辑器CKEditor的使用步骤

注意事项

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

热门文章