小编今天不算太忙,这样的日子真的太难得了,小编决定看看富文本是怎么做的,于是在百度上搜索了一下,对比了几个富文本框后,小编还是选择了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