
歡迎隨便轉(zhuǎn)載,不需要注明來源和出處,我們的目的是讓知識和內(nèi)容得到分享和傳播。
醉近開發(fā)一個網(wǎng)站的時候,發(fā)現(xiàn)任何一個CMS對于專題頁的制作都是非常麻煩的,特別是需要多編輯器的時候。
而我們用PBOOTCMS在自定義編輯器后的結(jié)果是什么呢?
編輯器從下上往下疊加,以至于整個頁面很長。有時候往下滑的時候卻總是滑不準(zhǔn)位置。用戶體驗特別差。
而我對于網(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">默認(rèn)內(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">默認(rèn)內(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">默認(rèn)內(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">
當(dāng)前更新數(shù)據(jù):<span style="color:#009688">默認(rèn)內(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">
當(dāng)前更新數(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>