若依框架富文本框的实现

若依框架富文本框的实现:

前端部分

  1. 引入summernote的js跟css
<head>
    <th:block th:include="include :: header('新增工程')" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />

head>
<th:block th:include="include :: summernote-js" />
  1. 写入富文本样式的标签
<div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">现状描述:label>
                        <div class="col-sm-8">
                            <input name="xzms" id="xzms"  type="hidden">
                            <div class="summernote">div>
                        div>
                    div>
                div>
  1. 写入js代码
$('.summernote').summernote({
            placeholder: '请输入现状描述',
            height: 150,
            lang: 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files){
                    sendFile(files[0],this);
                }
            }
       });

	    function sendFile(file,obj) {
    	    var data = new FormData();
    	    data.append('file',file);
    	    $.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).summernote('editor.insertImage',result.url,result.fileName);
            	    }else    {
                	    $.modal.alertError('result.msg');
            	    }
        	    },
        	    error: function(error) {
            	    $.modal.alertWarning("图片上传失败!");
        	    }

    	    });
        }

后端部分

/**
     * 通用上传请求(单个)
     */
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file) throws Exception
    {
        try
        {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("url", url);
            ajax.put("fileName", fileName);
            ajax.put("newFileName", FileUtils.getName(fileName));
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }

function submitHandler() {
            if ($.validate.form()) {
            var sHTML = $('.summernote').summernote('code');
            $("#xzms").val(sHTML);
            var data = $("#form-gongcheng-add").serializeArray();
                $.operate.saveTab(prefix + "/add", data);
            }
        }

实现效果

若依框架富文本框的实现_第1张图片

你可能感兴趣的:(若依,java,java,spring,spring,boot,后端,前端)