不得不佩服，美觀小巧的網(wǎng)頁內(nèi)容編輯器-ContentTools

紹

ContentTools是一個美觀小巧的網(wǎng)頁內(nèi)容工具（一個JS庫），具備所見即所得（WYSIWYG）的編輯器功能，只需幾個簡單的步驟，即可將ContentTools添加到任何HTML頁面。如下圖所示頁面通過實(shí)時ContentTool的彈出層實(shí)現(xiàn)實(shí)時編輯功能。用小而美來形容它最好不過了！

Github地址

https://github.com/GetmeUK

特性

ContentTools是用于HTML頁面的美觀小巧的內(nèi)容編輯器。它被設(shè)計為：

與框架無關(guān)的庫不使用任何JavaScript框架（沒有JQuery），但可以很好地使用它們。
靈活的ContentTools軟件包由5個庫組成，每個庫或可以獨(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級別上更改元素的內(nèi)容，那也是可以的。通過屬性對話框中的最后一個選項(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>

包括一個名為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屬性用于在保存時標(biāo)識區(qū)域（默認(rèn)情況下使用id屬性），標(biāo)記可編輯HTML時，常見的誤解是將單個元素標(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提供了一個編輯器，但是在初始化它之前，我們需要配置一些東西，即：

我們希望用戶能夠?qū)SS樣式應(yīng)用于元素。
我們希望頁面的區(qū)域是可編輯的。
一種保存我們的內(nèi)容的機(jī)制。
我們可能還會配置圖像處理程序等等

將以下代碼添加到我們之前創(chuàng)建的editor.js文件中：

window.addEventListener('load', function() {
 var editor;

});

配置樣式

就像文字處理程序一樣，可以為內(nèi)容配置一系列預(yù)定義樣式。當(dāng)用戶從視口底部的檢查器欄中選擇標(biāo)簽時，這些標(biāo)簽就會出現(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方法使我們可以向編輯器添加樣式列表。每種樣式均聲明為一個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ù)名稱”）來初始化編輯器，以告知編輯器元素的哪個屬性包含其區(qū)域名稱。區(qū)域名稱在同一頁面中必須唯一。

保存更改

最后，我們希望在用戶保存頁面時得到通知，以便我們可以將每個區(qū)域的更新內(nèi)容存儲在文件或數(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è)置為忙
 this.busy(true);

 // 將每個區(qū)域的內(nèi)容收集到一個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') {
 // 保存成功，通知前臺
 new ContentTools.FlashUI('保存成功');
 } else {
 // 保存失敗，通知前臺
 new ContentTools.FlashUI('保存失敗');
 }
 }
 };

 xhr = new XMLHttpRequest();
 xhr.addEventListener('readystatechange', onStateChange);
 xhr.open('POST', '/save-my-page');
 xhr.send(payload);
});

當(dāng)用戶保存頁面時，我們可以使用AJAX將每個區(qū)域的內(nèi)容發(fā)送到服務(wù)器進(jìn)行保存。在瀏覽器中打開頁面，尋找左上方的藍(lán)色編輯按鈕，然后單擊它以開始編輯。

總結(jié)

這樣一個美觀且強(qiáng)大的即時編輯器可謂是非常的實(shí)用，特別是對于一些內(nèi)容編輯網(wǎng)站，如CMS、靜態(tài)文檔網(wǎng)站、博客等內(nèi)容型網(wǎng)站尤其有用，希望對你有所幫助，Enjoy it！

頁設(shè)計是把顏色、圖片和字體等等要素進(jìn)行組合調(diào)整，達(dá)到網(wǎng)頁頁面美化的目的，在給用戶帶來完美的視覺體驗(yàn)的同時，也為用戶提供更好的使用體驗(yàn)。因此，網(wǎng)頁設(shè)計需要考慮的設(shè)計因素有很多，絕不僅僅只是為了美觀。本文千鋒武漢Web前端培訓(xùn)小編將推薦十款好用的HTML生成工具，幫助大家更高效率的完成網(wǎng)頁設(shè)計。

1、Bootstrap Studio

