富文本 KindEditor 前后端文字图片交互例子（亲测可用）

最新推荐文章于 2023-08-08 10:44:28 发布

才华高于颜值

最新推荐文章于 2023-08-08 10:44:28 发布

阅读量1.7k

点赞数

分类专栏： java后端

本文链接：https://blog.csdn.net/qq_33416416/article/details/88996382

版权

本文介绍KindEditor富文本编辑器的使用方法及前后端交互实例，包括图片上传功能实现、IE浏览器兼容性问题解决等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放效果图：

格式如下：

后台获得：

下面是代码实现：

html：

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;  charset=UTF-8" />
        <title>Default Examples</title>
        <style>
            form {
                margin: 0;
            }
            textarea {
                display: block;
            }
        </style>
        <link rel="stylesheet" href="../static/css/default.css" type="text/css">
        <script type="text/javascript" src="../static/js/kindeditor-all.js"></script>
        <script type="text/javascript" src="../static/js/jquery.min.js"></script>
        <script type="text/javascript" src="../static/js/zh_CN.js"></script>
        <script type="text/javascript">
            var editor;
            KindEditor.ready(function(K) {
                 window.editor = K.create('#editor_id', {
                    //这里是指定的文件上传input的的属性名
                                filePostName: "myFileName",
                    //这里就是指定文件上传的请求地址，上面也已经说了，upload_json.jsp就相当去一个servlet去进行保存文件，这个地方很重要
                                uploadJson: 'http://localhost:8080/User/inserKingedusImg',
                                resizeType: 1,
                                allowPreviewEmoticons: true,

最低0.47元/天解锁文章