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

最新推荐文章于 2024-04-23 16:20:16 发布

@Eleven

最新推荐文章于 2024-04-23 16:20:16 发布

阅读量2.2k

点赞数

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

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

版权

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)