java - 如何使用wangEditor将数据存放到数据库中

问题描述

问 题

最近写项目打算用wangEditor富文本编辑器来做一个评论添加和上传图片功能，以前的做法是自己写一个表单input 添加name属性，现在用编辑器来写它是用了div显示编辑器，似乎隐藏了表单元素，想请问使用富文本编辑器怎么做数据添加和图片上传呢？求指教，网上百度的资料用处都不大。

解决方案

正巧我前段时间也用了这个富文本。

看到最新版本是3了，不好意思，我用的

<!-- wangEditor core JS -->
<script src="${pageContext.request.contextPath}/resources/js/wangEditor-2.1.23/wangEditor.min.js"></script>
<%--<script src="https://cdn.bootcss.com/wangeditor/2.1.20/js/wangEditor.min.js"></script>--%>

作者更新的速度好频繁，难道是bug太多？？？https://github.com/wangfupeng...

竟然有一天更新两个小版本。

我还是拿2.1.20举个栗子吧，反正用着没碰到什么问题（javassh）：

先上我的代码：
没用div，就用的文本域去初始化

 <div class="col-md-12 margin-b-60">
    <textarea class="xtl-editor-content" id="textarea1" name="content" placeholder="请输入内容"></textarea>
</div>

 // editor init ....
    var editor = new wangEditor('textarea1');
    editor.config.uploadImgUrl = '/common/editorFileUpload';
    editor.config.uploadImgFileName = 'editorUploadFileName';
    // 将图片大小限制为 3M
    editor.config.uploadImgMaxSize = 3 * 1024 * 1024;
    // 限制一次最多上传 1 张图片
    editor.config.uploadImgMaxLength = 1;
    editor.create();

关于数据添加：

官网有文档，亲测可行，地址：https://www.kancloud.cn/wangf...

关于图片上传

先看官方说明：
https://www.kancloud.cn/wangf...
返回的数据格式值得注意：

我这里上传路径的配置是（异步，当然富文本只适合异步）：

 editor.config.uploadImgUrl = '/common/editorFileUpload';

还有指定参数的name:

editor.config.uploadImgFileName = 'editorUploadFileName';

Controller的处理(按照官方要求的格式拼装返回结果)：

/**
 * editor富文本图片上传
 * @param editorUploadFileName    图片
 * @return  图片url
 * @throws IOException  异常
 */
@RequestMapping(value = "/editorFileUpload", method = RequestMethod.POST)
@ResponseBody
public String editorFileUpload(MultipartFile editorUploadFileName) throws IOException {

    if (editorUploadFileName != null){
        if (editorUploadFileName.getSize()>fileMaxSize2){
            return "error|"+getMessage("file.upload.max.size", new Object[]{"3M"});
        }
        FileUploadModel fileUploadModel = AliyunFileUploadUtil.upload(editorUploadFileName);
        if (fileUploadModel != null && !StringUtils.isEmpty(fileUploadModel.getUrl())) {
           return fileUploadModel.getUrl();
        }else{
            return "error|"+getMessage("do.fail");
        }
    }
    return "error|"+getMessage("file.upload.not.found.file");
}

最后的测试样子：

关于提交

再看我的html部分：

 <textarea class="xtl-editor-content" id="textarea1" name="content" placeholder="请输入内容"></textarea>

name就是提交的东西，就当他是个普通的文本域就好了。
如果你想用js获取它的内容，普通的方法就可以了：

var content = $("#textarea1").val();

这个富文本还算方便，功能不多但够用，也挺接地气，我觉得你多看文档应该没有什么问题，如果你想要的文档没提到，那十有八九就是不支持，你可以选择研究一下改源码或者换富文本
再提交一下文档地址：https://www.kancloud.cn/wangf...

这篇关于java - 如何使用wangEditor将数据存放到数据库中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！