富文本编辑器（超简单的）

问题：一天，新进公司的前端同事（之前主微信小程序的）问我富文本编辑器有没有做过，妈耶，我这么新的萌新这么可能做出那种牛x的东西，实话实说后同事表示理解，不过好不容易有个妹子来找我帮忙这么能认怂，于是搜了下插件，找到一款非常不错的，托前辈大牛的福。

解决方法：

1.网址：引用网址：https://www.cnblogs.com/HansBug/p/6559289.html

富文本官网：http://www.wangeditor.com/

git：https://github.com/wangfupeng1988/wangEditor/

2.效果图：

这是一款轻量级的富文本编辑器，而且操作简单方便，只要你引入后，增加

var E = window.wangEditor
var editor = new E('#div1')
editor.create()

即可完成下面创建：

3.操作代码：（非常无耻的粘贴复制了大佬的，另外说句，大佬空间的背景很赞！(*^▽^*)）

<html>
    <head>
        <!--在这里字符集的设定很重要，如果设定不当将会出现乱码-->
        <meta charset="UTF-8">
        <title>wangEditor demo</title>
    </head>
    <body>
        <!--wangEditor是一款基于jquery框架开发的插件-->
        <script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/lib/jquery-2.2.1.js"></script>
    
        <!--编辑器位置-->
        <div style="max-width:700px;margin:50px">
            <div id="txtdiv" style="border:1px solid gray;min-height:240px">
            
            </div>
        </div>
        
        <!--效果展示框-->
        <div id="show_box" style="border: 1px solid gray;margin-left:50px"></div>
        
        <!--脚本控制-->
        <script>
            $(function(){
                //初始化编辑器
                editor = new wangEditor("txtdiv");
                editor.create();
                
                //内容修改事件，此处做的是实时展示实际效果
                editor.onchange = function(){
                    //获取editor的html值
                    var html = editor.$txt.html();
                    $("#show_box").html(html)
                }
            })
        </script>
    
        <!--按照官网上的说明，js和css的这两个引用应该放在body的末尾-->
        <script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/wangEditor.js"></script>
        <link href="http://cdn.bootcss.com/wangeditor/2.1.20/css/wangEditor.css" rel="stylesheet">
    </body>
</html>

富文本编辑器（超简单的）

猜你喜欢