springboot+layui整合kindeditor富文本编辑器

最近用layui搭一个后台, 在发文章的时候有用到富文本编辑器 ,这里记录一下.

本人用的是 kindeditor富文本编辑器,因为layui自带的富文本感觉功能不是很多.

kindeditor 下载地址 :  http://kindeditor.net/down.php

从官网下下来的 kindeditor 文件夹里取我们需要用到的几个目录就行了

springboot+layui整合kindeditor富文本编辑器_第1张图片

直接放到项目静态资源文件里  就行了

springboot+layui整合kindeditor富文本编辑器_第2张图片

 

在页面里引入本地富文本的js文件  因为我用的是 springboot 所以静态资源路径直接用根路径就行了.





然后再对应的渲染富文本编辑器. 我把这一段放在  标签里了, 因为在layui的弹出层里可能会因为延迟加载不出来,所以直接放在head里加载.

    

其中 

uploadJson: '/fileupload/uploadArticleImg',是富文本里面上传图片的接口

textarea[name="content"]  对应 需要渲染成富文本的那个 textarea标签

springboot+layui整合kindeditor富文本编辑器_第3张图片

然后就好啦

springboot+layui整合kindeditor富文本编辑器_第4张图片

获取富文本的内容 只需要  

  editor1.html()  即可

    editor1.html(" 给富文本赋值")    也可以这样给富文本动态赋值. 

 

你可能感兴趣的:(layui,富文本编辑器)