layui 打开新页面,并传入参数

最新推荐文章于 2025-06-14 10:00:00 发布

xianhenyuan

最新推荐文章于 2025-06-14 10:00:00 发布

阅读量4w

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： wangEditor预览功能 wangEditor预览效果 layui 打开新页面并传入参数

本文链接：https://blog.youkuaiyun.com/xianhenyuan/article/details/95199044

本文介绍了如何在layui中利用wangEditor富文本编辑器实现预览功能，当点击预览时，通过layui打开新页面并传递参数。详细步骤包括在点击事件中触发新页面加载，并将编辑器内容传递到iframe中，以显示预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui 打开新页面,并传入参数

使用的 wangEditor 富文本编辑器不带预览的功能，
所以自己实现了下功能；
思路是：
点击打开一个弹窗 or 新页面，
然后页面展示提交后前端页面看到的大概的样子。
涉及到需要把内容传递到打开的 iframe 页面内，
刚好可以利用 layui 携带传参的一个特点。

效果预览：

layui 打开新页面,并传入参数

具体代码实现为：

创建一个 preview.html 预览页面，css 样式来自 wangEditor 官方文档给出的

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预览内容</title>
    <style>
        /* table 样式 */
        table {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }
        table td,
        table th {
            border-bottom: 1px solid #ccc;
            border-right: