easyui 后台系统引入富文本编辑器的使用
1.首先,想在项目中引入相关的jar包
2.html页面中加入相关的引用
<!-- kindeditor -->
<script type="text/javascript"
th:src="@{/lib/kindeditor/kindeditor.js}"></script>
<script type="text/javascript"
th:src="@{/lib/kindeditor/lang/zh_CN.js}"></script>
<th>公告内容:</th>
<td>
<textarea id="detail" name="detail" style="width:100%;height:200px;">
</textarea>
</td>
3.js文件中的方法的处理
//介绍富文本编辑器
KindEditor.ready(function(K) {
introEditor = K.create("#detail", {
width : 100,
minHeight : '300px',
uploadJson : parent.baseUrl + "file/kindeditorUploadImg",
items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print',
'template', 'code', 'cut', 'copy', 'paste', 'plainpaste',
'wordpaste', '|', 'justifyleft', 'justifycenter',
'justifyright', 'justifyfull', 'insertorderedlist',
'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall',
'|', 'formatblock', 'fontname', 'fontsize', '|',
'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'strikethrough', 'lineheight', 'removeformat', '|',
'image', 'flash', 'media', 'insertfile', 'table', 'hr',
'pagebreak', 'anchor', 'link', 'unlink', '|', 'about',
'fullscreen' ],
});
});
4.富文本编辑器的赋值
introEditor.html(),
detail : introEditor.html(redner.detail)
5.富文本编辑器上传图片方法的控制器的具体实现
@RequestMapping(value = "/kindeditorUploadImg")
@ResponseBody
public editorDto imageUeditorStorage(@ModelAttribute("kindUpload") @Valid KindUpload kindUpload)
throws IOException {
editorDto dto = new editorDto();
MultipartFile file = kindUpload.getImgFile();
if (!file.isEmpty()) {
//将上传文件的后缀名进行小写处理
String ext = StorageUtility.getFileExt(file.getOriginalFilename()); //创建新的文件的名称
String newFileName = System.currentTimeMillis() + ext; //
File storageFile = storageUtility.getNewStorageFile(newFileName, ""); String OriginalFilename = file.getOriginalFilename();
FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(storageFile)); long fileId = AttachmentFileService.createFile(newFileName, OriginalFilename, storageFile.getPath(), "test",
1);
dto.setUrl(storageUtility.getFileViewPath(String.valueOf(fileId)));
}
dto.setError(0);
return dto;
}
easyui 后台系统引入富文本编辑器的使用的更多相关文章
- 在后台管理系统中引入富文本编辑器 (vue-quill-editor)
在admin系统中引入富文本编辑器 (vue-quill-editor) 由于公司项目的需求,内容需要更新,那么自然需要admin后台来上传内容,在苦苦寻觅了N个编辑器之后,终于找到了一个比较容易使用 ...
- bbs项目引入富文本编辑器和处理xss攻击和文章预览
一.富文本编辑上传文章和图片 富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中 然后我们在html中这样使用富文本编辑器 <!DOCTYPE ...
- 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器
使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...
- Django Admin后台使用tinymc 富文本编辑器
1.CDN地址 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 2.修改base.ht ...
- django的admin或者应用中使用KindEditor富文本编辑器
由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...
- 关于layui富文本编辑器和form表单提交的问题
今天下午因为要做一个富文本编辑器上传文件给后台,所以看了一下layui的富文本编辑器,折腾了半天,终于把这玩意搞定了. 首先需要先创建layui的富文本编辑器 <textarea id=&quo ...
- CKEditor富文本编辑器
CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...
- JAVA 集成 Ueditor 百度富文本编辑器
开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
随机推荐
- ASPxTreeList的右键按钮事件
ASPxTreeList应该是比较长用的控件了~现在就来说说它的右键按钮事件 这里实现的是右键里有折合和展开所有节点的功能 code: <dx:ASPxTreeList ID="ASP ...
- [ python ] 项目:haproxy配置文件增删改查
1. 开发要求 实现对 haproxy.cfg 增删改查操作 2. 程序介绍 # 作者:hkey # 博客地址:https://www.cnblogs.com/hukey/p/9288279.html ...
- Jump Game I&&II——入门级贪心算法
Jump Game I Given an array of non-negative integers, you are initially positioned at the first index ...
- Android----APP性能优化
性能优化的目标 快 如何让 app 在运行过程过不卡顿,运行流畅,速度快,也就是说如何解决卡顿呢?我们先看看那些因素影响卡顿? UI,包括ui的绘制,刷新等 启动,包括冷启动,热启动,温启动等 跳转, ...
- NOI2014 起床困难综合症 day1t1
感觉NOI题在向简单方向发展,或者说明年会难到暴呢? 直接模拟啊,枚举每个二进制数位,看经过变换之后是否为1及为1的条件即可.\( O(nlogm)\). 然后...跪了一个点,第五个死活比标准大一. ...
- highcharts高级画图柱状图和折线图
折线图一枚 $("#z_line").highcharts({ chart: { type: 'line' }, credits: { enabled: false // 禁用版权 ...
- NHibernate框架与BLL+DAL+Model+Controller+UI 多层架构十分相似--『Spring.NET+NHibernate+泛型』概述、知识准备及介绍(一)
原文://http://blog.csdn.net/wb09100310/article/details/47271555 1. 概述 搭建了Spring.NET+NHibernate的一个数据查询系 ...
- HDU 3339 In Action【最短路+01背包模板/主要是建模看谁是容量、价值】
Since 1945, when the first nuclear bomb was exploded by the Manhattan Project team in the US, the n ...
- JS内存管理与垃圾回收
内存分配 var n = 374; // 为数字分配内存 var s = 'sessionstack'; // 为字符串分配内存 var o = { a: 1, b: null }; // 为对象及其 ...
- 制作启动U盘
概述 将普通的u盘制作成启动u盘,用于引导安装操作系统. 材料: 普通U盘 需要有足够的存储空间,里面的内容请提前备份. 操作系统iso文件 PowerISO 商业软件,有试用期:用来制作启动u盘 正 ...