單頁面可視化編輯使用

我們之前單頁面模塊要修改單頁面內容方式主要下面三種，最主要的是第一種，后兩種一般是開發人員才會操作。

一，通過編輯器增加修改要顯示的文本內容（主要是文本內容，當然通過HTML模式要添加進HTML代碼也可以，只是使用上還是比較麻煩，因為編輯器無法可視化顯示最終在前臺顯示的布局效果）。

二，當然如果要完全自定義某個單頁面也可以，就是通過純代碼模式，比如創建的單頁面別名是“about”，那根據我們之前的邏輯就是在模板目錄下復制一份“page.dwt”并命名為“about.dwt”，這樣就可以完全獨立地修改這個頁面了。

三，基于上一個方法，如果要實現頁面自定義又讓使用者可以編輯內容，也可以為需要編輯的內容定義“內容碎片”或者“內容盒子”，那樣也可以通過后臺編輯，但如果內容比較多，而且又都是純文本，操作起來還是不太方便。

當然如果確實是要實現最大的自由度，直接改模板文件是最方便的，但有的時候，我們要給客戶創建個性化的單頁面，但又只是簡單的讓客戶只可以簡單的修改所有文字，上面說的幾種方法就比較麻煩。

做一言歸正傳，開始介紹可視化編輯功能的使用。

一，創建單頁面，比如創建一個關于我們單頁面，別名為“about”，“編輯模式”選擇“可視化模式”（注意這個選項只能在添加時有，編輯時沒有這個選項），創建的時候我們可以直接在編輯器的HTML模式插入您預先設計好的HTML代碼，或者什么都不輸入，到時直接從模板文件中寫入，然后提交可視化編輯時也會把代碼寫入到數據庫中（跟編輯器插入一樣都是寫入到數據庫）。

二，在模板目錄中復制一份“page.dwt”命名為“about.dwt”，然后注意看一下里面的代碼（紅色框框住的部分），需要理解一下代碼的意思，后續修改代碼的時候會比較方便。

主要是在要頭部加入

<!-- {if $editor_mode} -->
<link href="css/jquery.notebook.min.css" rel="stylesheet" />
<!-- {/if} -->

尾部加入

<!-- {if $editor_mode} -->
{include file="inc/jquery_notebook.tpl"}
<!-- {/if} -->

然后正文部分需要注意一下下面這行代碼，主要是可視化模式的單頁面如果是通過后臺點擊可視化編輯，打開單頁面時，class為visualize-box的標簽包含的部分是最終可以可視化編輯的部分。

<div class="content{if $editor_mode} visualize-box{/if}"> {$page.content} </div>

這部分代碼我們可以改造一下，改成

<div class="content{if $editor_mode} visualize-box{/if}">
 <!-- {if $page.content} -->
 {$page.content}
 <!-- {else} -->
 您自己寫的HTML代碼
 <!-- {/if} -->
</div>

改成這樣，然后直接在模板文件里提交原始的HTML代碼是我們推薦的方式，因為如果是通過編輯器提交原始代碼，會造成代碼被編輯器格式化，雖然最終都可以正常顯示，但代碼會被編輯器格式化，不是原先100%的樣子。

三，前臺使用，使用方法是，進入單頁面編輯頁面，然后會看到編輯器消失了，只有一個按鈕。

點擊按鈕進入可視化編輯模式，內容區域變成像在編輯器里一樣，可以直接點擊輸入文字或者修改文字了，然后會發現頁面左下角多了一個“提交編輯”的按鈕。