后台发布文章新增预览功能。
时间：2025-06-30 访问量：0
在之前的文章中，我们有讲过，如何使用扩展字段来此入HTML代码并添加预览功能。
文章链接可查看：https://zuoan.com.cn/News3/3487.html
然后我们今天突然想给发布文章的详情也增加这样一个功能。
开始干活，第一步，由于我们使用的是layui的拟态窗口，所以我们先强制一下大小，这个宽度一般以前端详情页的宽度为准。方便后期生成的预览和前端宽度差不多大。
<style>
.layui-layer-page{
max-width: 960px
}
</style>第二步：在后台的content.html中，我们找到新发布文章的内容详情位置：如下代码，
{if([$field_editor])}
<div class="layui-form-item">
<label class="layui-form-label">内容详情</label>
{fun=editor_toolbar('editor', '内容详情')}
<div class="layui-input-block hide">
<script id="editor" name="content" type="text/html" style="width:100%"></script>
</div>
</div>
{/if}然后我们在中间添加如下的代码,，即可判断语句结束前插入代码。
由于使用了 {fun=editor_toolbar('editor', '内容详情')}，说明用的是 UEditor 编辑器，编辑器的内容不是通过 .val() 获取的，而是通过 UEditor 提供的 JS API 获取的。
<a class="layui-btn layui-btn-normal" id="previewBtn" style="margin-top:10px; margin-left: 130px;">预览HTML</a>
<script>
$(document).ready(function () {
$("#previewBtn").click(function () {
// 1. 获取编辑器内容
var htmlContent = UE.getEditor('editor').getContent();
// 2. 构造 iframe 容器
var previewHtml = `
<iframe id="previewFrame" style="width:100%;height:100%;border:none; max-width:960px;"></iframe>
`;
// 3. 打开 Layui 弹窗
layer.open({
type: 1,
title: 'HTML预览',
area: ['90%', '90%'],
content: previewHtml,
success: function(layero, index) {
var iframe = document.getElementById('previewFrame');
var doc = iframe.contentDocument || iframe.contentWindow.document;
// 4. 构造完整 HTML（引入前端 CSS，目的是让他的显示和前端显示的效果相似，如果不引入前端CSS也是可以的，只是显示出来并不是前端的效果。依旧可以预览的。）
var fullHtml = `
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/template/peoplesj/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="/template/peoplesj/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/template/peoplesj/css/aoyun.css?v=345345" >
<link rel="stylesheet" href="/template/peoplesj/swiper-4.3.5/css/swiper.min.css">
<link rel="stylesheet" href="/template/peoplesj/css/animate.css">
<link rel="stylesheet" href="/template/peoplesj/css/style.css?v=345345" >
<link rel="stylesheet" href="/template/peoplesj/css/media.css?v=345345" >
<style>body { padding: 20px; }</style>
</head>
<body>
${htmlContent}
</body>
</html>
`;
// 5. 写入内容到 iframe
doc.open();
doc.write(fullHtml);
doc.close();
}
});
});
});
</script>第三步：我们需要在修改文章内容的时候，也加入这段代码。
找到修改代码的位置：
{if([$field_editor])}
<div class="layui-form-item">
<label class="layui-form-label">内容详情</label>
{fun=editor_toolbar('editor', '内容详情')}
<div class="layui-input-block hide" >
<script id="editor" name="content" type="text/html" style="width:100%">{fun=decode_string([$content->content])}</script>
</div>
</div>
{/if}在判断语句结束前加入：
<a class="layui-btn layui-btn-normal" id="previewBtn" style="margin-top:10px; margin-left: 130px;">预览HTML</a>
<script>
$(document).ready(function () {
$("#previewBtn").click(function () {
var htmlContent = UE.getEditor('editor').getContent(); // 获取内容
// 构造带有 CSS 的预览 HTML
var previewHtml = `
<iframe id="previewFrame" style="width:100%;height:100%;border:none;"></iframe>
`;
// 打开弹层（弹层里加 iframe 容器）
layer.open({
type: 1,
title: 'HTML预览',
area: ['90%', '90%'],
content: previewHtml,
success: function(layero, index) {
// 获取 iframe 的 document
var iframe = document.getElementById('previewFrame');
var doc = iframe.contentDocument || iframe.contentWindow.document;
// 构造完整 HTML（引入 CSS）
var fullHtml = `
<html>
<head>
<link rel="stylesheet" href="/template/peoplesj/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="/template/peoplesj/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/template/peoplesj/css/aoyun.css?v=345345" >
<link rel="stylesheet" href="/template/peoplesj/swiper-4.3.5/css/swiper.min.css">
<link rel="stylesheet" href="/template/peoplesj/css/animate.css">
<link rel="stylesheet" href="/template/peoplesj/css/style.css?v=345345" >
<link rel="stylesheet" href="/template/peoplesj/css/media.css?v=345345" >
<style>
body { padding: 20px; }
</style>
</head>
<body>
${htmlContent}
</body>
</html>
`;
// 写入 iframe
doc.open();
doc.write(fullHtml);
doc.close();
}
});
});
});
</script>然后代码工程就结束了。
我们来看一下效果。前提是发布文章的时候，不是复制别的地方的文章带有CSS，才会显示前端的CSS效果，如果本身复制进来的文章又自带了CSS，一般就是看哪一个样式的优先级别更高了。
缺点就是目前要引入前端CSS的时候，我是把路径写死了。匆忙间没有去考虑如何在后台端动态引入前端CSS，比如说在后台自定义字段中加一个字段，然后来调用他。
