前端添加富文本/Web 富文本编辑器wangeditor

最新推荐文章于 2024-10-26 11:59:09 发布

一只欢喜

最新推荐文章于 2024-10-26 11:59:09 发布

阅读量420

点赞数 10

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/qq_44866810/article/details/135968518

版权

本文介绍了如何在前端使用WangEditor创建一个带有文件上传功能的富文本编辑器，包括工具栏配置、事件处理和自定义上传处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网wangEditor

需要引入两个文件

<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

前端代码：

<div id="editor—wrapper">
    <div id="toolbar-container">
        <!-- 工具栏 -->
    </div>
    <div id="editor-container" style="height: 300px;">
        <!-- 编辑器 -->
    </div>
</div>

JQ代码

    // 富文本
    const {
        createEditor,
        createToolbar
    } = window.wangEditor

    const editorConfig = {
        MENU_CONF: {},
        placeholder: '请输入',
        onChange(editor) {
            // 富文本输入的内容
            const html = editor.getHtml();
            console.log(html, '内容');
        },
    }
    editorConfig.MENU_CONF['uploadImage'] = {
        server: 'http://xxxxxxx.cn/gzh/uploadFile',
        maxFileSize: 10 * 1024 * 1024, // 10M
        fieldName: 'img',
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['image/*'],
        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        meta: {
            image_class_id: '2',
            file_type: '1'
        },
        // 自定义增加 http  header
        // headers: {
        //     Accept: 'text/x-json',
        //     otherKey: 'xxx'
        // },
        // 上传进度的回调函数
        onProgress(progress) { // JS 语法
            // progress 是 0-100 的数字

            console.log('progress', progress)
        },

        // // 单个文件上传成功之后
        // onSuccess(file, res) { // JS 语法
        //     console.log(`${file.name} 上传成功`, res)
        // },

        // 单个文件上传失败
        onFailed(file, res) { // JS 语法
            console.log(`${file.name} 上传失败`, res)
        },

        // 上传错误，或者触发 timeout 超时
        onError(file, err, res) { // JS 语法
            console.log(`${file.name} 上传出错`, err, res)
        },
        // 自定义插入图片
        customInsert(res, insertFn) { // JS 语法
            // res 即服务端的返回结果
            let url = res.data.url
            let alt = res.data.name
            let href = res.data.url
            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(url, alt, href)
        },
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })
    const toolbarConfig = {}
    toolbarConfig.excludeKeys = [
        'codeBlock',
        'group-video' // 排除菜单组，写菜单组 key 的值即可
    ]
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })
    // 富文本 end

效果：