wangEditor 轻量级 web 富文本编辑器

不念不忘少年蓝@ 2022-03-24 15:24 545阅读 0赞

## 【介绍】 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70][]

**官网地址：**[http://www.wangeditor.com/][http_www.wangeditor.com]

## 【下载】 ##

*  点击 [https://github.com/wangfupeng1988/wangEditor/releases][https_github.com_wangfupeng1988_wangEditor_releases] 下载最新版。进入`release`文件夹下找到`wangEditor.js`或者`wangEditor.min.js引入`即可
 *  使用CDN：[//unpkg.com/wangeditor/release/wangEditor.min.js][unpkg.com_wangeditor_release_wangEditor.min.js]

## 【简单使用】 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>wangEditor demo</title>
    </head>
    <body>
        <div id="editor">
            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        </div>
    
        
        <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>

##  【复杂使用】 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>wangEditor demo</title>
        <style>
        	/* 富文本编辑器高度 */
            .w-e-text-container {
                height: 40rem !important;
            }
        </style>
    </head>
    <body>
        <div id="editor">
            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        </div>
    
        
        <script type="text/javascript" src="./js/wangEditor.min.js"></script>
        
        <script type="text/javascript" src="./js/filterword.js"></script>
    
        <script type="text/javascript">
            var E = window.wangEditor;
            var editor = new E('#editor');
           
            // 自定义菜单配置
            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.pasteFilterStyle = true;
    
            // 忽略粘贴内容中的图片
            editor.customConfig.pasteIgnoreImg = false;
    
            // 自定义处理粘贴的文本内容
            editor.customConfig.pasteTextHandle = function (content) {
                //用来过滤word粘贴过来的字符串
                return returnHtml(content);
            }
    
            // 将图片大小限制为 3M
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    
            // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
            // editor.customConfig.uploadImgServer = '/upload';  // 上传图片到服务器
            editor.customConfig.uploadImgShowBase64 = true;      // 使用 base64 保存图片
            
            //上传图片的错误提示
            editor.customConfig.customAlert = function (info) {
                alert(info);
            }
    
            //自定义上传图片事件 
            editor.customConfig.customUploadImg = function (files, insert) {
                var name = files[0].name; //文件对象
                var suffix = name.substr(name.indexOf(".")); //文件后缀名
                
            }
    
            editor.create();
            
            //设置内容 创建编辑器之后，使用editor.txt.html(...)设置编辑器内容
            //editor.txt.html('<p>用 JS 设置的内容</p>');
            
            //追加内容
            //editor.txt.append('<p>追加的内容</p>');
            
            //清空内容
            //editor.txt.clear();
            
            //读取内容
            //editor.txt.html(); //读取 html
            //editor.txt.text()  //读取 text
            
        </script>
    </body>
    </html>

用来过滤word粘贴过来的字符串的js文件地址：[https://github.com/hujinchen/filterword][https_github.com_hujinchen_filterword]

更多编辑器的配置，小伙伴们可以去看[官网][http_www.wangeditor.com]哦~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70]: /images/20220323/865818c2ca5a49da90a6934f1754baa2.png
[http_www.wangeditor.com]: http://www.wangeditor.com/
[https_github.com_wangfupeng1988_wangEditor_releases]: https://github.com/wangfupeng1988/wangEditor/releases
[unpkg.com_wangeditor_release_wangEditor.min.js]: https://unpkg.com/wangeditor/release/wangEditor.min.js
[https_github.com_hujinchen_filterword]: https://github.com/hujinchen/filterword