我要投稿

html编辑器设置-wangEditor富文本编辑器调用开发记录(v5版本、获取HTML内容、上传

bendan520 html

2024-05-03 0 3,837 百度已收录

进不了网站？换个网络试试！

wangEditor是一款基于原生JavaScript 封装的开源免费富文本编辑器。支持常规的文本排版操作、插入图片、插入视频、插入代码等功能。还提供多样化的扩展功能（如字体、颜色、表情、Code、地图等插件），支持插件开发和自定义配置。该编辑器简单、易用、功能齐全html编辑器设置，可广泛应用于各种Web项目。

以下实战记录基于wangEditor V5版本，文档：传送门

1.编辑器基本配置

从wangEditor V5版本开始，工具栏配置和菜单配置（如配置颜色、字体、链接校准、上传图片等）分离。

1.编辑器自适应CSS

        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }
        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }
        #editor-container {
            height: 500px;
        }

2.构建编辑器容器

<div id="editor—wrapper">
    <div id="toolbar-container"></div>
    <div id="editor-container"></div>
</div>

3.配置项设置

    //配置项
    const {createEditor, createToolbar} = window.wangEditor
    const editorConfig = {
        MENU_CONF: {},
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            //console.log(html)
        }
    }
    
 const editor = createEditor({
        selector: '#editor-container',
        html: '',//预置内容
        config: editorConfig,
        mode: 'default', // or 'simple'
    })
    const toolbarConfig = {}
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        uploadVideoShow: false,
        mode: 'default', // or 'simple'
    })

4. 获取内容

   $("#btn").click(function () {
        const html1 = editor.getHtml()
        console.log(html1);
    });

【注意】HTML内容必须是wangEditor生成的HTML格式（即editor.getHtml()返回的），不能自己随便写。 HTML格式非常灵活，wangEditor并不兼容所有HTML格式。例如，wangEditor可以将hello识别为粗体，但很难识别hello和其他粗体形式。

2.上传图片配置 1.前端配置

    //上传图片
    editorConfig.MENU_CONF['uploadImage'] = {
        server: 'up.php',
        maxFileSize: 1 * 1024 * 1024, // 1M
        allowedFileTypes: ['image/*'],
        // 单个文件上传失败
        onFailed(file, res) {
            console.log('上传失败', res)
        },
    }

2.后端API套接字配置

up.php 文件（无上传逻辑显示）

$res = ["errno" => 0,
    "data" => [
        "url" => "20230613110558393.jpg"
    ]
];
die(json_encode($res));

$res = [
    "errno" => 1,
    "message" => "失败信息"
];
die(json_encode($res));

3.隐藏上传的视频

1.获取工具栏按钮

    console.log(toolbar.getConfig().toolbarKeys);

2. 排除菜单

    //工具栏配置项
    const toolbarConfig = {}
    //排除菜单
    toolbarConfig.excludeKeys = [
        'uploadVideo' // 排除菜单组，写菜单组 key 的值即可
    ]
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        uploadVideoShow: false,
        mode: 'default', // or 'simple'
    })

总结

Layui一直被用作后端匹配组件，但随着功能需求不断降低。 laidedit富文本编辑器在2.8版本中被彻底放弃，所以我们不得不寻找其他富文本编辑器。

从V5版本开始html编辑器设置，wangEditor进行了重大技术更新； wangEditor有详细的英文文档和英文交流环境； wangEditor内置了所有常见的富文本操作功能，可以满足大多数使用需求。只需配置即可直接使用，无需二次开发； wangEditor拥有丰富的API和足够的扩展性，允许您定制开发菜单、模块、插件等； wangEditor开源多年，有大量用户使用和反馈，解决了很多问题；