富文本编辑器(超简单的)

问题:一天,新进公司的前端同事(之前主微信小程序的)问我富文本编辑器有没有做过,妈耶,我这么新的萌新这么可能做出那种牛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>

阅读更多
个人分类: H5 插件
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