富文本编辑器kindeditor的使用(JAVA)

最新推荐文章于 2024-04-16 17:19:53 发布
最新推荐文章于 2024-04-16 17:19:53 发布
阅读量969 收藏 8
点赞数 2
文章标签： Kindeditor 富文本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/spring_ev/article/details/99836872
版权

环境搭建

官方文档 ：编辑器使用方法

  1. 下载并解压放入项目中
  2. 在需要显示编辑器的位置添加textarea输入框
	<textarea id="editor_id" name="content" style="width:700px;height:300px;">

	</textarea>
  1. 引入文件并初始化编辑器
	//引入js文件
	<script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
	<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
	//集成KindEditor
	KindEditor.create('#editor_id',{
	    width:'100%',
	    height:'350px',
	    //显示图片空间按钮
	    allowFileManager:true,
	    //图片空间按钮的URL
	    fileManagerJson:'项目名/article/showImages',
	    //文件上传的URL
	    uploadJson:'项目名/article/upload',
	    //指定后台接收的图片名称
	    filePostName:'image',
	    //失去焦点后保存文本域内容
	    afterBlur:function () {
	        this.sync();
	    }
	});

第二种初始化方法：集成项目时可能不出效果，可直接使用第一种初始化方法；

	<script>
	   KindEditor.ready(function(K) {
	        window.editor = K.create('#editor_id',{
	        	//设置编辑器大小
	            width:'1000px',
	            height:'400px',
	            //显示图片空间按钮
	            allowFileManager:true,
	            //图片空间按钮的URL
	            fileManagerJson:'项目名/article/showImages',
	            //文件上传的URL
	            uploadJson:'项目名/article/upload',
	            //指定后台接收的图片名称
	            filePostName:'image',
	            //失去焦点后保存文本域内容
			    afterBlur:function () {
			        this.sync();
			    }
	        });
	    });
	</script>

图片空间与上传图片

1. 图片空间的实现

  1. 初始化设置，在初始化编辑器设置显示图片空间按钮并设置图片空间URL
		//显示图片空间按钮
	    allowFileManager:true,
	    //图片空间按钮的URL
	    fileManagerJson:'项目名/article/showImages',
  1. 后台代码编写
	@RequestMapping("showImages")
    public Images showImages(HttpServletRequest request){
        Images images = new Images();
        //获取图片文件夹中的数据
        File file = new File(request.getSession().getServletContext().getRealPath("/view/article/image"));
        File[] files = file.listFiles();
        //设置数量
        images.setTotal_count(files.length);
        //设置url
        String url = "http://"+request.getServerName()+":"+request.getServerPort()
                +request.getContextPath()+"/view/article/image/";
        images.setCurrent_url(url);
        //设置集合人数据
        List<Object> list = new ArrayList<>();
        for (File file1 : files) {
            Map<String, Object> map = new HashMap<>();
            map.put("is_dir",false);
            map.put("has_file",false);
            map.put("filesize",file1.length());
            map.put("is_photo",true);
            //使用FilenameUtils时需要导入commons-io包
            map.put("filetype", FilenameUtils.getExtension(file1.getName()));
            map.put("filename",file1.getName());
            map.put("datetime",new Date());
            list.add(map);
        }

        images.setFile_list(list);

        return images;
    }

返回值说明：根据官方demo查得图片空间返回值如下。于是封装了Images对象属性current_url(String)、total_count(Integer)，注意类型一定不能错。本想把上述map也封装一个对象，但get、set方法总是出错。

注意：使用FilenameUtils时需要导入commons-io包

{
    "moveup_dir_path": "",
    "current_dir_path": "",
    "current_url": "/ke4/php/../attached/",
    "total_count": 3,
    "file_list": [
        {
            "is_dir": false,
            "has_file": false,
            "filesize": 208736,
            "dir_path": "",
            "is_photo": true,
            "filetype": "jpg",
            "filename": "1241601537255682809.jpg",
            "datetime": "2018-06-06 00:36:39"
        },
        {
            "is_dir": false,
            "has_file": false,
            "filesize": 14966,
            "dir_path": "",
            "is_photo": true,
            "filetype": "jpg",
            "filename": "1_192040_1.jpg",
            "datetime": "2018-06-06 00:36:39"
        },
        {
            "is_dir": false,
            "has_file": false,
            "filesize": 245132,
            "dir_path": "",
            "is_photo": true,
            "filetype": "jpg",
            "filename": "2009321101428.jpg",
            "datetime": "2018-06-06 00:36:39"
        }
    ]
}

