wangEditor的完整使用（二）_wangeditor预览功能-CSDN博客

本文链接：https://blog.csdn.net/qq_43694194/article/details/126507793

上一篇博客讲了wangEditor的使用，但是有一个问题就是在富文本编辑器里编辑时不能看到文章的预览效果。

下面我来讲解下如何实现在编辑时也可以看到预览效果。

设置一个按钮

<div class="layui-inline layui-show-xs-block">
        <button  type="button" class="layui-btn layui-btn-normal" id="preview">
            预览
        </button>
    </div>

写一个js

 //预览
        $('#preview').on('click',function () {
             var w = ($(window).width() * 0.8);
             var h = ($(window).height() - 20);

            layer.open({
                resize: true,
                title: '文章预览',
                shadeClose: true,
                area: [w + 'px', h + 'px'],
                type: 2,
                content: '${pageContext.request.contextPath}/gen/article/preview.do',
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    body.find('#content').append(editor.txt.html());
                }
            });
        });

content: '${pageContext.request.contextPath}/gen/article/preview.do'

这是一个url用来跳转到预览页面，页面代码如下：

<html>
<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: 1px solid #ccc;
            padding: 3px 5px;
        }
        table th {
            border-bottom: 2px solid #ccc;
            text-align: center;
        }

        /* blockquote 样式 */
        blockquote {
            display: block;
            border-left: 8px solid #d0e5f2;
            padding: 5px 10px;
            margin: 10px 0;
            line-height: 1.4;
            font-size: 100%;
            background-color: #f1f1f1;
        }

        /* code 样式 */
        code {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            background-color: #f1f1f1;
            border-radius: 3px;
            padding: 3px 5px;
            margin: 0 3px;
        }
        pre code {
            display: block;
        }

        /* ul ol 样式 */
        ul, ol {
            margin: 10px 0 10px 20px;
        }

    </style>
</head>
<body>

<div id="content"></div>

</body>
</html>