elEditor

功能描述

富文本内容编辑器，用例见 elEditor.html

依赖的插件

./libs/jquery.min.js
./libs/Eleditor.min.js

快速使用

页面创建编辑器区域

<div id="contentEditor"></div>

调用编辑器插件

var contentEditor = new Eleditor({
        // 编辑区域dom对象
        el: '#contentEditor',
        // 图片上传自定义方法
        uploader: function(){
            return new Promise(function(_resolve, _reject){
                // 图片上传方法
                _resolve(url);  // 成功调用_resolve方法传入图片地址
                _reject(msg);   //失败调用_reject方法传入失败原因
            })
        },
        /*初始化完成钩子*/
        mounted: function(){

        },
        /*文档内容变化*/
        changer: function(){
            console.log('文档修改');
        },
        /*自定义按钮的例子*/
        toolbars: [
            'insertText',
            'editText',
            'insertImage',
            'insertLink',
            'insertHr',
            'delete',
            //自定义一个视频按钮
            {
                id: 'insertVideo',
                name: '插入视频',
                handle: function(select, controll){
                    // 调用视频上传方法
                    // 成功调用下面方法插入到编辑器
                    contentEditor.saveState();
                    contentEditor.getEditNode().after(`
                        <div class='Eleditor-video-area'>
                            <video src="${url}" autoplay="autoplay" controls="controls"></video>
                        </div>
                    `);
                    contentEditor.hideEditorControllerLayer();
                    return false;
                }
            },
            'undo',
            'cancel'
        ],
        placeHolder: 'placeHolder设置占位符'
    });

在Demo文件中演示了图片和视频的上传方法。详细文档参见 https://eleditor.fixel.cn/

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24