不得不佩服，美觀小巧的網(wǎng)頁內(nèi)容編輯器——ContentTools
介紹
ContentTools是一個(gè)美觀小巧的網(wǎng)頁內(nèi)容工具（一個(gè)JS庫），具備所見即所得（WYSIWYG）的編輯器功能，只需幾個(gè)簡單的步驟，即可將ContentTools添加到任何HTML頁面。如下圖所示頁面通過實(shí)時(shí)ContentTool的彈出層實(shí)現(xiàn)實(shí)時(shí)編輯功能。用小而美來形容它最好不過了！
Github地址
https://github.com/GetmeUK
特性
ContentTools是用于HTML頁面的美觀小巧的內(nèi)容編輯器。它被設(shè)計(jì)為：
- 與框架無關(guān)的庫不使用任何JavaScript框架（沒有JQuery），但可以很好地使用它們。
- 靈活的ContentTools軟件包由5個(gè)庫組成，每個(gè)庫或可以獨(dú)立使用。
- 可擴(kuò)展的軟件包旨在易于擴(kuò)展。
- 小巧完整的編輯器（JS，css，圖像和圖標(biāo)字體）為241kb（壓縮后為49kb）。
功能簡介
ContentTools具有字體加粗、斜體、超鏈接、對齊、列表、表格、圖片、視頻、代碼、撤銷、重做、刪除等功能
1、加粗顯示
2、斜體顯示
3、超鏈接
4、H標(biāo)題
5、正文
6、有序和無序列表
7、插入表格
8、插入圖片
9、視頻
以上截圖中的功能還不完整，如果想體驗(yàn)以下完整的功能可以直接去DEMO頁面體驗(yàn)，如果需要在HTML級(jí)別上更改元素的內(nèi)容，那也是可以的。通過屬性對話框中的最后一個(gè)選項(xiàng)卡，可以查看所選元素的內(nèi)部HTML代碼并直接對其進(jìn)行更新。
使用
- 第一步是下載JS，CSS和其他關(guān)聯(lián)的項(xiàng)目文件：
下載倉庫并打開/ build文件夾，包括預(yù)構(gòu)建的源文件。將文件夾的內(nèi)容復(fù)制到項(xiàng)目的適當(dāng)位置（例如，content-tools.min.js> /www/scripts/content-tools.min.js）。但是，/ images文件夾和icons.woff字體需要復(fù)制到與content-tools.min.css相同的文件夾中，文件結(jié)構(gòu)應(yīng)類似于：
- HTML
<head> <title>My page</title> <link rel="stylesheet" type="text/css" href="assets/content-tools.min.css"> …</head><body> … <script src="assets/content-tools.min.js"></script> <script src="assets/editor.js"></script></body>
包括一個(gè)名為editor.js的附加JS文件。包含初始化我們的編輯器的代碼，繼續(xù)
<div data-editable data-name="main-content"> <blockquote> Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. </blockquote> <p>John F. Woods</p></div>
data-name屬性用于在保存時(shí)標(biāo)識(shí)區(qū)域（默認(rèn)情況下使用id屬性），標(biāo)記可編輯HTML時(shí)，常見的誤解是將單個(gè)元素標(biāo)記為可編輯，例如：
<h1 data-editable data-name="heading">Content</h1>
正確的使用方式如下，也就是說必須要在特定的容器元素內(nèi)
<div data-editable data-name=heading> <h1>Content</h1></div>
- 準(zhǔn)備CSS
ContentTools使用CSS類來對齊文本，圖像，視頻和iframe，需要在自己的CSS中為這些對齊類定義樣式，例如：
[data-editable] iframe,[data-editable] image,[data-editable] [data-ce-tag=img],[data-editable] img,[data-editable] video { clear: both; display: block; margin-left: auto; margin-right: auto; max-width: 100%;}/* 左對齊 */[data-editable] .align-left { clear: initial; float: left; margin-right: 0.5em;}/* 右對齊 */[data-editable].align-right { clear: initial; float: right; margin-left: 0.5em;}/* 可編輯區(qū)域中文本的對齊樣式 */[data-editable] .text-center { text-align: center;}[data-editable] .text-left { text-align: left;}[data-editable] .text-right { text-align: right;}
- 初始化編輯器
ContentTools提供了一個(gè)編輯器，但是在初始化它之前，我們需要配置一些東西，即：
- 我們希望用戶能夠?qū)SS樣式應(yīng)用于元素。
- 我們希望頁面的區(qū)域是可編輯的。
- 一種保存我們的內(nèi)容的機(jī)制。
- 我們可能還會(huì)配置圖像處理程序等等
將以下代碼添加到我們之前創(chuàng)建的editor.js文件中：
window.addEventListener('load', function() { var editor;});
- 配置樣式
就像文字處理程序一樣，可以為內(nèi)容配置一系列預(yù)定義樣式。當(dāng)用戶從視口底部的檢查器欄中選擇標(biāo)簽時(shí)，這些標(biāo)簽就會(huì)出現(xiàn)。盡管可以將樣式設(shè)置為適用于所有標(biāo)簽，但是僅顯示適用于標(biāo)簽類型的樣式。
我們將添加可應(yīng)用于段落<p>標(biāo)記的單一樣式.author。在var編輯器下方聲明添加：
ContentTools.StylePalette.add([ new ContentTools.Style('Author', 'author', ['p'])]);
StylePalette.add方法使我們可以向編輯器添加樣式列表。每種樣式均聲明為一個(gè)Style實(shí)例，該實(shí)例使用顯示名稱，CSS類和可以應(yīng)用該樣式的標(biāo)簽列表初始化。我們需要添加相關(guān)的CSS來支持這種樣式，因此在HTML的開頭添加：
<head> … <style> .author { font-style: italic; font-weight: bold; } </style></head>
- 選擇可編輯區(qū)域
接下來，我們需要初始化編輯器，并讓它知道頁面上的哪些元素是可編輯的。為此，將以下代碼添加到editor.js中：
editor = ContentTools.EditorApp.get();editor.init('*[data-editable]', 'data-name');
我們使用用于頁面可編輯區(qū)域的CSS選擇器和屬性名稱（“數(shù)據(jù)名稱”）來初始化編輯器，以告知編輯器元素的哪個(gè)屬性包含其區(qū)域名稱。區(qū)域名稱在同一頁面中必須唯一。
- 保存更改
最后，我們希望在用戶保存頁面時(shí)得到通知，以便我們可以將每個(gè)區(qū)域的更新內(nèi)容存儲(chǔ)在文件或數(shù)據(jù)庫中。為此，我們監(jiān)聽由編輯器觸發(fā)的保存事件。在editor.init語句之后，將以下代碼添加到editor.js中：
editor.addEventListener('saved', function (ev) { var name, payload, regions, xhr; // 檢查是否已更改 regions = ev.detail().regions; if (Object.keys(regions).length == 0) { return; } // 保存更改時(shí)將編輯器設(shè)置為忙 this.busy(true); // 將每個(gè)區(qū)域的內(nèi)容收集到一個(gè)FormData實(shí)例中 payload = new FormData(); for (name in regions) { if (regions.hasOwnProperty(name)) { payload.append(name, regions[name]); } } // 將更新內(nèi)容發(fā)送到要保存的服務(wù)器 function onStateChange(ev) { // 檢查請求是否完成 if (ev.target.readyState == 4) { editor.busy(false); if (ev.target.status == '200') { // 保存成功，通知前臺(tái) new ContentTools.FlashUI('保存成功'); } else { // 保存失敗，通知前臺(tái) new ContentTools.FlashUI('保存失敗'); } } }; xhr = new XMLHttpRequest(); xhr.addEventListener('readystatechange', onStateChange); xhr.open('POST', '/save-my-page'); xhr.send(payload);});
當(dāng)用戶保存頁面時(shí)，我們可以使用AJAX將每個(gè)區(qū)域的內(nèi)容發(fā)送到服務(wù)器進(jìn)行保存。在瀏覽器中打開頁面，尋找左上方的藍(lán)色編輯按鈕，然后單擊它以開始編輯。
總結(jié)
這樣一個(gè)美觀且強(qiáng)大的即時(shí)編輯器可謂是非常的實(shí)用，特別是對于一些內(nèi)容編輯網(wǎng)站，如CMS、靜態(tài)文檔網(wǎng)站、博客等內(nèi)容型網(wǎng)站尤其有用，希望對你有所幫助，Enjoy it！
