coding++:快速构建 kindeditor 富文本编辑器(一)
时间:2019-08-28
本文章向大家介绍coding++:快速构建 kindeditor 富文本编辑器(一),主要包括coding++:快速构建 kindeditor 富文本编辑器(一)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
此案例 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、执行效果:
原文地址:https://www.cnblogs.com/codingmode/p/11423250.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- keras CNN卷积核可视化,热度图教程
- 解决tensorflow读取本地MNITS_data失败的原因
- 浅谈keras中Dropout在预测过程中是否仍要起作用
- 浅谈keras中loss与val_loss的关系
- python中tkinter窗口位置坐标大小等实现示例
- python os模块在系统管理中的应用
- Laravel路由研究之domain解决多域名问题的方法示例
- python GUI模拟实现计算器
- 详解php命令注入攻击
- PHP设计模式之策略模式原理与用法实例分析
- python使用QQ邮箱实现自动发送邮件
- php使用lua+redis实现限流,计数器模式,令牌桶模式
- PHP whois查询类定义与用法示例
- Laravel多域名下字段验证的方法
- ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解