前言

ruoyi 4.6

介绍

官网： https://summernote/
中文站： https://www.summernote/
源码： https://github/summernote/summernote
gitee镜像： https://gitee/mirrors/summernote

学习手册：

入门手册
深入学习

在若依(ruoyi)中使用

若依(ruoyi)的使用介绍

引入 js 和 css

<th:block th:include="include :: summernote-css" /> 
<th:block th:include="include :: summernote-js" />

添加 html

<div class="form-group">    
    <label class="col-sm-3 control-label">内容：</label>
    <div class="col-sm-8">
        <input type="hidden" class="form-control" name="content">
        <div class="summernote" id="content"></div>
    </div>
</div>

添加 js

<script th:inline="javascript">
    $(function() {
        $('.summernote').summernote({
            lang: 'zh-CN',
            height : 350,
            placeholder: '请输入内容',
            callbacks: {
                onChange: function(contents, $edittable) {
                    $("input[name='" + this.id + "']").val(contents);
                },
                onImageUpload: function(files) {
                    var obj = this;
                	var data = new FormData();
                	data.append("file", files[0]);
                	$.ajax({
                        type: "post",
                        url: ctx + "common/upload",
                		data: data,
                		cache: false,
                		contentType: false,
                		processData: false,
                		dataType: 'json',
                		success: function(result) {
                		    if (result.code == web_status.SUCCESS) {
                		        $('#' + obj.id).summernote('insertImage', result.url);
                		    } else {
                		        $.modal.alertError(result.msg);
                		    }
                		},
                		error: function(error) {
                		    $.modal.alertWarning("图片上传失败。");
                		}
                	});
                }
            }
        });
    });
</script>