Myeclipse 10 jsp嵌入CKEditor富文本编辑器

最新推荐文章于 2019-12-19 15:02:30 发布

平心而论者

最新推荐文章于 2019-12-19 15:02:30 发布

阅读量752

点赞数 1

文章标签： Myeclipse 10 jsp 富文本编辑器 CKEditor

本文链接：https://blog.csdn.net/qq_40468166/article/details/84644842

版权

Myeclipse 10 jsp嵌入CKEditor富文本编辑器

1.下载ckeditor文件
下载地址：http://ckeditor.com/download
该网站提供三个版本下载，自行选择。
此处选择标准版：
http://download.cksource.com/CKEditor/CKEditor for Java/CKEditor for Java 3.6.6.2/ckeditor-java-3.6.6.2.war
这是当前版本的样例，可以直接将其放在tomcat下的webapps文件夹（如果是使用Myeclipse 10自带的tomcat，servers<-MyEclipse Tomcat<-Configure Server Connector查看路径）中，重启tomcat即可自动解压该文件。

2.拷贝相关文件
找到解压后的文件，将web-inf中lib下的jar包添加到自己工程的lib下，导入。
将ckeditor文件夹拷贝到自己项目的webroot下。

3、验证CKEditor是否安装成功
部署运行项目，访问自己的: http://localhost/项目名称/ckeditor/_samples/index.html
则可出现 “CKEditor Samples List” 的Demo页面，说明CKeditor已安装成功！
在这里插入图片描述
4、应用CKEditor
WebRoot新建test.jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>新闻发布</title>	
	<meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
	<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
	
  </head>
  
  <body>
    <form method="post" action="PublishControl" >
        <center><b>发布新闻</b></center>
                      新闻标题：  <input type="text" name="title" size="60"/><br/>
                      新闻类型：  <select name="newsType" size="1">
                      <option value="11">互联网</option>
                      <option value="12">操作系统</option>
                      <option value="13">JAVA</option>
                      <option value="14">数据库</option>
                      </select><br/>
         新闻来源：  <input type="text" name="froms"/><br/>
         发表时间：  <input type="text" name="publishTime"/><br/>
         新闻内容：  <br/><textarea class="ckeditor" rows="20" cols="75" id="content" name="content">
     </textarea>
         <center><input type=submit  value="发布"/></center>
         </form>
  </body>
</html>

5、结果如下
Myeclipse 10中浏览器打开如下，否则记得修改为http://localhost:8080/ch5（项目名称）/test.jsp（文件名称）
在这里插入图片描述