CKeditor4.7.3标准版图片上传及相关配置

最新推荐文章于 2024-08-01 11:19:56 发布

淘气的二进制

最新推荐文章于 2024-08-01 11:19:56 发布

阅读量1.8k

点赞数 1

分类专栏： CKeditor 文章标签： ckeditor

本文链接：https://blog.csdn.net/Fmuma/article/details/78254538

版权

本文档介绍了如何在CKeditor 4.7.3标准版中配置图片上传功能，包括下载CKeditor，修改配置文件以显示上传功能，创建处理上传的Servlet，配置web.xml，并提供了完整的项目代码链接。

摘要由CSDN通过智能技术生成

说明

CKeditor版本 ckeditor_4.7.3_standard
Tomcat版本 apache-tomcat-8.0.44

下载CKeditor和CKeditor文档

图片上传

下载好了！那么开始吧！

CKeditor默认把上传图片功能隐藏了，感觉好贱哦~
那么，他和我们躲猫猫，我们就把他找出来吧!

引用CKeditor

以下代码是官方给出一切以官方为标准

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

引用正确后打开网页会看到CKeditor出来了！

为了上传图片，更改网页为jsp 这样我的Tomcat才可以发挥作用呀

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引用ckeditor JS文件 -->
<script src="ckeditor/ckeditor.js"></script>
<title>CKEditor</title>
</head>
<body>
    <center>
    <form>
           <textarea name="editor1" id="editor1" rows="10" cols="100">
                文字在这！
                This is my textarea to be replaced with CKEditor.
            </textarea>
           <script>
               // Replace the <textarea id="editor1"> with a CKEditor
               // instance, using default configuration. 官方代码有部分改动，比如这个宽高设置
               CKEDITOR.replace( 'editor1',{ height: