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

最新推荐文章于 2024-08-04 02:47:25 发布

xianhenyuan

最新推荐文章于 2024-08-04 02:47:25 发布

阅读量4w

点赞数

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

本文链接：https://blog.csdn.net/xianhenyuan/article/details/95199044

版权

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

摘要由CSDN通过智能技术生成

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;
        }
        tab