html中WangEditor富文本编辑器的图片上传配置项，以及不使用后端回显，直接显示图片的方法

最新推荐文章于 2023-11-06 12:00:00 发布

淮水亭-竹

最新推荐文章于 2023-11-06 12:00:00 发布

阅读量442

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_64928074/article/details/132843392

版权

WangEditor 富文本编辑器上传图片和回传显示效果的使用
直接上代码（这里我使用了我的页面进行一个效果展示）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编写攻略</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> -->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/editor.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.6.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/header.css">
    <script src="js/header.js"></script>
</head>

<body>
 <!-- 头部1 -->
 <div class="container-fluid nav_about">
    <div class="header-container">
        <div class="contact-us">
            <p>联系我们:
                <span class="glyphicon glyphicon-earphone"> 1888888888</span>
                <span class="glyphicon glyphicon-phone-alt"> 020-00000</span>
            </p>
        </div>

        <div class="search-container">
            <div class="input-group search-nav">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">全站 <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">全站</a></li>
                        <li><a href="#">景点</a></li>
                        <li><a href="#">攻略</a></li>
                        <li><a href="#">旅游团</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <input type="text" class="form-control" placeholder="搜索">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
        <div class="button-nav button-login-regiter">
            <div class="btn-group button-nav-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default login">登录</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary register">注册</button>
                </div>
            </div>
            <div class="header_pic display">
                <img src="./image/dg1.jpg" alt="">
            </div>
        </div>

    </div>
</div>
<!-- 头部2 -->

    <div id="top-container">
        <p class="operate_container">
            <a href="./index.html">&lt;&lt;返回主页</a>
            <span class="warning"></span>
            <button onclick="upload()">发布</button>
        </p>
    </div>
    <!--这是富文本编辑器，可以在这里面进行一些编辑-->
    <div style="border-bottom: 1px solid #e8e8e8;">
        <div id="editor-toolbar"></div>
    </div>
    <div id="content">
        <div id="editor-container">
            <div id="title-container">
                <input placeholder="标题(30字以内)..." id="title" type="text">
            </div>
            <div id="editor-text-area"></div>
            <div class="cover_contaienr">
                <div class="cover_inpput">
                    <label class="cover_inpput_label">请上传攻略封面图</label>
                    <input  id="fileInput" type="file" class="cover_introduction" accept="image/*">
                </div>
                <img id="show" src="./images/edtails/photo_icon.png"  alt="">
            </div>
        </div>
    </div>

    <!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> -->
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <script src="./js/editor.js"></script>
</body>

</html>

const E = window.wangEditor

// 切换语言
const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
E.i18nChangeLanguage(LANG)

const editorConfig = {
    placeholder: '内容输入...',
    scroll: false, // 禁止编辑器滚动
    MENU_CONF: {
    //上传图片时的一些配置
        uploadImage: {
        //改接口
            server: "http://localhost:10101/upload/image",
            //文件名
            fieldName: "filename",
            //上传方式
            methods: "post",
            //上传大小
            maxFileSize: 1 * 1024 * 1024,
            //文件限制
            allowedFileTypes: ['image/*'],
            onbeforeunload(file) {
            //超过大小后进行提示
                if (file.maxFileSize > 10 * 1024 * 1024) {
                    $(".cover_inpput_label").text("文件大小超过限制，单个图片大小最多为1M").css("color", "red")
                    return false;
                }
            }, onSuccess(file, res) {
                // JS 语法
                console.log(`${file.name} 上传成功`, res)
            },
            customInsert(res, insertFn) {
                console.log(res);
                insertFn("http://localhost:10101/" + res.data.url);
            },
            // 单个文件上传失败
            onFailed(file, res) {           // JS 语法
                console.log(`${file.name} 上传失败`, res)
            },
            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {               // JS 语法
                console.log(`${file.name} 上传出错`, err, res)
            },
        }

    },
    onChange(editor) {
        console.log(editor.getHtml())
        content = editor.getHtml();
    }
}

// 先创建 editor
const editor = E.createEditor({
    selector: '#editor-text-area',
    content: [],
    // html: '',
    config: editorConfig
})

// 创建 toolbar
const toolbar = E.createToolbar({
    editor,
    selector: '#editor-toolbar',
    config: {
        excludeKeys: 'fullScreen',
    }
})

// 点击空白处 focus 编辑器
document.getElementById('editor-text-area').addEventListener('click', e => {
    if (e.target.id === 'editor-text-area') {
        editor.blur()
        editor.focus(true) // focus 到末尾
    }
})


//这是图片上传的一个直接现实，先转未base64的格式进行现实，然后再进行上传，其实可以直接上传，通过后端进行回传显示，但这里我未使用后端回传的方式，上面的富文本编辑器中使用的是上传再回传的形式
// 监听文件选择事件  
document.getElementById('show').onclick = function () {
    document.getElementById('fileInput').click();  // 触发文件选择器  
};

// 监听文件选择器的change事件  
document.getElementById('fileInput').onchange = function () {
    var file = this.files[0];  // 获取选择的文件  
    if (file) {
        var reader = new FileReader();  // 创建一个FileReader对象  
        reader.onload = function (e) {
            // 当文件读取完成后，将结果显示在img上  
            document.getElementById('show').src = e.target.result;
        };
        reader.readAsDataURL(file);  // 读取文件内容，并转换为DataURL格式  
    }
};