2. 图片上传的的实现

  1. 初始化设置，在初始化编辑器设置文件上传URL和后台接收的图片名称
	//文件上传的URL
	uploadJson:'项目名/article/upload',
	//指定后台接收的图片名称
	filePostName:'image',
  1. 后台代码编写
	@RequestMapping("upload")
    public ImageJSON upload(MultipartFile image, HttpSession session,HttpServletRequest request) throws IOException {
        //上传文件
        String realPath = session.getServletContext().getRealPath("/view/article/image");
        image.transferTo(new File(realPath,image.getOriginalFilename()));

        //返回指定数据
        String url = "http://"+request.getServerName()+":"
                +request.getServerPort()+request.getContextPath()+"/view/article/image/"+image.getOriginalFilename();
        System.out.println(url);
        ImageJSON imageJSON = new ImageJSON(0,url);

        return imageJSON;
    }

返回值说明：根据官方demo查得图片空间返回值如下。于是封装了ImageJSON对象属性error(Integer)、url(String)，注意类型一定不能错。

{
    "error": 0,
    "url": "/ke4/attached/W020091124524510014093.jpg"
}

集成项目遇到的一些问题

  • 初始化时Kindeditor不出效果：
    上文有介绍两种初始化方法，用第一种即可。
  • 在使用bootstrap模态框时，图片空间里的图片无法设置大小
    这是由于图层关系。把模态框中tabindex="-1" 删除即可。
  • 文本域中内容获取不到
    这是因为文本域中的内容不会自动保护。初始化时设置添加事件：文本域失去焦点后自动保存。
	//失去焦点后自动保存文本域内容
	afterBlur:function () {
		this.sync();
	}

完整代码

前台

<%@page contentType="text/html; UTF-8" isELIgnored="false" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="app"/>

<%--这是部分页面，主页面已经引入jquery，bootstrap相关--%>
<script charset="utf-8" src="${app}/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="${app}/kindeditor/lang/zh-CN.js"></script>

