wangEditor富文本编辑器【超简单教程】

92 阅读 0 评论 61 点赞

我是靠谱客的博主现代小笼包，最近开发中收集的这篇文章主要介绍wangEditor富文本编辑器【超简单教程】，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、引入wangEditor.min.js

<script src="./jquery-2.1.4.min.js"></script>
<script src="./wangEditor.min.js"></script>

2、初始化wangEditor

<div class="min800 inline-block" style="width:800px;" id="editor"></div>
<script>
     var E = window.wangEditor;
     var editor = new E('#editor');
     editor.create();
</script>

简单配置富文本的dome源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-2.1.4.min.js"></script>
    <script src="./wangEditor.min.js"></script>
</head>

<body>
    <!-- 富文本编辑器 -->
    <div class="min800 inline-block" style="width:800px;" id="editor"></div>
    <script>
        var E = window.wangEditor;
        var editor = new E('#editor');

        editor.customConfig.showLinkImg = false; //隐藏‘网络图片’的按钮 
        editor.customConfig.uploadImgServer = '/upload/image.do' // 上传图片到服务器
        editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
        editor.customConfig.uploadImgMaxLength = 5; // 限制一次最多上传 5 张图片
        editor.customConfig.uploadFileName = 'file';
        editor.customConfig.uploadImgTimeout = 30000; // 将 timeout 时间改为 3s
        editor.customConfig.menus = [
            'bold',
            'italic',
            'underline',
            'strikeThrough',
            'link', // 插入链接
            'list', // 列表
            'quote', // 引用
            'image', // 插入图片
            'undo', // 撤销
            'redo' // 重复
        ]

        editor.customConfig.onchange = function(html) {
            // html 即变化之后的内容
            //因为用editor.txt.text()来校验字数，输入一个空格的话会被识别为5个字符，所以用$('div[contenteditable]').eq(0).text()字符来判断
            $('.attip').eq(0).find('font').text($.trim($('div[contenteditable]').eq(0).text()).length);
            //$.trim()
            //editor.txt.text()
        }
        editor.customConfig.uploadImgHooks = {
            before: function(xhr, editor, files) {
                //校验图片不能超过9张 
                var _imgs = $('#richtext img');
                if (_imgs.length >= 9) { //
                    alert("校验图片不能超过9张 ")
                }
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            fail: function(xhr, editor, result, insertImg) {
                var insertImg1 = function(e) {
                    var t = this;
                    if (e) {
                        this.editor.cmd.do("insertHTML", '<img src="' + e + '" />'); //这里如果加上限制图片的宽度的样式的话，请求会报错。 
                    } else {
                        return insertImg(e);
                    }
                }
                insertImg1(result)
                    // 图片上传并返回结果，但图片插入错误时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function(xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            customInsert: function(insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                var url = result.url;
                //function(e){var t=this;if(e){this.editor.cmd.do("insertHTML",'<img src="'+e+'" style="max-width:100%;"/>');var n=document.createElement("img");n.onload=function(){n=null},n.onerror=function(){n=null,t._alert("插入图片错误",'wangEditor: 插入图片出错，图片链接是 "'+e+'"，下载该链接失败')},n.onabort=function(){n=null},n.src=e}}
                //上面函数是原生的insertImg函数 
                var insertImg1 = function(e) {
                    var t = this;
                    if (e) {
                        this.editor.cmd.do("insertHTML", '<img src="' + e + '" />'); //这里如果加上限制图片的宽度的样式的话，请求会报错。 
                    } else {
                        return insertImg(e);
                    }
                }
                insertImg1(url);
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }
        editor.customConfig.customAlert = function(info) {
            // info 是需要提示的内容
            cog(info)
        }
        window.onload = function() {
            editor.create();
        };
    </script>
</body>

</html>