此案例 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. 利用机器学习检测HTTP恶意外连流量

    本文通过使用机器学习算法来检测HTTP的恶意外连流量,算法通过学习恶意样本间的相似性将各个恶意家族的恶意流量聚类为不同的模板.并可以通过模板发现未知的恶意流量.实验显示算法有较好的检测率和泛化能力. ...

  2. 7-30 jmu-python-凯撒密码加密算法 (10 分)

    编写一个凯撒密码加密程序,接收用户输入的文本和密钥k,对明文中的字母a-z和字母A-Z替换为其后第k个字母. 输入格式: 接收两行输入,第一行为待加密的明文,第二行为密钥k. 输出格式: 输出加密后的 ...

  3. MVC01

    1.Controller 1) 添加: 在Controller目录右键进行添加,出现很多模式供选择,选择空的Controller,命名后新建.新建后Views 目录将同步生成相应名称的视图文件目录 均 ...

  4. HTML5中form的新增属性或元素

    1.新增的表单元素 1.1 progress表示任务的完成情况,常用于进度条. max 定义进度元素所要求的任务的工作量,默认值为1 value 定义已经完成的工作量,如果max值为1,该值必须是介于 ...

  5. 集成google翻译的小tips

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

  6. 微服务优化之使用gRPC做微服务的内部通信

    使用gRPC做微服务的内部通信 gRPC是一个由Google开源的远程服务调用框架,具有多路复用和双向流式通信的特性. 大家好,在本文中将为大家介绍为什么我们应该使用gRPC代替RESTful或JSO ...

  7. 关于使用layui中的tree的一个坑

    最近几天,因为项目需要,所以自学了下layui,在使用之前就对其比较感兴趣,毕竟封装的东西也不错(个人见解),在接触到layui之后,现在有个需要就是将部门做成tree的样子,开始觉得不怎么难,毕竟都 ...

  8. DEX文件解析---2、Dex文件checksum(校验和)解析

    一.checksum介绍     checksum(校验和)是DEX位于文件头部的一个信息,用来判断DEX文件是否损坏或者被篡改,它位于头部的0x08偏移地址处,占用4个字节,采用小端序存储.     ...

  9. flask blueprint出现的坑

    from flask import Blueprint admin = Blueprint('admin',__name__) def init_bule(app): app.register_blu ...

  10. 数据挖掘入门系列教程（四）之基于scikit-lean实现决策树

    目录 数据挖掘入门系列教程(四)之基于scikit-lean决策树处理Iris 加载数据集 数据特征 训练 随机森林 调参工程师 结尾 数据挖掘入门系列教程(四)之基于scikit-lean决策树处理 ...