輝縣市后臺發(fā)布文章新增預(yù)覽功能。
時(shí)間：2025-08-31 來源：輝縣市外貿(mào)網(wǎng)站建設(shè)
在之前的文章中，我們有講過，如何使用擴(kuò)展字段來此入HTML代碼并添加預(yù)覽功能。
文章鏈接可查看：http://m.zgcju.cn/News1/883.html
然后我們今天突然想給發(fā)布文章的詳情也增加這樣一個(gè)功能。
開始干活，第一步，由于我們使用的是layui的擬態(tài)窗口，所以我們先強(qiáng)制一下大小，這個(gè)寬度一般以前端詳情頁的寬度為準(zhǔn)。方便后期生成的預(yù)覽和前端寬度差不多大。
<style>
.layui-layer-page{
max-width: 960px
}
</style>第二步：在后臺的content.html中，我們找到新發(fā)布文章的內(nèi)容詳情位置：如下代碼，
{if([$field_editor])}
<div class="layui-form-item">
<label class="layui-form-label">內(nèi)容詳情</label>
{fun=editor_toolbar('editor', '內(nèi)容詳情')}
<div class="layui-input-block hide">
<script id="editor" name="content" type="text/html" style="width:100%"></script>
</div>
</div>
{/if}然后我們在中間添加如下的代碼,，即可判斷語句結(jié)束前插入代碼。
由于使用了 {fun=editor_toolbar('editor', '內(nèi)容詳情')}，說明用的是 UEditor 編輯器，編輯器的內(nèi)容不是通過 .val() 獲取的，而是通過 UEditor 提供的 JS API 獲取的。
<a class="layui-btn layui-btn-normal" id="previewBtn" style="margin-top:10px; margin-left: 130px;">預(yù)覽HTML</a>
<script>
$(document).ready(function () {
$("#previewBtn").click(function () {
// 1. 獲取編輯器內(nèi)容
var htmlContent = UE.getEditor('editor').getContent();
// 2. 構(gòu)造 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預(yù)覽',
area: ['90%', '90%'],
content: previewHtml,
success: function(layero, index) {
var iframe = document.getElementById('previewFrame');
var doc = iframe.contentDocument || iframe.contentWindow.document;
// 4. 構(gòu)造完整 HTML（引入前端 CSS，目的是讓他的顯示和前端顯示的效果相似，如果不引入前端CSS也是可以的，只是顯示出來并不是前端的效果。依舊可以預(yù)覽的。）
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. 寫入內(nèi)容到 iframe
doc.open();
doc.write(fullHtml);
doc.close();
}
});
});
});
</script>第三步：我們需要在修改文章內(nèi)容的時(shí)候，也加入這段代碼。
找到修改代碼的位置：
{if([$field_editor])}
<div class="layui-form-item">
<label class="layui-form-label">內(nèi)容詳情</label>
{fun=editor_toolbar('editor', '內(nèi)容詳情')}
<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}在判斷語句結(jié)束前加入：
<a class="layui-btn layui-btn-normal" id="previewBtn" style="margin-top:10px; margin-left: 130px;">預(yù)覽HTML</a>
<script>
$(document).ready(function () {
$("#previewBtn").click(function () {
var htmlContent = UE.getEditor('editor').getContent(); // 獲取內(nèi)容
// 構(gòu)造帶有 CSS 的預(yù)覽 HTML
var previewHtml = `
<iframe id="previewFrame" style="width:100%;height:100%;border:none;"></iframe>
`;
// 打開彈層（彈層里加 iframe 容器）
layer.open({
type: 1,
title: 'HTML預(yù)覽',
area: ['90%', '90%'],
content: previewHtml,
success: function(layero, index) {
// 獲取 iframe 的 document
var iframe = document.getElementById('previewFrame');
var doc = iframe.contentDocument || iframe.contentWindow.document;
// 構(gòu)造完整 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>然后代碼工程就結(jié)束了。
我們來看一下效果。前提是發(fā)布文章的時(shí)候，不是復(fù)制別的地方的文章帶有CSS，才會(huì)顯示前端的CSS效果，如果本身復(fù)制進(jìn)來的文章又自帶了CSS，一般就是看哪一個(gè)樣式的優(yōu)先級別更高了。
缺點(diǎn)就是目前要引入前端CSS的時(shí)候，我是把路徑寫死了。平時(shí)自己做一個(gè)網(wǎng)站兩個(gè)網(wǎng)站并無所謂，自己修改一下代碼即可，但是如果網(wǎng)站多，就要想想如何解決來得方便一些。
目前我們想到的一個(gè)方案就是在后臺添加一個(gè)字段用于填寫不同網(wǎng)站的前端CSS。例如：
我們給數(shù)據(jù)庫中的ay_config添加一個(gè)字段為：htmlcss, 由于默認(rèn)的字段值只有200的寬度，所以還需要修改其值的大小。
然后在后臺的stystem中的config.html中找一個(gè)自己想放的位置，添加一段代碼：
<div class="layui-form-item">
<label class="layui-form-label">前端CSS</label>
<div class="layui-input-inline" style="width: calc(100% - 400px)">
<textarea name="htmlcss" placeholder="請輸入前端CSS的路徑，方便后臺預(yù)覽文章時(shí)可讀取前端樣式" class="layui-textarea">{$configs.htmlcss.value}</textarea>
</div>
<span class="layui-icon layui-icon-about tips" data-content="請輸入前端CSS的路徑，方便后臺預(yù)覽文章時(shí)可讀取前端樣式"></span>
</div>這樣我們就可以通過后臺來修改前端的CSS了。不同的網(wǎng)站到時(shí)候就方便修改這個(gè)了。
然后在后臺的發(fā)布文章的預(yù)覽功能位置我們將上面預(yù)覽HTML的代碼部分中的引入CSS部分可以直接使用：
{$configs.htmlcss.value}但是如果直接調(diào)用的話，發(fā)現(xiàn)很多符號被轉(zhuǎn)義了，導(dǎo)致無法正常顯示。
所以我們需要修改代碼，改成如下的代碼，進(jìn)行重新解碼。
<script>
$(document).ready(function () {
$("#previewBtn").click(function () {
var htmlContent = UE.getEditor('editor').getContent(); // 獲取內(nèi)容
var encodedHtml = `{$configs.htmlcss.value}`;
// 解碼
var tempDiv = document.createElement("div");
tempDiv.innerHTML = encodedHtml;
var decodedHtml = tempDiv.innerText || tempDiv.textContent;
// 重新賦值為 HTML
tempDiv.innerHTML = decodedHtml;
decodedHtml = tempDiv.innerHTML;
var previewHtml = `
<iframe id="previewFrame" style="width:100%;height:100%;border:none;"></iframe>
`;
layer.open({
type: 1,
title: 'HTML預(yù)覽',
area: ['90%', '90%'],
content: previewHtml,
success: function (layero, index) {
var iframe = document.getElementById('previewFrame');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var fullHtml = `
<html>
<head>
${decodedHtml}
<style>
body { padding: 20px; }
</style>
</head>
<body>
${htmlContent}
</body>
</html>
`;
doc.open();
doc.write(fullHtml);
doc.close();
}
});
});
});
</script>這樣修改之后就可以正常使用了。
TAG:
