wangEditor是基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。博主个人认为这款富文本编辑器很好用。简单、上手快、功能还可以。
一、wangEditor的下载
wangEditor官网:http://www.wangeditor/
官方在线开发文档:https://www.kancloud/wangfupeng/wangeditor3/332599
我们可以先到官网下载wangEditor
二、创建wangEditor编辑器
我们在官网下载wangEditor的压缩包之后,我们只需要把 release/目录下的wangEditor.js或者wangEditor.min.js这两个文件拿出来就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<!-- 下面的div就是wangEditor 编辑器的位置 -->
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
</body>
</html>
三、wangEditor3编辑器内容的提交
wangEditor3编辑器没有value属性值,无法直接提交表单,所以编辑器内容的提交需要和 input 输入框来结合使用。
我们在wangEditor编辑器的上面添加一个 input 输入框,并且将其type设置为“hidden”隐藏起来。这样做也是为了实际开发需要。
<input type="hidden" name="content" id="editor_txt">
下面是js代码,大致意思就是我们用wangEditor3提供方法的获取编辑器内容后,把值再赋给input,这样就可以正常提交表单了。
<script type="text/javascript" src="js/wangEditor.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
var editor_txt=editor.txt.html();
document.getElementById('editor_txt').value=editor_txt;
}, false)
</script>
最后附上一张wangEditor3编辑器的图,个人感觉还挺不错的。有兴趣的可以试试
更多推荐
wangEditor3富文本编辑器的简单使用
发布评论