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 后台系统引入富文本编辑器的使用的更多相关文章

  1. 在后台管理系统中引入富文本编辑器 (vue-quill-editor)

    在admin系统中引入富文本编辑器 (vue-quill-editor) 由于公司项目的需求,内容需要更新,那么自然需要admin后台来上传内容,在苦苦寻觅了N个编辑器之后,终于找到了一个比较容易使用 ...

  2. bbs项目引入富文本编辑器和处理xss攻击和文章预览

    一.富文本编辑上传文章和图片 富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中 然后我们在html中这样使用富文本编辑器 <!DOCTYPE ...

  3. 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器

    使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...

  4. Django Admin后台使用tinymc 富文本编辑器

    1.CDN地址 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 2.修改base.ht ...

  5. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  6. 关于layui富文本编辑器和form表单提交的问题

    今天下午因为要做一个富文本编辑器上传文件给后台,所以看了一下layui的富文本编辑器,折腾了半天,终于把这玩意搞定了. 首先需要先创建layui的富文本编辑器 <textarea id=&quo ...

  7. CKEditor富文本编辑器

    CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...

  8. JAVA 集成 Ueditor 百度富文本编辑器

    开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...

  9. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

随机推荐

  1. openstack前期准备

    . 两台虚拟机,安装Centos7系统 两个网卡 -- 一个NAT模式,一个仅主机模式 两个硬盘 -- 一个20GB,一个50GB 内存 -- 主 .6GB(根据自己的配置,大于2G即可) 从 1.6 ...

  2. Mybatis插入数据返回自增主键

    方法有很多,参考 mysql函数之六:mysql插入数据后返回自增ID的方法,last_insert_id(),selectkey 这里记录一下工作中自己用到的selectkey方法的详细过程. po ...

  3. LockSupport学习

    LockSupport工具类定义了一组的公共静态方法,这些方法提供了最基本的线程阻塞和唤醒功能.Java锁和同步器框架的核心工具类AQS:AbstractQueueSynchronizer,就是通过调 ...

  4. redis之(十一)redis实现缓存的功能

    [一]redis实现缓存的原理 --->利用键的失效时间设置实现缓存技术 --->由于redis的内存有限,可以在redis的配置文件里设置maxmemory的参数.来限制redis最大可 ...

  5. Message Queue中的推与拉(转)

    Message Queue的设计和实现(7)http://mp.weixin.qq.com/s/zQdDBAHu1UgJJzxH2eCHgQ 数据发送中的推与拉. 当MQ要把数据给消费者的时候,就涉及 ...

  6. 关于星号(**/*.java)

    关于星号(**/*.java) (1)前面两个星号(**)表示在项目的所有文件夹(包括子文件夹)中的文件:*.java表示以 .java结尾的所有文件. (2)如果前面两个星号(**)没有,只有星号( ...

  7. MITx 创业101 寻找你的顾客

    来自MITx的创业课 步骤一 市场分割(Market Segmentation) 头脑风暴所有可能的市场,关注可能性 寻找最终用户(End User)——会使用你的产品的用户,但不一定会付钱 思考产品 ...

  8. 【JBPM4】任务节点-任务分配assignee

    JPDL <process key="task" name="task" xmlns="http://jbpm.org/4.4/jpdl&quo ...

  9. 文本检查点web_reg_find和web_find两个函数的区别

    LR脚本实战:文本检查点web_reg_find和web_find两个函数的区别   web_reg_find是先注册(register)后查找的:使用时将它放在请求语句的前面. 而web_find是 ...

  10. 将xml文件转为c#对像

    读取xml文件数据,通过序列化反序列化转为List<T>对象后,对对象进行操作.