這是一款桌面應(yīng)用程序，旨在幫助web開發(fā)人員和設(shè)計人員創(chuàng)建一個相應(yīng)迅速的網(wǎng)頁。一般是用Bootstrap Studio來架構(gòu)、設(shè)計頁面效果圖和最初的修飾，然后幾乎不用導(dǎo)出功能，而是直接在單元上右鍵，復(fù)制html。可以說Bootstrap Studio是在Chrome瀏覽器代碼和 Node.js 基礎(chǔ)之上重組和整理出的一套很規(guī)范的基于Bootstrap框架的網(wǎng)頁前端設(shè)計工具。

2、Template Stash

這款軟件幾乎集合了所有類型網(wǎng)頁的模板，你可以通過關(guān)鍵詞檢索來找到你想要的主題風(fēng)格。可以說Template Stash 是一個提供高品質(zhì)，完全免費(fèi)的響應(yīng)式網(wǎng)頁模板，幫助設(shè)計師們找到完美的響應(yīng)式網(wǎng)站主題或模版，根據(jù)網(wǎng)站分類來提高不同的模版樣式，所有的模版都是來源于Kickstart項(xiàng)目。

3、Carrd

這款軟件是免費(fèi)的，可以幫助初學(xué)者制作一個簡單、響應(yīng)快捷的網(wǎng)頁，只要幾個簡單步驟就能快速設(shè)計出美觀特色的響應(yīng)式網(wǎng)站。

4、Bubble

Bubble的優(yōu)勢在于使用者不用掌握任何編程技巧就可以制作網(wǎng)頁，它獨(dú)特的拖拉界面可以讓使用者在網(wǎng)頁上添加視頻、地圖、音頻等等功能。

5、Tilda Publishing

這款軟件可以幫助使用者制作一個內(nèi)容導(dǎo)向型的網(wǎng)頁，這款軟件非常適合那些喜歡設(shè)計博客頁面的人。Tilda Publishing的最大優(yōu)勢在于可以會將不同內(nèi)容形態(tài)切割成blocks，如果把網(wǎng)站想象成堆積木，內(nèi)容就好比一塊塊不同花色的積木，利用拖拽方式進(jìn)行排列組合，網(wǎng)站設(shè)計更加獨(dú)特，操作上也更加簡單。

6、XPRS

如果你曾經(jīng)因?yàn)樵O(shè)計網(wǎng)頁太過復(fù)雜和繁瑣而感到沮喪，那么這款軟件無疑是你的福音。這款軟件會提供一個非常簡單的編輯環(huán)境，讓網(wǎng)頁設(shè)計變得非常簡單，因此對于新手小白來講嗎，是一款十分好用的HTML生成工具。

7、Hype 3.0

這款軟件可以幫助你讓網(wǎng)頁的內(nèi)容“動”起來，使用者可以設(shè)計每一幀動畫并且進(jìn)行排序，也可以手動添加或者刪除動畫效果，如果你想讓自己的網(wǎng)頁更加生動，那么這款軟件絕對是你的首選。這是一款強(qiáng)大的Mac OS平臺HTML5創(chuàng)作工具，它可以在網(wǎng)頁上做出賞心悅目的動畫效果，無需 Flash 插件。更重要的是這款強(qiáng)的html5開發(fā)工具竟然還有中文版！現(xiàn)在你幾乎不需要任何的編碼知識，只需要簡單的拖拽就可以制作出好玩的動畫，基于時間軸的制作方式非常的方便，最新的3.0版本具有全新的 UI和24 種全新的定時功能等新功能，非常強(qiáng)大！

8、OnePager

Onepager 是一個提供使用者建置小型網(wǎng)站網(wǎng)站的網(wǎng)絡(luò)服務(wù)，透過視覺化的操作介面，無須下載、安裝任何軟體，也不用苦苦尋找虛擬主機(jī)，只要申請帳戶，就能夠快速建立自己公司的網(wǎng)站。作為一款好用的HTML生成工具，它可以幫助使用者快速編輯所有類型的網(wǎng)頁。使用者可以輕松建立一個響應(yīng)迅速的網(wǎng)站，這款軟件內(nèi)置的預(yù)設(shè)系統(tǒng)使得網(wǎng)頁的一切都是可定制的，使用者甚至可以自己設(shè)計網(wǎng)頁的主題風(fēng)格。總之，Onepaper 讓制作網(wǎng)頁變得非常簡單。內(nèi)建多種佈景主題可以切換、使用，你甚至不用具備網(wǎng)頁設(shè)計的知識，直接透過線上工具就能變更設(shè)計。

