此案例 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. 浅谈.NET Framework 与CLR

            承载公共语言运行时 (CLR) 的所有应用程序均需启动(或称“激活”)CLR 以运行托管代码.             通常,.NET Framework 应用程序在生成它的 CLR ...

  2. Ⅱ：python入门

    一.编程语言介绍 编程语言的分类: 机器语言 汇编语言 高级语言(编译型.解释型号) 总结: 执行效率:机器语言>汇编语言>高级语言(编译型>解释型) 开发效率:机器语言<汇编 ...

  3. mysql插入数据报错一二

    上周selenium+phantomjs+python3简单爬取一个网站,往数据库写数据遇到以下两个问题,记录一下: 报错一:Data truncated for column 'update_tim ...

  4. 小白学 Python 数据分析（12）：Pandas （十一）数据透视表（pivot_table）

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

  5. k8s环境部署.net core web项目(docker本地仓库)

    在之前的文档中,我们部署了.net core web在k8s环境下,达成了集群管理项目的目的.但是,由于是本地部署,需要在所有的node节点都拉取好镜像,这是非常麻烦的,为了只维护一份代码,同步更新. ...

  6. OpenCV中Mat的基本用法：创建、复制

    OpenCV中Mat的基本用法:创建.复制 一.Mat类的创建: 1.方法一: 通过读入一张图像,直接将其转换成Mat对象. Mat image = imread("test.jpg&quo ...

  7. 开源一个使用python和pyQT实现的产测工具

    导语 之前给朋友友情开发的一个产测工具,现开源,有需要的朋友可以在这个基础上进行二次开发. 操作界面如下 主要特性 自动识别启动信息,然后进入产测写入状态 序列号和MAC地址自动按指定数目增加 每次操 ...

  8. PHP8年开发经验原创开发文档教程

    订阅微信公众号: gzgwgas 每天为你分享PHP开发经验,坚决不踩坑,坚决不入坑. 微信扫码,关注公众号有惊喜!

  9. xpath提取标签和内容

    转:https://segmentfault.com/q/1010000012110138/a-1020000012113020 <div> <table> <tr> ...

  10. Python自定义模块

    自定义模块 自定义模块(也就是私人订制),我们要自定义模块,首先就要知道什么是模块 一个函数封装一个功能,比如现在有一个软件,不可能将所有程序都写入一个文件,所以咱们应该分文件,组织结构要好,代码不冗 ...