KindEditor（富文本编辑器）的简单使用

1. 首先，去kindeditor官网下载我们所需要的资源

下载地址：资源下载路径

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

前台代码展示：

<script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script><script>KindEditor.create('#editor_id', {width : '100%',height: '300px',//显示图片空间按钮allowFileManager:true,// 图片空间按钮的URLfileManagerJson:'${ctx}/article/browser',//文件上传的urluploadJson:'${ctx}/article/upload',//指定后台接收的图片的名称filePostName:'aa',//回调函数afterBlur:function () {this.sync();}});
</script>//页面展示kindeditor页面的地方
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
</textarea>

      //添加、修改的模态框function openModel(oper, id) {//根据id获得一行数据var article = $("#article-table").jqGrid("getRowData",id);$("#author").empty();//下拉框$.ajax({url:'${ctx}/guru/findAll',type:'post',data: {dharma:article.guruId},success:function (data) {$("#author").append(data);}});//清空编辑器KindEditor.html("#editor_id","");//数据回显$("#article-id").val(article.id);$("#article-oper").val(oper);$("#article-title").val(article.title);//kindEditor的回显KindEditor.html("#editor_id",article.content);$("#modal").modal("show");}

后台代码展示（本地上传和图片空间的实现）：

    //图片空间@RequestMapping("browser")public Map<String,Object> browser(HttpServletRequest request){//获取当前项目图片文件夹的路径File file = new File(request.getSession().getServletContext().getRealPath("view/article/image"));//文件夹中的所有文件File[] files = file.listFiles();String current_url = "http://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/view/article/image/";System.out.println(current_url);List<Object> list = new ArrayList<>();for (int i = 0; i < files.length; i++) {Map<String, Object> map = new HashMap<>();map.put("is_dir",false);map.put("has_file",false);map.put("filesize",files[i].length());map.put("is_photo",true);map.put("filetype", FilenameUtils.getExtension(files[i].getName()));map.put("filename",files[i].getName());map.put("datetime",new Date());list.add(map);}Map<String, Object> map = new HashMap<>();map.put("current_url",current_url);map.put("total_count",files.length);map.put("file_list",list);return map;}//本地上传@RequestMapping("upload")public Map<String,Object> upload(MultipartFile aa, HttpServletRequest request) throws IOException {System.out.println("aa:   "+aa.getOriginalFilename());//文件上传File realPath = new File(request.getSession().getServletContext().getRealPath("view/article/image"));File file = new File(realPath,aa.getOriginalFilename());aa.transferTo(file);Map<String, Object> map = new HashMap<>();String url = "http://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/view/article/image/"+aa.getOriginalFilename();//返回 需要的返回值map.put("error",0);map.put("url",url);return map;}

实现的是这两个图片上传的按钮

KindEditor（富文本编辑器）的简单使用相关推荐

（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
(转）淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
学习整理在php中使用KindEditor富文本编辑器
学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...
kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙:或者直接CSDNhttp://download.csdn.net/downlo ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
KindEditor富文本编辑器上传功能PHP语言报错问题
问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...
kindEditor 富文本编辑器使用介绍
第一版:存放位置: ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <s ...
KindEditor富文本编辑器【图片、视频等功能的富文本编辑器】
官方下载地址:http://kindeditor.net/demo.php 下载插件: 简单模式.默认模式富文本编辑器: 默认模式html页面: <!DOCTYPE html> <h ...
淘淘商城第三天—完成商品添加功能商品类目选择图片上传图片服务器搭建 kindEditor富文本编辑器的使用商品添加功能
1.实现商品类目选择功能 1.1需求在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...

KindEditor（富文本编辑器）的简单使用

1. 首先，去kindeditor官网下载我们所需要的资源

下载地址：资源下载路径

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

前台代码展示：

后台代码展示（本地上传和图片空间的实现）：

KindEditor（富文本编辑器）的简单使用相关推荐

最新文章

热门文章