wangeditor富文本编辑器的使用（包含文件上传）

最新推荐文章于 2024-03-27 09:12:04 发布

@Eleven

最新推荐文章于 2024-03-27 09:12:04 发布

阅读量2.2k

点赞数

分类专栏：工具类+笔记文章标签： wangEditor 富文本编辑器 js css fonts

本文链接：https://blog.csdn.net/qq_41347385/article/details/106094785

版权

工具类+笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、引入wangEditor的相关js和css文件

由于不知道怎么作为附件分享给大家，大家可以去我的博客—下载里面去免费下载相关资料，敬请谅解。

2、页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="${contextPath}/css/zTreeStyle/ztree.css?versionString=$!versionString" type="text/css">
    <link rel="stylesheet" href="${contextPath}/css/zTreeStyle/zTreeStyle.css?versionString=$!versionString" type="text/css">
    <link href="${contextPath}/css/basic.css" type="text/css?versionString=$!versionString" rel="stylesheet" />
    <link href="${contextPath}/css/jbox.css" type="text/css?versionString=$!versionString" rel="stylesheet" />
    <link rel="shortcut icon" href="${contextPath}/images/icon/logo.ico?versionString=$!versionString" />
    <script type="text/javascript" src="${contextPath}/js/jquery-1.7.1.js?versionString=$!versionString"></script>
    <script src="${contextPath}/js/jquery.jBox.src.js?versionString=$!versionString" type="text/javascript"></script>
    <script src="${contextPath}/js/jquery.jBox-zh-CN.js?versionString=$!versionString" type="text/javascript"></script>
    <script src="${contextPath}/js/common/jboxutils.js?versionString=$!versionString" type="text/javascript"></script>
    <script src="${contextPath}/js/ztree/jquery.ztree.core-3.1.js?versionString=$!versionString" type="text/javascript"></script>
    <script src="${contextPath}/js/ztree/jquery.ztree.excheck-3.1.js?versionString=$!versionString" type="text/javascript"></script>
    <script type="text/javascript" src="${contextPath}/js/versionContent/versionContent.js?versionString=$!versionString"></script>
    <title>${merchantTitle}</title>
    <script language="JavaScript" type="text/javascript">
        var webtype=".$webType";
        var merchantUrl="";
        var contextPath="${contextPath}";

    </script>


    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="${contextPath}/wangEditer/wangEditor.js?versionString=$!versionString"></script>
    <script type="text/javascript">
        var editor = null;
        $(function () {
            const E = window.wangEditor;
            editor = new E('#editor');
            // 配置服务器端地址
            editor.customConfig.uploadImgServer = '${contextPath}/original/original_upload.$webType';
            //设置图片大小，七牛云限制4M
            editor.customConfig.uploadImgMaxSize = 4 * 1024 * 1024;
            //设置最多上传数量
            editor.customConfig.uploadImgMaxLength = 20;
            editor.customConfig.withCredentials = true;
            editor.customConfig.uploadFileName = 'myfiles';
            editor.customConfig.uploadImgTimeout = 300000;
            editor.customConfig.debug = false;
            editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                    console.dir(files)
                },
                success: function (xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                    alert("ok")
                    console.dir(result)
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                fail: function (xhr, editor, result) {
                    alert("出错了")
                    console.dir(result)
                    // 图片上传并返回结果，但图片插入错误时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                error: function (xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                timeout: function (xhr, editor) {
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
            };
            editor.create();
        });


        // 封装 console.log 函数
        function printLog(title, info) {
            window.console && console.log(title, info);
        }
    </script>
    <script>
        function getContent() {
            alert(editor.txt.html())
        }
    </script>

</head>
<div class="middle-right">
    <div class="content">
        <div class="box">
            <form id="form" name="form" action="versionContent_addVersionContent.$webType" method="post" onsubmit="return VersionContent.check('add');">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="data_table">
                    <tbody>
                    <tr>
                        <td width="10%">
                            <b>*</b>标题：
                        </td>
                        <td>
                            <input type="text" name="versionContent.title" id="title"  value="$!versionContent.title"/>
                        </td>
                    </tr>
                    <tr>
                        <td width="10%">
                            <b>*</b>发布时间：
                        </td>
                        <td>
                            <input name="versionContent.releaseTime" id="releaseTime" type="text" value="$!versionContent.releaseTime" style="width:110px;height: 19px;"
                                   onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" class="Wdate"/>
                        </td>
                    </tr>
                    <tr>
                        <td width="10%">
                            <b>*</b>内容：
                        </td>
                        <td>
                            <div id="editor">
                                $!versionContent.content
                            </div>
                            <div onclick="getContent()">点击查看html</div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
            <div class="clear"></div>
        </div>
    </div>
</div>

</html>

注：重点是在页面上添加如下js

