歡迎隨便轉(zhuǎn)載,不需要注明來源和出處,我們的目的是讓知識和內(nèi)容得到分享和傳播。
醉近開發(fā)一個網(wǎng)站的時候,發(fā)現(xiàn)任何一個CMS對于專題頁的制作都是非常麻煩的,特別是需要多編輯器的時候。
而我們用PBOOTCMS在自定義編輯器后的結(jié)果是什么呢?
編輯器從下上往下疊加,以至于整個頁面很長。有時候往下滑的時候卻總是滑不準位置。用戶體驗特別差。
而我對于網(wǎng)站制作中的用戶體驗是非常敏感的。這成我的心中的一個結(jié)。
今天實在看不過去了,決定修改一下方案。
未修改前的效果:有多少個字段,上下就疊加多個編輯器。
修改后的效果:
修改文件:\\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>