js获取UEditor富文本编辑器的内容
在实现新闻管理时用到了百度的UEditor编辑器,之前也用过,阅读文档然后操作是没出现任何问题的(使用form表单提交)。现在是想用js获取UEditor内容然后用ajax实现异步提交,死活都get不到UEditor的内容。网上查找资料都说使用editor.getContent()方法获取文本内容。还是获取不到。弄了很久还是没有解决,问题放一边,第二天再看的时候突然就有思路了。
页面样式:
这是我本地html代码:
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">标题:</label>
<div class="layui-input-block">
<input type="text" name="title" placeholder="请输入新闻标题"
class="layui-input" value="" id="title">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">内容:</label>
<div class="layui-input-block">
<textarea name="content" id="content"
style="min-height: 200px; width: 668px;"></textarea>
</div>
</div>
</form>
这里是查看浏览器控制台的html代码:
这个时候就发现了,我们填写的内容都在iframe里面,是不能直接获取的。参照表单提交的方式,表单提交的时候是提交name="content"的值。所以这里我们直接获取name="content"文本的值就ok了。
function add() {
layer.open({
type : 2,
title : '新增页面',
skin : 'layui-layer-molv',
shadeClose : false,
shade : 0.8,
area : [ '800px', '550px' ],
id : (new Date()).valueOf(), // 设定一个id,防止重复弹出 时间戳
content : "news/forwardEditNews",// 跳转的页面
btn : [ '添加', '取消' ],
yes : function(index, layero) {
var body = layer.getChildFrame('body', index);
$.post("news/addNews", {
title : body.find('#title').val(),
//这里就是获取富文本的内容
content : body.find('textarea[name="content"]').val()
}, function(data) {
if (data.success) {
layer.msg(data.msg, {
offset : '100px',
icon : 1,
time : 1500
}, function() {
//刷新列表
$(".layui-laypage-btn").click();
});
} else {
layer.msg(data.msg, {
offset : '100px',
icon : 1
});
}
});
layer.close(index);
},
btn2 : function(index) {
layer.close(index);
}
});
}
我这里用的是layui前端框架 ,js获取:$('textarea[name="content"]').val();