WangEditor基本使用
效果图
1、使用到的API
创建一个编辑器 https://www.kancloud.cn/wangfupeng/wangeditor3/335769
获取内容 https://www.kancloud.cn/wangfupeng/wangeditor3/335775
使用textarea https://www.kancloud.cn/wangfupeng/wangeditor3/430149
上传图片到服务器 https://www.kancloud.cn/wangfupeng/wangeditor3/335782
2、步骤:
(1)、在富文本写内容,同步数据到textarea框,textarea框隐藏,后台获取textarea的数据
(2)、自定义图片上传路径,把返回的url渲染到富文本框,去除默认的alert()弹出框
3、代码
<html>
<head>
<title>WangEditor基本使用</title>
<style>
/*设置编辑框高度*/
.w-e-text-container{
height: 500px !important;
}
</style>
<!-- 引入jquery -->
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<!-- 引入wangEditor插件 -->
<script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
</head>
<body>
<form id="form" method="post">
<div id="contentDiv" style="width: 1000px;"></div>
<textarea name="content" id="content" style="display:none" ></textarea>
</form>
<button id="btn1">获取富文本text内容</button>
<button id="btn2">获取富文本html内容</button>
<button id="btn3">获取表单信息</button>
<button id="btn4">获取文本域内容</button>
</body>
<script>
var E = window.wangEditor;
var editor = new E('#contentDiv')
var $text1 = $('#content');
editor.customConfig.onchange = function (html) {
// 监控变化,同步更新富文本内容到 textarea
$text1.val(html);
}
editor.customConfig.uploadImgServer = '/index/public/upload?type=imgFile'; //自定义上传图片(改成自己写的图片上传方法的路径)
editor.customConfig.uploadFileName = 'imgFile'; //自定义文件名
/* 这样的话PHP后台这样获取文件信息
//将文件上传的信息取出赋给变量
$name = $_FILES['imgFile']['name'];
$tmp_name = $_FILES['imgFile']['tmp_name'];
$size = $_FILES['imgFile']['size'];
$error = $_FILES['imgFile']['error'];
*/
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url = result.url
insertImg(url)
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
editor.customConfig.customAlert = function (info) { //关闭默认提示信息
// info 是需要提示的内容
//alert('自定义提示:' + info)
}
// 或者 var editor = new E( document.getElementById('content') )
editor.create();
$text1.val(editor.txt.html());
//获取内容
$('#btn1').click(function(){
alert(editor.txt.text()); // 读取 text
});
$('#btn2').click(function(){
alert(editor.txt.html()); // 读取 html
});
$('#btn3').click(function(){
var formData = new FormData($( "#form" )[0]);
alert(formData);
});
$('#btn4').click(function(){
alert($('#content').val()); // 读取 html
});
</script>
</html>
注意:设置富文本高度
.w-e-text-container{
height: 500px !important;
}