此案例 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. js中如何判断属性是对象实例中的属性还是原型中的属性

    ECMAScript5中的hasOwnProperty()方法,用于判断只在属性存在与对象实例中的时候,返回true,in操作符只要通过对象能访问到属性就返回true. 因此只要in操作符返回true ...

  2. 7-1 jmu-python-汇率兑换 (10 分)

    7-1 jmu-python-汇率兑换 (10 分)   按照1美元=6人民币的汇率编写一个美元和人民币的双向兑换程序 输入格式: 输入人民币或美元的金额,人民币格式如:R100,美元格式如:$100 ...

  3. 简单说 JavaScript中的事件委托(下)

    说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...

  4. 前端每日实战：125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是 ...

  5. IDEA激活码（可用2100年，亲测有效）

    三步骤: 1.下载rar包 2.将rar中bin包内容替换IDEA安装目录下bin内容,然后编辑idea.exe.vmoptions和idea64.exe.vmoptions文件,编辑内容一样 将最后 ...

  6. js之重写原型对象

    “实例中的指针仅指向原型,而不是指向构造函数”. “重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的关系:它们引用的仍然是最初的原型”.——前记 var fun = function(){ ...

  7. NTP网络时钟服务器品牌

    NTP网络时钟服务器品牌 在科技的不断进步和发展下,时钟的种类和功能也在发生着变化,以满足人们的各种需求,时钟从原始的机械时钟发展成具有多钟功能的时钟.而时钟服务器主要是给时钟提供时间信息的,时钟服务 ...

  8. hadoop的伪分布式系统

    1.下载hadoop 链接:https://pan.baidu.com/s/10HBQd57pA4OYNPXe8Dwx9g 提取码:1wtk 运行hadoop需要Java环境,所以还需要安装jdk 链 ...

  9. 黑科技神器-uTools

    Hello,各位小伙伴们好,又到周末了,小黑哥给大家分享一款神器:『utools』. 官网地址:https://u.tools/ uTools 是一个极简.插件化.跨平台的现代桌面软件.通过自由选配丰 ...

  10. 微博立场检测 60分Baseline

    AI研习社最近举办了一个比赛--微博立场检测,实际上就是一个NLP文本分类的比赛 Baseline-FastText 我的Baseline方法用的是pkuseg分词+FastText,最好成绩是60, ...