KindEditor的简单应用

我们要使用kindeditor时，先去kindeditor官网下载我们所需要的资源

网址:资源下载路径

然后解压资源包，把资源文件夹添加到自己的项目中去。

废话不多说，直接上代码

 <script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script><script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script><script>KindEditor.ready(function (K) {window.editor = K.create('textarea[name="content"]', {//本地上传的方法路径uploadJson: '/article/upload',//上传文件名filePostName: 'aa',//本地空间的按钮allowFileManager:true,//本地空间图片的获取路径fileManagerJson:'/article/cloud'//回调函数afterBlur: function () {this.sync();}})})</script>//页面展示kindeditor页面的地方<textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>

下面是后台java的代码（从电脑本地上传和查看服务器本地图片）

//从电脑本地上传图片
@RequestMapping("upload")public Map<String, Object> upload(MultipartFile aa, HttpServletRequest request) {HashMap<String, Object> map = new HashMap<>();try {String realPath = request.getSession().getServletContext().getRealPath("/view/article/image/");//拼接url路径  格式：  http://服务器名：端口号/项目名/资源文件存储路径/文件名String url = "http://" + request.getServerName() + ":"+ request.getServerPort()+ request.getContextPath() + "/view/article/image/" + aa.getOriginalFilename();//文件上传aa.transferTo(new File(realPath, aa.getOriginalFilename()));map.put("error", 0);map.put("url", url);return map;} catch (IOException e) {e.printStackTrace();map.put("error", 1);map.put("url", null);return map;}}//    读取本地服务器资源路径中的图片@RequestMapping("cloud")public Map<String, Object> cloud(HttpServletRequest request) {//获取文件夹的绝对路径String realPath = request.getSession().getServletContext().getRealPath("/view/article/image/");File file = new File(realPath);//获取当前文件夹的文件File[] files = file.listFiles();List<FileMes> list = new ArrayList<>();for (File f : files) {//fileMes是我自己封装的一个对象 用于存储照片的信息  也可以使用一个map存储信息FileMes fileMes = new FileMes();fileMes.setFilesize(f.length());fileMes.setIs_dir(f.isDirectory());fileMes.setIs_photo(true);fileMes.setDir_path(realPath);fileMes.setFiletype(FilenameUtils.getExtension(f.getName()));fileMes.setFilename(f.getName());fileMes.setHas_file(f.isFile());fileMes.setDatetime(new Date());list.add(fileMes);}String url = "http://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/view/article/image/";Map<String, Object> map = new HashMap<>();map.put("current_url",url);map.put("total_count",files.length);map.put("file_list",list);return map;}

KindEditor的简单应用相关推荐

kindeditor用法简单介绍（转）
1,首先去官网下载http://www.kindsoft.net/ 2,解压之后如图所示: 由于本人做的是用的是JSP,所以ASP,PHP什么的就用不上了,直接把那些去掉然后将整个文件夹扔进Myecl ...
kindeditor用法简单介绍
最近做毕业设计用了一个叫做kindeditor的文本编辑工具,相信很多人都用过,这货和fckeditor差不多,个人感觉这个的皮肤更好看,而且对中文的支持更好,没那么容易出现中文乱码问题.下次记录一下 ...
Kindeditor的简单使用以及图片上传
详细的笔者也不是特别懂,但是基本的使用还是会的首先到官网下载相应的插件http://kindeditor.net/down.php,下载完的文件打开后是这样的,看着有点多但是我们只取出需要的,只有 ...
KindEditor的简单使用
1.KindEditor 简介 KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(tex ...
Django项目后台admin富文本KindEditor教程0基础
由于Django开发过程中,发现对于博客类的文章前端显示不友好,所以想在后台集成一个富文本编辑器,这样就可以轻松的解决前台页面显示没有格式的问题,给你一个漂亮的.可以编辑格式的前端页面. 在引入富文本 ...
JavaEye论坛热点推荐－2009年3月
JavaEye论坛热点推荐-2009年3月 JavaEye论坛是JavaEye文章质量最高讨论最活跃的版面之一,我们为您总结了2009年3月份的论坛Java,AJAX,Ruby,综合技术和项目管理等热 ...
ASP.NET一款免费富文本（RichText）编辑器KindEditor，实现在线排版编辑文章。这里简单介绍下如何使用
一般用到富文本编辑器的地方:留言板,论坛的发帖页以及回复页等. 所用软件VS2012旗舰版 KindEditor下载地址(本文实例中所用版本4.1.10): http://download.csdn. ...
富文本编辑器kindEditor简单教程
最近需求用到了富文本编辑器.kindEditor一直是我的首选,简单好用,功能挺全. 首先下载kindEdtor资源包. 我这里使用的是jsp,只需要把下列包拷贝到kindEditor文件夹下(Web ...
kindeditor简单使用
先引入: <script src="/static/jquery-3.3.1.min.js"></script><script src="/ ...
KindEditor（富文本编辑器）的简单使用
1. 首先,去kindeditor官网下载我们所需要的资源下载地址:资源下载路径 2. 然后解压资源包,把资源文件夹添加到自己的项目中去. 前台代码展示: <script charset=&q ...

KindEditor的简单应用

KindEditor的简单应用相关推荐

最新文章

热门文章