9、Grav

Grav是一個簡單可擴(kuò)展的CMS平臺。因?yàn)槭羌兾募到y(tǒng)，所以它無需安裝，并且它有著完善的后臺界面和完整的官方文檔。又因?yàn)榭蓴U(kuò)展型號，可以通過有插件控制幾乎每個環(huán)節(jié)。不過這也是一款較為復(fù)雜的HTML生成工具，需要使用者掌握一些編程的技巧。

10、HTML to WordPress

這個軟件可以將靜態(tài)的HTML網(wǎng)站轉(zhuǎn)換成WordPress，如果你想轉(zhuǎn)換你的網(wǎng)站格式，這款軟件將幫助你節(jié)省大量的時間，因此推薦大家使用。

以上就是千鋒武漢Web前端培訓(xùn)小編推薦的十款好用的HTML生成工具，大家都用過了嗎？如果你現(xiàn)在還在尋找一款HTML生成工具，不妨試試以上的推薦工具，相信總有一款適合你。關(guān)注“武漢千鋒”微信公眾號，會定期為大家分享最新Web前端發(fā)展趨勢、學(xué)習(xí)資料，助力大家學(xué)好Web前端。

普及一下基本知識：什么叫在線HTML編輯器？

說得簡單點(diǎn)，在線HTML編輯器就是在網(wǎng)上發(fā)帖子、寫博客的那個帶編輯功能的框框，可以進(jìn)行圖文排版等操作。

當(dāng)年本菜鳥做網(wǎng)站的時候，曾經(jīng)自己用javascript編寫過一個比較簡單的在線HTML編輯器，用于文本內(nèi)容的排版。但是因?yàn)樗接邢蓿芏喙δ芏紵o法實(shí)現(xiàn)。后來有了eWebEditor，功能確實(shí)強(qiáng)大，但這個編輯器是個收費(fèi)的軟件，并且正因?yàn)楣δ軓?qiáng)大，也就顯得過重，一些輕量的場合不是太適用。那有沒有既免費(fèi)、又功能強(qiáng)大、還能適應(yīng)輕量場合的在線HTML編輯器呢？

答案肯定是有的。這首先要感謝這些年來有一批奉獻(xiàn)精神的程序猿們不斷推進(jìn)共享軟件的開發(fā)，讓我們得以享受他們的成果。

一、百度出品的UEditor

UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼。特別要說的是，頭條號后臺發(fā)布文章的編輯器就是用的UEditor!

百度UEditor

UEditor還有一個輕量版的，叫做UMeditor，簡稱UM。UM是為滿足廣大門戶網(wǎng)站對于簡單發(fā)帖框，或者回復(fù)框需求所定制的在線HTML編輯器。主要特點(diǎn)是容量和加載速度上的改變，主文件的代碼量為139k，而且放棄了使用傳統(tǒng)的iframe模式，采用了div的加載方式，以達(dá)到更快的加載速度和零加載失敗率。UM的第一個使用者是百度貼吧，以經(jīng)受貼吧每天幾億的pv的考驗(yàn)，功能設(shè)計應(yīng)當(dāng)是最優(yōu)化的了。當(dāng)然隨著代碼的減少，UM的功能對于UE來說還是有所減少，但也有增加，比如拖拽圖片上傳，chrome的圖片拖動改變大小等。

百度UEditor界面

二、xhEditor開源HTML編輯器

xhEditor是一個基于jQuery開發(fā)的簡單迷你并且高效的可視化HTML編輯器，基于網(wǎng)絡(luò)訪問并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

