先看下我要实现的功能

点击添加，弹出一个富文本编辑器，这个弹框有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