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