xhEditor完全基于Javascript開發(fā)，可以應(yīng)用在任何的服務(wù)端語言環(huán)境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、論壇、商城等互聯(lián)網(wǎng)平臺上完美的嵌入運(yùn)行，能夠非常靈活簡單的和您的系統(tǒng)實(shí)現(xiàn)完美的無縫銜接。

主要特點(diǎn)：

精簡迷你：初始加載4個文件，包括：1個js(50k)+2個css(10k)+1個圖片(5k)，總共65k。若js和css文件進(jìn)行g(shù)zip壓縮傳輸，可以進(jìn)一步縮減為24k左右。
使用簡單：簡單的調(diào)用方式，加一個class屬性就能將textarea變成一個功能豐富的可視化編輯器。
無障礙訪問：提供WAI-ARIA全面支持，全鍵盤精細(xì)操作，全程語音向?qū)В峁┩昝罒o障礙訪問體驗(yàn)，充分滿足殘疾人的上網(wǎng)需求。
內(nèi)置Ajax上傳：內(nèi)置強(qiáng)大的Ajax上傳，包括HTML4和HTML5上傳支持(多文件上傳、真實(shí)上傳進(jìn)度及文件拖放上傳)，剪切板上傳及遠(yuǎn)程抓取上傳。
Word自動清理：實(shí)現(xiàn)Word代碼自動檢測并清理，生成代碼最優(yōu)化精簡，卻不丟失細(xì)節(jié)效果。
UBB可視化編輯：支持UBB可視化編輯，在獲得安全高效代碼存儲的同時，又能享受可視化編輯的便捷。

三、KindEditor開源HTML編輯器

KindEditor 也是一個開源的在線HTML編輯器，使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。本菜鳥感覺這個編輯器上手比較容易，功能也很強(qiáng)大，界面比較友好，很適合菜鳥使用。可惜的是最近好像停止更新了，官網(wǎng)好象也能不正常訪問。

KindEditor界面

主要特點(diǎn)：

快速：體積小，加載速度快
開源：開放源代碼，高水平，高品質(zhì)
底層：內(nèi)置自定義 DOM 類庫，精確操作 DOM
擴(kuò)展：基于插件的設(shè)計，所有功能都是插件，可根據(jù)需求增減功能
風(fēng)格：修改編輯器風(fēng)格非常容易，只需修改一個 CSS 文件
兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera

四、阿里的KISSY

嚴(yán)格來說，KISSY不僅僅是一個在線HTML編輯器，而是由阿里集團(tuán)前端工程師們發(fā)起創(chuàng)建的一個開源 JS 框架，具有跨終端、模塊化、使用簡單的特點(diǎn)。里面帶有HTML編輯器這個模塊。

阿里的KISSY

正因?yàn)镵ISSY采取模塊化設(shè)計，因此具有高擴(kuò)展性、組件齊全，接口一致、自主開發(fā)、適合多種應(yīng)用場景等優(yōu)點(diǎn)。KISSY 除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等，KISSY 還面向團(tuán)隊(duì)協(xié)作做了獨(dú)特設(shè)計，提供了經(jīng)典的面向?qū)ο蟆討B(tài)加載、性能優(yōu)化解決方案。作為一款全終端支持的 JavaScript 框架，KISSY還為移動終端做了大量適配和優(yōu)化，搞移動web開發(fā)的可以好好研究一下KISSY的運(yùn)用。

關(guān)于菜鳥手記：

菜鳥最怕就是看大神的攻略，全是術(shù)語看頭就頭大！本人作為一名對啥都感興趣的資深菜鳥，潛心研究各類技術(shù)二十余年，做網(wǎng)站、寫程序、搞美工、練書法、學(xué)畫畫、作文章、抓管理、裝逼格，屬于搞IT里面最懂美工的，搞HR里面最懂畫畫的，搞文字里面最懂程序的，最終一事無成，博而不精，徒留一堆手記。從菜鳥角度寫手記，同樣的”白”更易懂，你值得擁有！感興趣的，請別忘點(diǎn)右角關(guān)注菜鳥手記。

在線咨詢

上一篇：如何處理html中內(nèi)聯(lián)元素之間水平空隙？
下一篇：safari瀏覽器怎么清除歷史記錄

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商