<script type="text/javascript" src="${contextPath}/wangEditer/wangEditor.js?versionString=$!versionString"></script>
    <script type="text/javascript">
        var editor = null;
        $(function () {
            const E = window.wangEditor;
            editor = new E('#editor');
            // 配置服务器端地址
            editor.customConfig.uploadImgServer = '${contextPath}/original/original_upload.$webType';
            //设置图片大小，七牛云限制4M
            editor.customConfig.uploadImgMaxSize = 4 * 1024 * 1024;
            //设置最多上传数量
            editor.customConfig.uploadImgMaxLength = 20;
            editor.customConfig.withCredentials = true;
            editor.customConfig.uploadFileName = 'myfiles';
            editor.customConfig.uploadImgTimeout = 300000;
            editor.customConfig.debug = false;
            editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                    console.dir(files)
                },
                success: function (xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                    alert("ok")
                    console.dir(result)
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                fail: function (xhr, editor, result) {
                    alert("出错了")
                    console.dir(result)
                    // 图片上传并返回结果，但图片插入错误时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                error: function (xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                timeout: function (xhr, editor) {
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
            };
            editor.create();
        });


        // 封装 console.log 函数
        function printLog(title, info) {
            window.console && console.log(title, info);
        }
    </script>
    <script>
        function getContent() {
            alert(editor.txt.html())
        }
    </script>

3、在js中获取富文本编辑器的内容并且发给后台

注：重点是这个语句：params[‘versionContent.content’]= editor.txt.html();

addVersionContent:function(){
        try {
            $.jBox("iframe:" + contextPath+"/versionContent/versionContent_toAddVersionContent"+webtype, {
                title : "添加功能介绍",
                width : 950,
                height : 500,
                id:"addVersionContent",
                buttons : {
                    "保存":0,
                    "取消":-1
                },
                submit: function (v, o, f) {
                    if (v == 0) {
                        $("#addVersionContent").contents().find("iframe").contents().find("form").submit();
                        return false;
                    }else{
                        return true;
                    }
                }
            });
        }catch(e){
            $.jBox.info(e.description, "商城温馨信息提示");
        }
    },
    check:function(type)
    {
    	var title = $("#title").val();
        if (title == null || title == "") {
            parent.showTip("请输入标题", "1");
            return false;
        }
        var releaseTime = $("#releaseTime").val();
        if (releaseTime == null || releaseTime == "") {
            parent.showTip("请输入发布时间", "1");
            return false;
        }
        VersionContent.submitForm(type);
        return false;
    },
    submitForm: function (type) {
        var params = {};
        $("#form").find(':input[type!="checkbox"]').each(function(i, obj){
            params[obj.name] = obj.value;
        });
        params['versionContent.content']= editor.txt.html();
        var url=""
        if(type == "add"){
            url =  contextPath+"/versionContent/versionContent_addVersionContent"+webtype;
        }
        if(type == "edit"){
            url =  contextPath+"/versionContent/versionContent_editVersionContent"+webtype;
        }
        try {
            jQuery.ajax({
                type: "POST",
                dataType: "json",
                url:url,
                data:params,
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                success: function(data) {
                    if (data.result == "0") {
                        alert(data.msg);
                        parent.location.href = contextPath + "/versionContent/versionContent_list" + webtype;
                        return true;
                    } else {
                        alert(data.msg);
                        parent.location.href = contextPath + "/versionContent/versionContent_list" + webtype;
                        return true;
                    }
                }
            });
        }catch(e){
            $.jBox.closeTip();
            $.jBox.info(e.description, "商城温馨信息提示");
        }
    },

4、后台代码

对象的各个参数直接会封装到private对象中，然后进行保存标签字符串就可以了。


private VersionContent versionContent;



 public void addVersionContent() throws Exception {
        if (versionContent == null) {
            versionContent = new VersionContent();
        }
        if (StringUtils.isBlank(versionContent.getTitle())) {
            logger.error("versionContent.getTitle() is null");
            this.outPutAjax("{\"msg\":\"标题不能为空\",\"result\":\"1\"}");
            throw new TimeCardServiceException("versionContent.getTitle() is null");
        }
        if (StringUtils.isBlank(versionContent.getReleaseTime())) {
            logger.error("versionContent.getReleaseTime() is null");
            this.outPutAjax("{\"msg\":\"发布时间不能为空\",\"result\":\"1\"}");
            throw new TimeCardServiceException("versionContent.getReleaseTime() is null");
        }
        if (StringUtils.isBlank(versionContent.getContent())) {
            logger.error("versionContent.getContent() is null");
            this.outPutAjax("{\"msg\":\"内容不能为空\",\"result\":\"1\"}");
            throw new TimeCardServiceException("versionContent.getContent() is null");
        }
        try {
            String id = serialGeneratorMgr.getSerialKey(Constants.VERSION_CONTENT_SERIAL);  //自动生成Id
            versionContent.setId(id);
            versionContentService.insert(versionContent);
            this.outPutAjax("{\"msg\":\"" + Constants.RESULT_MSG_SUCC + "\",\"result\":\"0\"}");
        } catch (Exception e) {
            logger.error("add company fail:", e);
            this.outPutAjax("{\"msg\":\"" + Constants.RESULT_MSG_FAIL + "\",\"result\":\"1\"}");
            throw new TimeCardServiceException(e);
        }
    }