kindeditor使用。

1.导入资源包 kindeditor-all-min.js；

官网或者https://download.csdn.net/download/leadseczgw01/11015747；

2.页面元素（只需要一个textarea）

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>kindeditor demo</title>
</head>
<body>
<textarea id="textareaId" cols="160" rows="20"></textarea>
<script type="text/javascript" src="/console/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" src="/console/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript">// 编辑器参数var kingEditorParams = {//指定上传文件参数名称filePostName  : "uploadFile",//指定上传文件请求的urluploadJson : '/console/upload/uploadFck.do',//上传类型，分别为image、flash、media、filedir : "image"};KindEditor.create('#textareaId',kingEditorParams);KindEditor.sync();
</script>
</body>
</html>

3.效果

4.后台接收kindeditor上传的图片等资源

    // kindeditor上传@RequestMapping("uploadFck.do")public void uploadFck(MultipartFile uploadFile, HttpServletRequest request, HttpServletResponse response){try {// 图片保存到本地String imgUrl = SaveFileUtil.saveFileToLocal(uploadFile, request.getSession().getServletContext().getRealPath("/"));String basePath = request.getContextPath();imgUrl = basePath+"/"+imgUrl;// 响应上传结果JSONObject jsonObject = new JSONObject();jsonObject.put("url",imgUrl); // 固定jsonObject.put("error",0); // 固定response.setContentType("application/json;charset=UTF-8");PrintWriter writer = response.getWriter();writer.write(jsonObject.toString());writer.flush();} catch (IOException e) {e.printStackTrace();}}

5.若要将整个textarea作为form的一部分提交，只需要在textarea中添加name属性；传送到后台时，若kindeditor中有图片和文字，kindeditor会先将图片上传到后台，并获取到资源的url，提交到后台的内容将是资源url和文本字符串。

kindeditor使用。相关推荐

【kindeditor】KindEditor获取多个textarea文本框的值并判断非空
kindeditor官网:http://kindeditor.net/demo.php 如何获取多个KindEditor中textarea文本框的值,方式很多种(带有HTML标签). var intr ...
Kindeditor学习中的那些坑
Kindeditor富文本编辑器还算比较好上手的一款插件吧,下面记录一下我在学习和实践中遇到的那些坑. 编辑器初始化方法和参数网上一搜一大把,不想搜的点这里,文档上各个参数已经写得很清楚了,直接拿过来 ...
一个KindEditor的插件[myFocus]
声名:此作品用于学习交流简介:使用KindEditor(富文本编辑器)提供的接口将myFocus(焦点图库)集成在KindEditor上功能:在内容中显示焦点图使用下载此插件并将其解压后的 ...
kindeditor 批量上传路径_FtpClient 实现文件上传
FtpUtils 工具类封装 public static boolean uploadFile( String hostname, int port, String username, String ...
php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
kindeditor扩展粘贴截图功能修改图片上传路径并通过webapi上传图片到图片服务器...
2019独角兽企业重金招聘Python工程师标准>>> kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. ...
kindeditor用法
<?php require_once '../include.php'; checkLogined(); $rows=getAllCate(); //echo $rows; if(!$rows) ...
KindEditor得不到textarea值的解决方法----摘至天涯
以前有朋友遇到过这个问题,就是KindEditor在火狐下或者其他浏览器下都无法得到textarea文本框的值,点击表单提交按钮得到的是空白.昨天天涯PHP博客[http://blog.phpha.c ...
KindEditor自动过滤首行缩进和全角空格的解决方法
KindEditor 4.1.11: kindeditor-all.js 文件第772行: var re = /(\s*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\- ...
在DWZ框架中整合kindeditor复文本框控件
今天上午在DWZ框架中整合kindeditor复文本框控件,发现上传图片是老是提示 "上传中,请稍候...",上网查看别人说可能是文件路径问题,在想以前在其他项目中用这个控件一直没 ...

kindeditor使用。

kindeditor使用。相关推荐

最新文章

热门文章