pb后臺(tái)如何導(dǎo)入HTML文章
項(xiàng)目需求：
客戶要求后臺(tái)能導(dǎo)入HTML代碼。這個(gè)代碼是他用AI生成的新聞詳情，自帶了各種樣式。
形如：
<style>
.container-body{}
.box{}
</style>
<div class="container-body">
<div class="box"></div>
<div class="box"></div>
</div>使用過程：
在后臺(tái)的編輯器中，切換成HTML再導(dǎo)入HTML代碼，前端雖然能顯示，但是所有的DIV被過濾掉，CSS也被過濾掉。
所以直接在后臺(tái)編輯器中添加的方式，只能PASS掉。
然后我們想到使用擴(kuò)展字段的多行字段。
后臺(tái)添加擴(kuò)展字段：ext_html
然后添加文章， 將HTML代碼復(fù)制進(jìn)去。之后發(fā)現(xiàn)內(nèi)容被截取，很明顯是字段字?jǐn)?shù)和和類型被限制了。
打開數(shù)據(jù)庫查看，發(fā)現(xiàn)字段是varchar，字?jǐn)?shù)限制了100，所以修改調(diào)整為：mediumetext,長(zhǎng)度改為空，即不限制。
然后再在后臺(tái)重新添加提交。
這次數(shù)據(jù)正常保存起來了。但是前端顯示又出問題了，總是在很多地方添加換行符號(hào)：
<br/>
所以我們打開：ContentController.php
找到如下代碼 ，將里面的換行符號(hào)去掉就可以了。：
case 2: // 多行文本處理 $field_data = str_replace(["\\r\\n", "\\n"], "<br>", $field_data); // 多行文本時(shí)替換回車 部分情況回車識(shí)別為\\n @LiuXiaoBai break;
這次再打開前端測(cè)試，一切正常.
但是如果要修改里面的某個(gè)文字的時(shí)候，在textare中，以上的內(nèi)容因?yàn)檫^濾掉了所有的換行，導(dǎo)致所有的代碼就像是被壓縮了一下。所以我們?yōu)榱俗屗@示出換行并且不影響提交數(shù)據(jù)。
我們?cè)诤笈_(tái)的模板文件中，將數(shù)據(jù)顯示處修改為：
{if($value->type==2)}
<div class="layui-input-block" id="myhtml">
<textarea name="[value->name]" class="layui-textarea" placeholder="請(qǐng)輸入[value->description]">
{php}$name=$value->name;echo str_replace('<br>', "\\r\\n",$this->vars['content']->$name);{/php}
</textarea>
</div>
<!-- 讓 HTML 標(biāo)簽換行顯示（但不影響原始數(shù)據(jù)） -->
<script>
$(document).ready(function() {
var textarea = $("#myhtml textarea");
var content = textarea.val();
// 在特定 HTML 標(biāo)簽前/后插入換行符（僅視覺上換行）
content = content
.replace(/<(\\/?(div|p|h[1-6]|ul|ol|li|br)[^>]*)>/gi, '\\n$&\\n')
.replace(/\\n\\n/g, '\\n'); // 避免重復(fù)換行
// 更新 textarea（不影響真正的值，僅優(yōu)化顯示）
textarea.val(content.trim());
});
</script>
{/if}以上已經(jīng)非常完美了。但是我們看到WP的后臺(tái)有一個(gè)預(yù)覽功能，于是我也在想，添加 一個(gè)預(yù)覽功能，其實(shí)邏輯非常簡(jiǎn)單。
我只需要打開一個(gè)擬態(tài)窗口，然后里面讀取并顯示這一段數(shù)據(jù)就可以了。
然后第一步：給textare加一個(gè)ID，方便獲取他的數(shù)據(jù)。
<textarea name="[value->name]" class="layui-textarea" placeholder="請(qǐng)輸入[value->description]" id="htmlEditor">
添加以下代碼進(jìn)去。意思是添加了一個(gè)按鈕，用來點(diǎn)擊打開擬態(tài)窗口，css是我想讓他最大寬度為890px,因?yàn)槲仪岸孙@示的最大也就這么大，最后使用的是layui后臺(tái)自帶的擬態(tài)窗口
<a class="layui-btn layui-btn-normal" id="previewBtn" style="margin-top:10px; margin-left: 130px;">預(yù)覽HTML</a>
<style>
.layui-layer-page{
max-width: 890px
}
</style>
<script>
// 使用Layui彈層
$("#previewBtn").click(function() {
layer.open({
type: 1,
title: 'HTML預(yù)覽',
area: ['90%', '90%'],
content: '<div style="padding:20px;">' + $("#htmlEditor").val() + '</div>'
});
});
</script>再測(cè)試一下，非常完美。
