js自动回复富文本_layui弹出层里使用TinyMCE富文本编辑器，并且回显数据案例
先看下我要实现的功能
点击添加，弹出一个富文本编辑器，这个弹框有layer和TinyMCE组成
更新：回显内容
弹出层的页面的单独来一个，因为用的是iFrame
编辑页面，addOrUpdate.html，js代码
tinymce.init({
selector: '#addOrUpdateText',
language: "zh_CN"
});
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURI(r[2]);
}
return null;
}
layui.use(['jquery', 'form'], function () {
var form = layui.form;
var $ = layui.jquery;
tinyId = 'addOrUpdateText';
//通过url参数赋值给表单
$('[name="id"]').val(getQueryString("id"));
$('[name="title"]').val(getQueryString("title"));
$('[name="content"]').val(getQueryString("content"));
tinyMCE.editors[tinyId].setContent(getQueryString('content'));
form.on('submit(doSubmit)', function (data) {
//在提交数据前，同步内容到textarea，这样下面才能拿得到数据
tinyMCE.editors[tinyId].save();
$.post('/notice/addNotice', $('#formData').serialize(), function (res) {
if (res.code == 200) {
//在父窗口里得到当前iframe层的索引
var index = parent.layer.getFrameIndex(window.name);
//再执行关闭
parent.layer.close(index);
//重载父级页面的表格
parent.layui.table.reload('noticeTable');
}
layer.msg(res.msg);
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
父页面调用弹框的页面，摘取部分主要代码
function add() {
layer.open({
title: "添加公告",
type: 2,
maxmin: true,
area: ['800px', '400px'],
content: '/sys/toAddOrUpdate',
btnAlign: 'c'
});
}
function update(data) {
layer.open({
type: 2,
maxmin: true,
area: ['800px', '400px'],
//打开的页面，通过url参数方式，把需要回显的数据带过去，记得编码，不然乱码
content: '/sys/toAddOrUpdate?'+parseParams(data),
//这个方法当你在层创建完毕时即执行一些语句
// success: function (layero, index) {
// var body = layer.getChildFrame('body', index);
//本来这样赋值可以让弹出层的表单成功赋值，就是回显，
//但是我在弹出层页面取不到赋的值，所以就暂时不用，群友可以用，有空再试一试，
// body.find('[name="id"]').val(data.id);
// body.find('[name="title"]').val(data.title);
// body.find('[name="content"]').text(data.content);
// }
});
}
function parseParams(data) {
try {
var tempArr = [];
for (var i in data) {
var key = encodeURI(i);
var value = encodeURI(data[i]);
tempArr.push(key + '=' + value);
}
var urlParamsStr = tempArr.join('&');
return urlParamsStr;
} catch (err) {
return '';
}
}
});
Fire_Sky_Ho
发布了100 篇原创文章 · 获赞 39 · 访问量 7万+
私信
关注
标签：function,文本编辑,name,回显,层里,layer,content,var,data
来源： https://blog.csdn.net/Fire_Sky_Ho/article/details/104162362