此案例 demo 为 SpringBoot 开发

1、官网下载相关资源包：http://kindeditor.net/down.php

2、编写页面（引入相关JS）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>kindeditor富文本编辑器</title>

    <link href="/kindeditor-4-1-10/themes/default/default.css" type="text/css" rel="stylesheet">

    <script type="text/javascript" charset="utf-8" src="/jquery-3.2.0.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/kindeditor-all-min.js"></script>

    <script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/lang/zh_CN.js"></script>

    <script type="text/javascript" charset="utf-8" src="/kindeditor-Own/kindeditor.js"></script>

</head>

<body>

　　<textarea id="itemAddForm" style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>

</body>

</html>

3、编写 JS（/kindeditor-Own/kindeditor.js） 创建实例

var itemAddEditor;

//页面初始化完毕后执行此方法

$(function () {

    var TT = TTO = {

        // 编辑器参数

        kingEditorParams: {

            //指定上传文件参数名称

            filePostName: "uploadFile",

            //指定上传文件请求的url。

            uploadJson: '/pic/upload',

            //上传类型，分别为image、flash、media、file

            dir: "image"

        },

        createEditor: function (select) {

            return KindEditor.create(select, TT.kingEditorParams);

        }

    };

    //创建富文本编辑器

    itemAddEditor = TTO.createEditor("#itemAddForm");

});

4、编写后台 配置虚拟路径（MyWebAppConfiguration）

package com.editors.kindeditor.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration

public class MyWebAppConfiguration extends WebMvcConfigurerAdapter {

    /**

     * 添加一些虚拟路径的映射

     * 静态资源路径和上传文件的路径

     *

     * @param registry

     */

    @Override

    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        /**

         * @Description: 对文件的路径进行配置, 创建一个虚拟路径/Path/** ，即只要在< img src="/Path/picName.jpg" />便可以直接引用图片

         *这是图片的物理路径  "file:/+本地图片的地址"

         */

        registry.addResourceHandler("/Path/**").addResourceLocations("file:/C:/Users/lenovo/AppData/Local/Temp/tomcat-docbase.2975979620477460781.8080/upload/");

        super.addResourceHandlers(registry);

    }

}

5、图片上传服务

package com.editors.kindeditor.controller;

import com.editors.utils.JsonUtils;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

import java.io.*;

import java.util.HashMap;

import java.util.Map;

@Controller

public class KindeditorController {

    @RequestMapping("/kindeditor")

    public String kindeditor() {

        return "kindeditor/kindeditor";

    }

    /**

     * 返回 复杂类型 容易产生浏览器兼容性问题

     * 原因：

     * 跟 @ResponseBody 默认行为有关

     * String类型可直接打回页面，而复杂类型无法直接打回，需要先转换为json

     */

    @RequestMapping("/pic/upload")

    @ResponseBody

    public String picUpload(MultipartFile uploadFile, HttpServletRequest request) {

        Map map = new HashMap<>();

        if (!uploadFile.isEmpty()) {

            String saveFileName = uploadFile.getOriginalFilename();

            File saveFile = new File(request.getSession().getServletContext().getRealPath("/upload/") + saveFileName);

            if (!saveFile.getParentFile().exists()) {

                saveFile.getParentFile().mkdirs();

            }

            String path = "/Path/" + saveFileName;

            System.out.println("path={" + path + "}");

            try {

                BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(saveFile));

                out.write(uploadFile.getBytes());

                out.flush();

                out.close();

                map.put("error", 0);

                map.put("url", path);

            } catch (Exception e) {

                e.printStackTrace();

                map.put("error", 1);

                map.put("url", path);

                return "上传失败," + e.getMessage();

            }

        } else {

            map.put("error", 1);

            map.put("url", "上传失败，因为文件为空.");

        }

        return JsonUtils.objectToJson(map);

    }

}

6、执行效果：

coding++：快速构建 kindeditor 富文本编辑器（一）的更多相关文章

  1. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  2. KindEditor富文本编辑器使用

    我的博客本来打算使用layui的富文本编辑器,但是出了一个问题,无法获取编辑器内容,我参考官方文档,获取内容也就那几个方法而已,但是引入进去后始终获取的值为空,百度和bing都试过了,但是始终还是获取 ...

  3. kindeditor富文本编辑器初步使用教程

    下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...

  4. (转）淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  5. （转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  6. django项目中使用KindEditor富文本编辑器。

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

  7. django项目中使用KindEditor富文本编辑器

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

  8. springboot中使用kindeditor富文本编辑器实现博客功能

    kindeditor在之前已经用过,现在在springboot项目中使用.并且也在里面使用了图片上传以及回显等功能. 其实主要的功能是图片的处理:kindeditor对输入的内容会作为html标签处理 ...

  9. kindEditor 富文本编辑器 使用介绍

    第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 <scr ...

随机推荐

  1. cooking和session

    ## Cookie ## # 基本概念: >> 用于保存一次会话中的记录,存放在客户端(浏览器); |-- "一次会话" |-- 当客户端打开一个界面时 被称作一次会话 ...

  2. 小白自学机器学习----3.令人头秃的pytorch安装 （No module named 'tools.nnwrap' 错误）

    tensorflow 刚刚会写基础的模块了,今天找到研究方向的代码是pytorch实现的 总是看到这句话,人生苦短,我用pytorch 看来pytorch应该比tensorflow好学,但是!! py ...

  3. 关于HTTP那些事

    写这篇文章的原因 记录前端性能优化用到的关键概念 简化大家对HTTP的学习 大家或许面试的时候可以用得到哦 HTTP是什么 Web的应用层协议(超文本传输协议HyperText Transfer Pr ...

  4. 集成google翻译的小tips

    文章首发于github.io 2018-08-04 12:43:20 google翻译的强大,就像我们公司的slogan : "让语言无国界,让世人心相通" 友情提示: googl ...

  5. Object-Oriented Programming Summary Ⅱ

    电梯作业总结博客 17373492 电梯,多线程学习中的 "HelloWorld",早在大一就有所耳闻,以至于在坐电梯的时候就思考过:电梯需要怎么写呢? 0. 前言: 偶然的机会, ...

  6. 华为物联网IoT学习笔记目录

    实验准备: 1.<小熊派功能介绍> 2.<小熊派硬件分析> 3.<STM32Cube软件安装介绍> 4.<MDK软件安装介绍> 5.<华为 IoT ...

  7. Java集合03——你不得不了解的Map

    Map 在面试中永远是一个绕不开的点,本文将详细讲解Map的相关内容.关注公众号「Java面典」了解更多 Java 知识点. Map Map 是一个键值对(key-value)映射接口: 映射中不能包 ...

  8. Ubuntu16.04 desktop 设置共享文件夹 -- 图形界面配置

    1. 安装 安装samba 直接采用 Ubuntu16.04 desktop 里面的安装向导来完成: 选中需要共享的文件夹 -> 右键 “local Network Share” -> 安 ...

  9. MAC下安装Fiddler抓包工具

    需求 我们都知道在Mac电脑下面有一个非常好的抓包工具:Charles.但是这个只能抓代理的数据包.但是有时候想要调试本地网卡的数据库 Charles 就没办法了.就想到了在windows下面的一个F ...

  10. S3C2440A特殊寄存器

    S3C2440A特殊寄存器 特殊寄存器有: 输入输出端口 存储器控制器 NANDFLASH 看门狗定时器 时钟和电源管理 PWM定时器 UART USB设备 中断控制器 DMA LCD控制器 RTC ...