页面使用Summernote富文本组件

第一步、首先引用Summernote富文本组件相关配置

第二步、编写视图页面的代码

第三步、编写javascript代码

$('.summernote').summernote(
            {
                lang: 'zh-CN',
                height: 200,
                width:500,
                focus: true,
                callbacks: {
                    onImageUpload: function (files, editor) {
                        var $files = $(files);
                        // 通过each方法遍历每一个file
                        $files.each(function () {
                            var file = this;
                            // FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
                            var data = new FormData();
                            // 将文件加入到file中，后端可获得到参数名为“file”
                            data.append("file", file);
                            // ajax上传
                            $.ajax({
                                data: data,
                                type: "POST",
                                url: //写出上传富文本图片接口地址
                                cache: false,
                                contentType: false,
                                processData: false,
                                // 成功时调用方法，后端返回json数据
                                success: function (data) {
                                    var imgUrl = data.data.fileUrl;
                                    var fileName = data.data.title;
                                    console.log(imgUrl);
                                    $('.summernote').summernote('insertImage',imgUrl,fileName);
                                }
                            });
                        })
                    },
                    onkeydown: function(e) {
                        console.log(e)
                    }
                }
            });

第四步、将富文本中的值取出

var content = $('.summernote').summernote('code');

最后把content值传到后端就行了