亚洲青青视频一区|8MAV在线观看|天天看AV天天看|中日成人手机在线|欧美激情五区六区|亚洲婷婷天堂级片|亚洲天堂网7777|欧美日韩其他另类|手机在线成人AV|成人性大片一区二区三区四区五区

284292114@qq.com 中國站
新聞中心 網(wǎng)絡(luò)推廣 網(wǎng)站建設(shè) 優(yōu)化推廣 首頁>新聞中心>網(wǎng)站建設(shè)

pbootcms添加自定義編輯器后實現(xiàn)TAB切換而非上下疊加

時間:2020-12-09   訪問量:0

歡迎隨便轉(zhuǎn)載,需要注明來源和出處,我們的目的是讓知識和內(nèi)容得到分享和傳播。


醉近開發(fā)一個網(wǎng)站的時候,發(fā)現(xiàn)任何一個CMS對于專題頁的制作都是非常麻煩的,特別是需要多編輯器的時候。

而我們用PBOOTCMS在自定義編輯器后的結(jié)果是什么呢?

編輯器從下上往下疊加,以至于整個頁面很長。有時候往下滑的時候卻總是滑不準位置。用戶體驗特別差。

而我對于網(wǎng)站制作中的用戶體驗是非常敏感的。這成我的心中的一個結(jié)。

今天實在看不過去了,決定修改一下方案。


未修改前的效果:有多少個字段,上下就疊加多個編輯器。


image.png


修改后的效果:


image.png



修改文件:\\apps\\admin\\view\\default\\content

下面的:content.html和:single.html



先修改:content.html

在新增里面搜索找到:

<label class="layui-form-label">內(nèi)容</label>

把這個DIV全刪除。修改成下面的代碼:


<div class="layui-form-item">
	 <label class="layui-form-label">內(nèi)容</label>
	 <div class="layui-input-block">

	<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">默認內(nèi)容</li>
    {foreach $extfield(key,value)}
   {if($value->type==8)}
    <li>[value->description]</li>
       {/if}                                
 {/foreach}
    
  </ul>
  <div class="layui-tab-content">  
    <div class="layui-tab-item layui-show"> 
      現(xiàn)在請更新:<span style="color:#009688">默認內(nèi)容</span>	 <br/><br/>
     <script type="text/plain" id="editor" name="content" style="width:100%;height:240px;"></script>
    </div>
    {foreach $extfield(key,value)}
   {if($value->type==8)}
    <div class="layui-tab-item">
    	現(xiàn)在請更新:<span style="color:#009688">[value->description]</span><br/><br/>
    	<script type="text/plain" id="editor_[value->name]" name="[value->name]" style="width:100%;height:240px;"></script>
                                        <script>
                                            //初始化編輯器
                                            $(document).ready(function (e) {
                                                var ue = UE.getEditor('editor_[value->name]', {
                                                    maximumWords: 10000
                                                });
                                            })
                                        </script>
    </div>
     {/if}                                
 {/foreach}

  </div>
</div>

  </div>
</div>



然后在下面的內(nèi)容修改里面找到

 <label class="layui-form-label">內(nèi)容</label>

也刪除它的DIV,然后修改成以下代碼:

                          

<div class="layui-form-item">
        <label class="layui-form-label">內(nèi)容</label>
         <div class="layui-input-block">
             
  <div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">默認內(nèi)容</li>
   {foreach $extfield(key,value)}
                                {if($value->type==8)}
    <li>[value->description]</li>
     {/if}
       {/foreach}    
    
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    	當前更新數(shù)據(jù):<span style="color:#009688">默認內(nèi)容<span><br/><br/>
         <script type="text/plain" id="editor" name="content" style="width:100%;height:240px;">{fun=decode_string([$content->content])}</script>
    </div>
    {foreach $extfield(key,value)}
               {if($value->type==8)}
    <div class="layui-tab-item">
         當前更新數(shù)據(jù):<span style="color:#009688">[value->description]</span><br/><br/>
                                        {php}
                                        $name=@$value->name;
                                        {/php}
                                        <script type="text/plain" id="editor_[value->name]" name="[value->name]" style="width:100%;height:240px;">{fun=decode_string([$content->$name])}</script>
                                        <script>
                                            //初始化編輯器
                                            $(document).ready(function (e) {
                                                var ue = UE.getEditor('editor_[value->name]', {
                                                    maximumWords: 10000
                                                });
                                            })
                                        </script>
                                 
    </div>
       {/if}

       {/foreach}     

  </div>
</div>



        </div>
</div>


服務(wù)咨詢
1對1咨詢,專業(yè)客服為您解疑答惑
聯(lián)系銷售
15899750475
在線咨詢
聯(lián)系在線客服,為您解答所有的疑問
ARE YOU INTERESTED IN ?
感興趣嗎?

有關(guān)我們服務(wù)的更多信息,請聯(lián)系項目經(jīng)理

15899750475 楊先生