此案例 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. On Fixed-Point Implementation of Log-MPA for SCMA Signals

    目录 论文来源 摘要 基本概念 1.SCMA 2.SCMA编码器 研究内容 1.基于Log-MPA的SCMA解码器实现过程 论文创新点 借鉴之处 论文来源 本论文来自于IEEE WIRELESS CO ...

  2. Java面试必问之Hashmap底层实现原理(JDK1.7)

    1. 前言 Hashmap可以说是Java面试必问的,一般的面试题会问: Hashmap有哪些特性? Hashmap底层实现原理(get\put\resize) Hashmap怎么解决hash冲突? ...

  3. 并查集（不相交集）的Remove操作

    给并查集(不相交集)的添加一个\(Remove(X)\)操作,该操作把\(X\)从当前的集合中除去并把它放到自己的集合中. 实现思想 英文原句 We assume that the tree is i ...

  4. vue組件自学

    Vue组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...

  5. 前端每日实战：160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画

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

  6. flask之三：视图高级

    视图高级 app.route和app.add_url_rule app.add_url_rule app.add_url_rule('/list/',endpoint='myweb',view_fun ...

  7. 超详细的HDFS读写流程详解（最容易理解的方式）

    HDFS采用的是master/slaves这种主从的结构模型管理数据,这种结构模型主要由四个部分组成,分别是Client(客户端).Namenode(名称节点).Datanode(数据节点)和Seco ...

  8. 学习Java技术哪家强

    https://github.com/CyC2018/CS-Notes https://github.com/Snailclimb/JavaGuide SpringBoot 之 配置文件优先级 htt ...

  9. CORS(cross-origin-resource-sharing)跨源资源共享

    其实就是跨域请求.我们知道XHR只能访问同一个域中的资源,这是浏览器的安全策略所限制,但是开发中合理的跨域请求是必须的.CORS是W3的一个工作草案,基本思想就是:使用自定义的HTTP头部让浏览器与服 ...

  10. iOS中使用block进行网络请求回调

    iOS中使用block进行网络请求回调 HttpRequest.h // // HttpRequest.h // UseBlockCallBack // // Created by Michael o ...