项目需求：

客户要求后台能导入HTML代码。这个代码是他用AI生成的新闻详情，自带了各种样式。

形如：

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

使用过程：

在后台的编辑器中，切换成HTML再导入HTML代码，前端虽然能显示，但是所有的DIV被过滤掉，CSS也被过滤掉。

所以直接在后台编辑器中添加的方式，只能PASS掉。

然后我们想到使用扩展字段的多行字段。

后台添加扩展字段：ext_html

然后添加文章， 将HTML代码复制进去。之后发现内容被截取，很明显是字段字数和和类型被限制了。

打开数据库查看，发现字段是varchar，字数限制了100，所以修改调整为：mediumetext,长度改为空，即不限制。

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

这次数据正常保存起来了。但是前端显示又出问题了，总是在很多地方添加换行符号：

<br/>

所以我们打开：ContentController.php

找到如下代码 ，将里面的换行符号去掉就可以了。：

 case 2: // 多行文本处理
                                $field_data = str_replace(["\r\n", "\n"], "<br>", $field_data); // 多行文本时替换回车 部分情况回车识别为\n @LiuXiaoBai
                                break;

这次再打开前端测试，一切正常.

但是如果要修改里面的某个文字的时候，在textare中，以上的内容因为过滤掉了所有的换行，导致所有的代码就像是被压缩了一下。所以我们为了让他显示出换行并且不影响提交数据。

我们在后台的模板文件中，将数据显示处修改为：

{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 标签换行显示（但不影响原始数据） -->
                                    <script>
                                        $(document).ready(function() {
                                            var textarea = $("#myhtml textarea");
                                            var content = textarea.val();
                                            
                                            // 在特定 HTML 标签前/后插入换行符（仅视觉上换行）
                                            content = content
                                                .replace(/<(\/?(div|p|h[1-6]|ul|ol|li|br)[^>]*)>/gi, '\n$&\n')
                                                .replace(/\n\n/g, '\n'); // 避免重复换行
                                            
                                            // 更新 textarea（不影响真正的值，仅优化显示）
                                            textarea.val(content.trim());
                                        });
                                    </script>
                                {/if}

以上已经非常完美了。但是我们看到WP的后台有一个预览功能，于是我也在想，添加 一个预览功能，其实逻辑非常简单。

我只需要打开一个拟态窗口，然后里面读取并显示这一段数据就可以了。

然后第一步：给textare加一个ID，方便获取他的数据。

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

添加以下代码进去。意思是添加了一个按钮，用来点击打开拟态窗口，css是我想让他最大宽度为890px,因为我前端显示的最大也就这么大，最后使用的是layui后台自带的拟态窗口

 <a class="layui-btn layui-btn-normal" id="previewBtn" style="margin-top:10px; margin-left: 130px;">预览HTML</a>

                                    <style>
                                        .layui-layer-page{
                                            max-width: 890px
                                            }
                                    </style>
                                    <script>
                                        // 使用Layui弹层
                                            $("#previewBtn").click(function() {
                                                layer.open({
                                                    type: 1,
                                                    title: 'HTML预览',
                                                    area: ['90%', '90%'],
                                                    content: '<div style="padding:20px;">' + $("#htmlEditor").val() + '</div>'
                                                });
                                            });
                                    </script>

再测试一下，非常完美。

然后我们需要在另一台，刚才如果修改的是发布文章时的位置，那就需要在修改文章的位置再加一次。

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