yy日韩无码,富婆的诱惑,国产菊爆视频在线观看,国产精品无码AV高清波波AV,国产成人啪精品视频站午夜,已满十八岁免费观看电视剧十八岁,中文字幕av久久人妻蜜桃臀

項(xiàng)目需求：

客戶要求后臺能導(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掉。

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

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

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

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

<br/>

所以我們打開：ContentController.php

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

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

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

但是如果要修改里面的某個文字的時候，在textare中，以上的內(nèi)容因?yàn)檫^濾掉了所有的換行，導(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ù)覽功能，其實(shí)邏輯非常簡單。

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

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

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

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

再測試一下，非常完美。

然后我們需要在另一臺，剛才如果修改的是發(fā)布文章時的位置，那就需要在修改文章的位置再加一次。

需要注意的是ID號要修改一下，修改成唯一的。如果不修改，雖然也能用，但是會有小小的BUG.