kindeditor（富文本编辑器）的使用

最新推荐文章于 2020-05-11 17:04:36 发布

weixin_34050389

最新推荐文章于 2020-05-11 17:04:36 发布

阅读量102

点赞数

原文链接：https://my.oschina.net/xpx/blog/1838423

版权

为什么80%的码农都做不了架构师？>>>

导入js

<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" src="js/common.js"></script>

定义多行文本（不可见，给定name）

<textarea style="width:800px;height:300px;visibility:hidden;" id="desc" name="desc"></textarea>

DOM层加载完毕后执行初始化富文本编辑器

var editor;
    //页面初始化完毕后执行此方法
    $(function () {
        //创建富文本编辑器
        editor = COMMON.createEditor("#desc");
    });

取文本编辑器中的内容，将编辑器的内容设置原来的textarea空间里

 //提交表单
function submitForm() {
   //同步文本框中内容
   editor.sync();
}

COMMON.JS内容：

var COMMON = {
    // 编辑器参数
    kingEditorParams: {
        //指定上传文件参数名称
        filePostName: "uploadFile",
        //指定上传文件请求的url。
        uploadJson: '/pic/upload',
        //上传类型，分别为image、flash、media、file
        dir: "image"
    },
    createEditor: function (select) {
        return KindEditor.create(select, COMMON.kingEditorParams);
    }
};

PicController

    @RequestMapping("/pic/upload")
    @ResponseBody
    public Map<String,Object> picUpload(MultipartFile uploadFile) {
        try {
            //接收上传的文件
            //上传图片
            //响应上传图片的url
            Map result = new HashMap<>();
            result.put("error", 0);
            result.put("url", "/123");
            return result;
        } catch (Exception e) {
            e.printStackTrace();
            Map result = new HashMap<>();
            result.put("error", 1);
            result.put("message", "图片上传失败");
            return result;
        }

    }