益吾库源码下载轻量级富文本编辑器wangEditor

轻量级富文本编辑器wangEditor

轻量级富文本编辑器wangEditor
2020年05月20日 06:01:25益点益滴源码下载324

资源介绍

基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。

wangEditor是用javascript编写的 轻量级web富文本编辑器 ,依赖于jQuery和fontAwesome字体库, 支持所有浏览器 。使用 wangEditor 可以轻松创建web富文本框,并可以自定义扩展菜单功能。wangEditor所有源码都已经在github上开源下载。

一个简单实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
    <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

自定义菜单配置项

// 自定义菜单配置editor.customConfig.menus = [    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    'backColor',  // 背景颜色
    'link',  // 插入链接
    'list',  // 列表
    'justify',  // 对齐方式
    'quote',  // 引用
    'emoticon',  // 表情
    'image',  // 插入图片
    'table',  // 表格
    'video',  // 插入视频
    'code',  // 插入代码
    'undo',  // 撤销
    'redo'  // 重复];

图片上传配置项

editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor';  // 上传图片到服务器// 3Meditor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;// 限制一次最多上传 5 张图片editor.customConfig.uploadImgMaxLength = 1;// 自定义文件名editor.customConfig.uploadFileName = 'editor_img';// 将 timeout 时间改为 3seditor.customConfig.uploadImgTimeout = 5000;
editor.customConfig.uploadImgHooks = {    before: function (xhr, editor, files) {        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件

        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
        // alert("前奏");
    },    success: function (xhr, editor, result) {        // 图片上传并返回结果,图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
        // var url = result.data.url;
        // alert(JSON.stringify(url));
        // editor.txt.append(url);
        // alert("成功");
    },    fail: function (xhr, editor, result) {        // 图片上传并返回结果,但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
        alert("失败");
    },    error: function (xhr, editor) {        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
        // alert("错误");
    },    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
    // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
    customInsert: function (insertImg, result, editor) {        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
        // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
        var url = result.data[0];
        insertImg(url);        // result 必须是一个 JSON 格式字符串!!!否则报错
    }
}


超赞,真给力!嗯,必须鼓励~

打赏 0

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]

深切哀悼

抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞!

×
M