CKEditor在线编辑器

最新推荐文章于 2024-06-08 11:06:12 发布

数据涵

最新推荐文章于 2024-06-08 11:06:12 发布

阅读量641

点赞数

本文链接：https://blog.csdn.net/xiangminghan/article/details/103772463

版权

创建Web项目CKEditorDemo
在这里插入图片描述
从网上下载ckeditor，添加到web目录

在web目录里创建upload子目录，在里面创建一个测试文件

在web目录里创建上传页面upload.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<html>
<head>
    <title>在线编辑器CKeditor演示</title>
</head>
<body>
<h3>在线编辑器CKeditor演示</h3>
<form action="do_upload.jsp" method="post" οnsubmit="return checkEditor();">
		<textarea cols="80" id="mckeditor" name="mckeditor" rows="10">
			欢迎使用CKeditor在线编辑器！
		</textarea>
    <script type="text/javascript">
        CKEDITOR.replace('mckeditor', {
            filebrowserImageUploadUrl: '../../fileUpload?type=image',// 图片上传组件路径
            filebrowserFlashUploadUrl: '../../fileUpload?type=flash' // Flash上传组件路径
        });
    </script>
    <input type="submit" name="submit" value="提交"/>
</form>
<script type="text/javascript">
    //编辑器内容检查
    function checkEditor() {
        //通过javascript	代码读取编辑器中的内容
        var editor_data = CKEDITOR.instances.mckeditor.getData();
        if (editor_data == "") {
            alert("编辑器内容不能为空，请输入具体内容然后再提交！");
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>

在web目录里创建上传处理页面do_upload.jsp

<%@ page import="java.io.File" %>
<%@ page import="java.io.FileOutputStream" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>在线编辑器CKeditor演示</title>
</head>
<body>
<h3>在线编辑器CKeditor演示</h3>
<hr>
<%
    request.setCharacterEncoding("utf-8");
    String context = request.getParameter("mckeditor");
    String realPath = application.getRealPath("/upload").replaceAll("\\\\", "/");
    String fileName = String.valueOf(System.currentTimeMillis()) + ".html";
    File file = new File(realPath, fileName);
    FileOutputStream fos = new FileOutputStream(file);
    fos.write(context.getBytes());
    fos.flush();
    fos.close();
    out.println("表单内容已写入文件：" + realPath + "/" + fileName + "<hr>");
    out.println(context);
%>
</body>
</html>

启动服务器，查看运行效果
在这里插入图片描述

在这里插入图片描述

数据涵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CKEditor在线编辑器

创建Web项目CKEditorDemo从网上下载ckeditor，添加到web目录在web目录里创建upload子目录，在里面创建一个测试文件在web目录里创建上传页面upload.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %><script type="text/javas...
复制链接

扫一扫