<script>

    $(function () {

        $("#article-table").jqGrid({
            // 整合使用bootstrap样式的属性
            styleUI:'Bootstrap',
            url:'${app}/article/findArticleByPage',
            editurl:'${app}/article/operArticle',
            // caption : "文章详细信息",
            datatype:'json',
            colNames:['id','名称','上师','内容','发布时间','操作'],
            // 开启表格编辑模式
            cellEdit:true,
            colModel:[
                {name:'id',align:'center',hidden:true},
                {name:'title',align:'center',editable:true},
                {
                    name:'guruId',
                    align:'center',
                    editable:true,
                    edittype:'select',
                    editoptions:{dataUrl:'${app}/guru/findAll'},
                    formatter:function (value,options,row) {
                        /**
                         * value: 第一次(url)加载到的数据(guruId)
                         * options: 略
                         * row: 当前行(url)的所有数据
                         */
                        return row.guruName;
                    }

                },
                {name:'content',align:'center',editable:true},
                {
                    name:'publishDate',
                    align:'center',
                    formatter:"date",
                    formatoptions: {srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'}
                },
                {
                    name:'oprion',
                    align:'center',
                    formatter:function (value,option,rows) {
                        return "<a class='btn btn-primary' οnclick=\"showModal('edit','"+rows.id+"')\">修改</a>"
                        +"&nbsp;&nbsp;&nbsp;<a class='btn btn-danger' οnclick=\"delaa('"+rows.id+"')\">删除</a>";
                    }
                },
            ],

            //数据表格是否自适应父容器的大小宽度
            autowidth:true,
            //显示行号
            rownumbers:true,
            //在第一列前加入复选框
            multiselect:true,
            multiselectWidth:20,
            //设置高度
            height:400,
            //添加分页
            //使用分页工具栏
            pager:'#article-pager',
            rowList:[5,10,15],
            rowNum:10,
            page:1,
            //显示总记录数
            viewrecords:true,
            closeAfterEdit:true,
        }).navGrid('#article-pager',{edit : false,add : false,del : true,search:true},
            {closeAfterEdit:true,},{ closeAfterAdd: true,}
        );

    })

    //展示模态框
    function showModal(oper,id) {

        //填入下拉列表的值
        $.ajax({
            url:'${app}/guru/findAllBy',
            type:'post',
            datatype:'json',
            success:function (result) {
                $("#article-select").empty();
                $.each(result,function (i,guru) {
                    //填值
                    var p = $("<option value='"+guru.id+"'>"+guru.dharma+"</option>");
                    $("#article-select").append(p);
                })

                //清空表单的值
                //$("#article-form")[0].reset();
                //清空kindeditor文本框的值
                KindEditor.html("#editor_id","");
                //修改时回显信息
                var article = $("#article-table").jqGrid("getRowData",id);
                $("#article-title").val(article.title);
                $("#article-author").val(article.guruId);
                $("#article-oper").val(oper);
                $("#article-id").val(article.id);
                KindEditor.html("#editor_id",article.content);
                $("#article-modal").modal("show");
            }
        })

    }


    //集成KindEditor
    KindEditor.create('#editor_id',{
            width:'100%',
            height:'350px',
            //显示图片空间按钮
            allowFileManager:true,
            //图片空间按钮的URL
            fileManagerJson:'${app}/article/showImages',
            //文件上传的URL
            uploadJson:'${app}/article/upload',
            //指定后台接收的图片名称
            filePostName:'image',
            //失去焦点后自动保存文本域内容
            afterBlur:function () {
                this.sync();
            }

        });

    //提交表单
    function submit() {
        $.ajax({
            url:'${app}/article/operArticle',
            type:'post',
            data:$("#article-form").serialize(),
            datatype:'json',
            success:function () {
                //关闭模态框
                $("#article-modal").modal("hide");
                //刷新表格
                $("#article-table").trigger("reloadGrid");
            }
        })
    }

    function delaa(id) {
        $.ajax({
            url:'${app}/article/operArticle',
            type:'post',
            data:{'oper':'del','id':id},
            datatype:'json',
            success:function () {
                //刷新表格
                $("#article-table").trigger("reloadGrid");
            }
        })
    }
</script>
<%--// tabindex="-1"  不能设置图片宽高--%>
<div class="modal fade" role="dialog" id="article-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加文章</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline" id="article-form">
                    <input type="hidden" id="article-oper" name="oper" value="add">
                    <input type="hidden" id="article-id" name="id">
                    <div class="form-group">
                        <label for="article-title">标题</label>
                        <input type="text" class="form-control" name="title" id="article-title" placeholder="请输入标题...">
                    </div>&nbsp;&nbsp;&nbsp;&nbsp;
                    <%--<div class="form-group">
                        <label for="article-author">作者</label>
                        <input type="text" class="form-control" name="guruName" id="article-author" placeholder="请输入作者...">
                    </div>--%>
                    <div class="form-group">
                        <label for="article-select">作者</label>
                        <%--<input type="select" class="form-control" name="guruName" id="article-author" placeholder="请输入作者...">--%>
                        <select name="guruId" id="article-select" class="form-control">

                        </select>
                    </div>
                    <div class="form-group">
                        <br>
                        <textarea id="editor_id" name="content">

                        </textarea>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" onclick="submit()" class="btn btn-primary">添加</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">文章详情</a></li>
    <li role="presentation"><a onclick="showModal('add')">添加文章</a></li>
</ul>
<table id="article-table"></table>
<div id="article-pager"></div>

后台

@RequestMapping("article")
@RestController
public class ArticleController extends BaseApiService{

    @Autowired
    private ArticleService articleService;

    @RequestMapping("findArticleByPage")
    /**
     * page:查询页数
     * rows:每页显示条数
     * searchField: 查询条件
     * searchString: 查询内容
     * 加入分页工具栏后,远程响应json数据格式为:
     * {"rows":[当前页结果(list)],"page":"当前页","total":"总页数","records":"总条数"}
     */
    public Map<String,Object> findArticleByPage(Integer page, Integer rows,
                                               String searchField, String searchString){
        //创建结果集
        List<Article> articleList = null;
        Integer records = 0;
        HashMap<String, Object> map = new HashMap<>();
        Integer total = 0;


        //判断是否为模糊查询
        if(searchField==null){
            //查询集合
            articleList = articleService.findAllByPage(page, rows);
            //查询总条数
            records = articleService.getCount();
            //计算总页数
            total = records%rows==0?records/rows:records/rows+1;
        }else {
            //查询集合
            articleList = articleService.findAllByPageBySearch(page, rows,searchField,searchString);
            //查询总条数
            records = articleService.getCountBySearch(searchField,searchString);
            //计算总页数
            total = records%rows==0?records/rows:records/rows+1;
        }


        return setPageMap(articleList,page,total,records);

    }

    @RequestMapping("operArticle")
    public Map<String,Object> operArticle(Article article,String id,String oper) {
        //添加
        if("add".equals(oper)){
            String i = articleService.add(article);
            return setResultSuccessData(i);
        }

        //修改
        if("edit".equals(oper)){
            String i = articleService.update(article);
            return setResultSuccessData(i);
        }

        //删除
        if("del".equals(oper)){
            String[] ids = id.split(",");
            for (String i : ids) {
                articleService.delete(i);
            }
        }

        return null;

    }

    @RequestMapping("upload")
    public imageJSON upload(MultipartFile image, HttpSession session,HttpServletRequest request) throws IOException {


        //上传文件
        String realPath = session.getServletContext().getRealPath("/view/article/image");
        image.transferTo(new File(realPath,image.getOriginalFilename()));

        //返回指定数据
        String url = "http://"+request.getServerName()+":"
                +request.getServerPort()+request.getContextPath()+"/view/article/image/"+image.getOriginalFilename();
        System.out.println(url);
        imageJSON imageJSON = new imageJSON(0,url);

        return imageJSON;
    }


    @RequestMapping("showImages")
    public Images showImages(HttpServletRequest request){
        Images images = new Images();
        //获取图片文件夹中的数据
        File file = new File(request.getSession().getServletContext().getRealPath("/view/article/image"));
        File[] files = file.listFiles();
        //设置数量
        images.setTotal_count(files.length);
        //设置url
        String url = "http://"+request.getServerName()+":"+request.getServerPort()
                +request.getContextPath()+"/view/article/image/";
        images.setCurrent_url(url);
        //设置集合人数据
        List<Object> list = new ArrayList<>();
        for (File file1 : files) {
            Map<String, Object> map = new HashMap<>();
            map.put("is_dir",false);
            map.put("has_file",false);
            map.put("filesize",file1.length());
            map.put("is_photo",true);
            map.put("filetype", FilenameUtils.getExtension(file1.getName()));
            map.put("filename",file1.getName());
            map.put("datetime",new Date());
            list.add(map);
        }

        images.setFile_list(list);

        return images;
    }

}
spring_ev
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小博老师解析Java核心技术 ——KindEditor文本编辑器使用
bwf_erg的博客
12-20 487
[引言] 我们在制作Java Web项目的时候，经常会需要用户输入并提交内容复杂的信息，比如文字、图片、表格、样式混排的数据信息，这样简单的文本域控件就难以满足我们的需求了，此时我们则需要使用一些“富文本”编辑器了。文本小博老师就为大家介绍一款非常简单易学，却又功能强大的文本编辑器——KindEditor。 [步骤阅读一]文本编辑器原理 其实文本编辑器的原理非常容易理解，它通过Javascr
富文本编辑器kindeditor的使用
bigLiu66的博客
01-21 1004
一：kindeditor多图片上传插件 KindEditor 4.x 文档 http://kindeditor.net/doc.php 请求的url：/pic/upload 参数：MultiPartFile uploadFile 返回值： 创建一个pojo对应返回值，可以是map 需要把commons-io、fileupload 的jar包添加到工程中。 配置文件上传解析器 ...
kindeditor java_kindeditor在Java项目中的应用以及图片上传配置
weixin_34246656的博客
02-12 474
在官网下载Kindededitor的开发包在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传，除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中找到，注意下面图jar包的位置将官网开发包中的此jsp文件放在你的项目中，其实富文本编辑器在执行文件上传的时候就是请求的是这个upload_json.jsp文件，这个upload_json.jsp文件起始就...
24.富文本编辑器Kindeditor的使用
YingZiBo的博客
11-19 521
下面是富文本编辑器的效果： 上面的效果的出现的原因是：富文本编辑器本质上是html标签，然后把html标签让浏览器渲染一下就有上面的效果了 那么是如何做到让浏览器渲染html标签的呢？ iframe相当于浏览器的一个窗口，去加载一下内容，加载的内容可以被渲染。 Kindeditor的使用步骤： 1.在jsp页面添加js,css引用文
在Vue项目使用kindEditor富文本编译器以及上传图片
最新发布
xiaoHelloWord的博客
04-16 1365
第一步 第二步，建立kindeditor.vue组件 第三步引入 如果需要自定义行距下拉菜单可以直接修改kindeditor-all.js这个。 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctr
java项目中kindeditor的用法1
热门推荐
09-08 1万+
kindeditor是一款很好的在线编辑插件，纯js编写，国产软件，使用也简单，值得支持！参考了它的官方文档，现把它的用法记录下来，以便以后查找。   一、到官网去下载。我下的是kindeditor-3.5.5-zh_CN.zip，当前比较稳定的版本。   二、解压之后，
java常用的编辑器之kindeditor
谢彬のCSDN专栏
05-11 6464
先上图，没图差不多就看不下去的，我懂！ 来个毛爷的，看着好像就能发财一样。。。。 首先下载必要的文件和jar包：http://download.csdn.net/detail/xb12369/9516909 代码的结构： 1. 【资源文件】解压zip文件，将editor复制到项目的的webapps目录下。 2. 【jar包】将kindedi
java集成富文本编辑器KindEditor
07-09
Java集成富文本编辑器KindEditor是一项常见的Web开发任务，它能提供给用户一个可视化的文本编辑界面，使得在网页上创建、编辑带有格式的文本变得简单。KindEditor是一款开源的JavaScript富文本编辑器，适用于Java...
java富文本编辑器kindeditor4.1.11官方推荐的最新版本
12-09
KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...
kindeditor富文本编辑器
07-11
总的来说，KindEditor是一个强大且易用的富文本编辑器，尤其适合与Java环境配合使用，为各种文本编辑应用场景提供了灵活且安全的解决方案。其丰富的功能、良好的扩展性和易用性，使得它在众多富文本编辑器中脱颖而出...
Java web富文本编辑器（kindeditor）.docx
10-10
Java Web 富文本编辑器（KindEditor） Java Web 富文本编辑器（KindEditor）是基于 Java ...KindEditor 是一个功能强大且易于使用的 Java Web 富文本编辑器解决方案，旨在解决开发过程中的编辑功能、图片文件等操作。
JAVA中使用kindeditor实现在线编辑文档
11-21
这是一个在线编辑文档的实例，用的kindeditor做插件，实现像iteye等网站一样的论文提交功能，资料源于网络。
富文本编辑kindeditor使用 java 实现　spring mvc
06-22
富文本编辑kindeditor使用 java 实现　spring mvc也有可以参考
java平台下kindeditor的文件上传
03-23
NULL 博文链接：https://daidaidaiksw-163-com.iteye.com/blog/1041263
kindeditor 上传图片java
07-27
在线编辑器demo,图片上传，错误提示。
kindeditor
08-14
kindeditor是一套开源的html可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容ie、 firefox、chrome、 safari、opera等主流浏览器。 kindeditor使用javascript编写，可以无缝的与java、.net、php、asp等
kindeditor-富文本框编辑器插件
07-22
KindEditor是一款功能强大的开源富文本编辑器，尤其适合Java Web项目，因为它是JSP兼容的。下面将详细介绍KindEditor以及其在实际应用中的相关知识点。 1. **KindEditor的基本结构** KindEditor是由一系列...
KindEditor图片空间增加图片删除功能
了解—学习—进步—满足
02-08 1983
这次试着修改了下KindEditor的图片空间管理，加了一个删除图片的功能进去。 第一步，开放插件显示图片空间功能，代码如下：// 编辑器加载 $.extend(KindEditor.options.htmlTags, {style:['type']}); KindEditor.ready(function(K) { editor = K.create('#editor',{ minHig
kindeditor java_java富文本编辑器KindEditor
weixin_30045751的博客
02-12 170
public voidkindEditorUploadFile(HttpServletRequest request, HttpServletResponse response,@RequestParam("imgFile") MultipartFile file) throwsIOException {ModelMap map= newModelMap();Gson gson= newGson(...
富文本编辑器kindeditor怎么向后端传值
05-26
富文本编辑器 KindEditor 默认会将编辑器内容以 HTML 的形式存储在一个 `<textarea>` 标签中，而传递给后端的值也是这个 `<textarea>` 标签的值。 因此，你可以通过表单提交或 AJAX 请求将这个 `<textarea>` 的值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值