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