国产一区AV直播|精品高清无码一区二区|欧美人人操人人看|人妻另类视频亚洲午夜福利院|天堂一区二区三区玖玖|亚洲青草视频超碰97在线观|午夜黄色免费电影|欧美精品另类在线一区|97色色网在线亚洲AV专区一|亚洲自拍偷拍欧美

項目需求：

客戶要求后臺能導(dǎo)入HTML代碼。這個代碼是他用AI生成的新聞詳情，自帶了各種樣式。

形如：

<style>
 .container-body{}
 .box{}
</style>
<div class="container-body">
   <div class="box"></div>
   <div class="box"></div>
</div>

使用過程：

在后臺的編輯器中，切換成HTML再導(dǎo)入HTML代碼，前端雖然能顯示，但是所有的DIV被過濾掉，CSS也被過濾掉。

所以直接在后臺編輯器中添加的方式，只能PASS掉。

然后我們想到使用擴展字段的多行字段。

后臺添加擴展字段：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,長度改為空，即不限制。

然后再在后臺重新添加提交。

這次數(shù)據(jù)正常保存起來了。但是前端顯示又出問題了，總是在很多地方添加換行符號：

<br/>

所以我們打開：ContentController.php

找到如下代碼 ，將里面的換行符號去掉就可以了。：

 case 2: // 多行文本處理
                                $field_data = str_replace(["\\r\\n", "\\n"], "<br>", $field_data); // 多行文本時替換回車 部分情況回車識別為\\n @LiuXiaoBai
                                break;

這次再打開前端測試，一切正常.

但是如果要修改里面的某個文字的時候，在textare中，以上的內(nèi)容因為過濾掉了所有的換行，導(dǎo)致所有的代碼就像是被壓縮了一下。所以我們?yōu)榱俗屗@示出換行并且不影響提交數(shù)據(jù)。

我們在后臺的模板文件中，將數(shù)據(jù)顯示處修改為：

{if($value->type==2)}                             
                                    <div class="layui-input-block" id="myhtml">
                                        <textarea name="[value->name]" class="layui-textarea" placeholder="請輸入[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的后臺有一個預(yù)覽功能，于是我也在想，添加 一個預(yù)覽功能，其實邏輯非常簡單。

我只需要打開一個擬態(tài)窗口，然后里面讀取并顯示這一段數(shù)據(jù)就可以了。

然后第一步：給textare加一個ID，方便獲取他的數(shù)據(jù)。

 <textarea name="[value->name]" class="layui-textarea" placeholder="請輸入[value->description]" id="htmlEditor">

添加以下代碼進(jìn)去。意思是添加了一個按鈕，用來點擊打開擬態(tài)窗口，css是我想讓他最大寬度為890px,因為我前端顯示的最大也就這么大，最后使用的是layui后臺自帶的擬態(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>

再測試一下，非常完美。