wangEditor富文本的使用
程序员文章站
2022-05-29 19:34:55
...
小编今天不算太忙，这样的日子真的太难得了，小编决定看看富文本是怎么做的，于是在百度上搜索了一下，对比了几个富文本框后，小编还是选择了wangEditor富文本，为什么选择这个富文本呢，简单地说就是因为这个富文本框编写起来十分方便，官方文档也十分清晰，当然这些是我仅代表小编的感受：），现在来一睹小编的小demo吧！
如下图，即可改变字体颜色，文本的样式，还可以上传图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>富文本框</title>
<script src='js/wangEditor-3.1.1/release/wangEditor.js'></script>
<style>
.toolbar {
border: 1px solid #ccc;
width:1024px;
}
.text {
border: 1px solid #ccc;
height: 400px;
width:1024px;
}
</style>
</head>
<body>
<div id="div1" class="toolbar">
</div>
<div style="padding: 5px 0; color: #ccc">中间隔离带</div>
<div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
<p>请输入内容</p>
</div>
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="js/wangEditor-3.1.1/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1', '#div2')
// 或者 var editor = new E( document.getElementById('editor') )
// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
//editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
// 隐藏“网络图片”tab
editor.customConfig.showLinkImg = false
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
alert(editor.txt.html())
}, false)
document.getElementById('btn2').addEventListener('click', function () {
// 读取 text
alert(editor.txt.text())
}, false)
</script>
</body>
</html>
点击获取html按钮后弹出了输入内容，一般而言当做这个的时候，都会将获取到的html内容存到后台然后传到数据库进行保存，这样当再次加载时，在html页面上就能够显示原来输入的样式了
备注：wangEditor使用手册网址：https://www.kancloud.cn/wangfupeng/wangeditor3/332599