通過簡單Html代碼實現實時Web編輯器

多人可能都用過Web編輯器，比如Ckedit等，除了Word等本地編輯器外Web編輯器也是最常用最方便Web內容來源。這些在線編輯器的一個短板限制很多，不能實時反饋在線效果。本文蟲蟲給大家介紹一種很簡單的無限制在線Html編輯器，實現所寫即所得UI和樣式實時刷新，JS代碼也能進行熱加載執行重新渲染，而且這些實現都非常簡單，只用到了很少的html和css代碼。

Html內容可編輯—contenteditable

要使Html可以編輯實際上很簡單只要一個body標簽就足矣。contenteditable這個body屬性可能鮮為人知，實際上它的功能就是實現Html文檔可編輯。我們新建一個Html文檔（Cc.html），然后將如下代碼復制粘貼到文檔中：

通過瀏覽器打開這個文檔，怎么樣，神奇的事情發生了把？

你可以在這個頁面任意輸入文本甚至還可以粘貼圖片。（兼容基本上所有的瀏覽器，IE也可以）。還可以支持Ctr+Z撤銷和重做。

<style>…</style>樣式實時變化

我們知道<div>…</div>和<p>…</p>標簽內的文字都會在頁面顯示，而<script>…</script>和<style>…</style>中的都是引用的前端腳本的代碼（JS）等需要通過瀏覽器引擎執行渲染顯示出來的，那么這些代碼是不是可以在顯示出來呢？實際上在大多數瀏覽器只是通過CSS樣式隱藏起來的，我們通過重寫在div>…</div>中增加script, style { display: block; }即可：

<body>

<style>

script, style { display: block; }

</style>

console.log("Hello Chongchong!");

</script>

</body>

通過將其粘貼到html文件并在瀏覽器中打開它，顯示如下：

而且，我們也可以將這個頁面也設置為contenteditable，并且<style></ style>增加樣式顯示，比如我們修改字體的大小為20pt，顏色為綠色：

<style>

script, style { display: block;font-size: 20pt;color: green}

</style>

console.log("Hello ChongChong!");

</script>

</body>

現在我們可以，通過在線編輯style{}的內容，讓頁面的呈現實時變化，比如字體再增加10pt，顏色變成藍色。

注意，輸入時候內容會實時變化的，比如你修改20pt為30pt途中，你字體會變成2，很小很小，繼續刪除2就會恢復成默認正常默認，你不用理會繼續輸入30字體就會變成30pt，其他參數也類似。

該方法可以實時刷新樣式顯示<style></ style>標簽，對于JS代碼，由于其只會在頁面加載時候執行一次，你可以修改<script>…</script>內容，但是不能實時執行生效。

JS代碼熱加載

上面我也說，JS代碼的修改需要重新加載才能執行。為了實現重新加載，我們首先使用簡單的按鍵（Shift+enter）觸發重新加載的方法：

<style>

script, style { display: block;font-size: 20pt; color: green}

</style>

//alert("Hello ChongChong!");

document.onkeydown=function(e) {

var key=window.event ? event : e;

if (key.shiftKey && key.keyCode==13) {

eval(window.getSelection().focusNode.parentNode.innerHTML);

}

};

</script>

</body>

通過瀏覽器打開，并且編輯去掉//alert("Hello ChongChong!")前面的//注釋,然后按鍵shift時按Enter鍵。

結果如上圖就可以彈出一個消息窗口。

基礎模版和完善

通過上面的方法我們實現了一個可編輯上面在線編輯器。在前面代碼的基礎上，我們提供一個基礎的模版供大家使用，完整代碼如下：

<title>editor</title>

<style>script,

style {

display: block;

white-space: pre-wrap;

background-color: #eeeeee;

border: solid;

border-radius: 10px;

padding: 20px;

}

body {

font-family: Menlo, Monaco, monospace;

font-size: 12pt;

tab-size: 4;

}

script.success {

background-color: #ccffcc;

border: solid, #00cc00;

}

script.error {

background-color: #ffcccc;

border: solid, #ff1111;

}

</style>

//alert("Hello Chongchong!");

document.onkeydown=function(e) {

var key=window.event ? event : e;

var node=window.getSelection().focusNode;

if (key.shiftKey) {

if (key.keyCode==13) {

node.parentNode.classList.remove("error");

node.parentNode.classList.remove("success");

try {

eval(node.parentNode.innerHTML);

node.parentNode.classList.add("success");

} catch (e) {

node.parentNode.classList.add("error");

}

return false;

}

} else {

if (key.keyCode==13) {

document.execCommand("insertHTML", false, "\n");

return false;

}

if (key.keyCode==9) {

document.execCommand("insertHTML", false, "\t");

return false;

}

</script>

</body>

將上面代碼保存為html，然后用瀏覽器打開就實現了一個簡單的在線html編輯器。

完善功能

該在線編輯器模版還非常簡陋，如果能增加語法高亮和自動完成等一些功能可能很好，但是這是很大工作量，有興趣的可以嘗試著做下。也可以通過引入一些第三方的庫來做下，比如使用微軟的language-server-protocol 庫來實現自動完成功能。

至于語法高亮，一般做法是將所有內容填充到標簽中并對其進行著色（大多數其他基于html的編輯器都這樣做），但是這樣會破壞自動刷新和熱加載功能的簡單性。

完善內容

你可能還希望處理實際內容，而不僅僅是編輯本身。這個簡單，只需在contenteditable body中添加另一個元素，該操作可以通過JS腳本實現該操作。還可以添加更多元素，例如一個按鈕或者只是通過修改快速HTML框來實現。這些都可以在提供的模版的基礎上按需增加修改。

總結

本文我們在contenteditable屬性的基礎上實現了，在線Html的編輯器實現內容和樣式的實時更新、實現了JS代碼的熱加載。雖然此在線編輯器還非常簡陋，但是以此作為一個想法和基礎"拋磚引玉"，希望大家可以實現一個功能完善，更加實用的在線編輯器。

天給大家推薦幾個可以在線編程的網站。對于大部分開發者可能會不屑使用在線的網站，認為在自己電腦安裝環境不是很簡單的事情么。但是你很有可能臨時需要一臺電腦去測試一段簡單的代碼，也有可能想要分享一段代碼給別人，也有可能你想要學習很多語言，又不想一一安裝編程環境。那么今天推薦的網站肯定能滿足你的需求。

idenone.com

網址：https://ideone.com/SExhrM

這個網站不錯，支持Java，但是頁面有廣告。除了支持Java語言，還支持其他語言。

dabblet

https://dabblet.com/

這個網站適合前端測試使用，該網站可以用來測試Html，Css，Js等功能。

Fenby

網址：http://www.fenby.com/

這個網站不只支持后端語言編碼，也支持前端編碼，使用體驗很不錯。支持的語言也很豐富。

前端的支持也很OK。

W3School

https://www.w3school.com.cn/tiy/t.asp?f=js_use

當然對于想系統學習前端知識的童鞋可以使用W3School，這個網站很適合，不僅有大量的案列，還有可以實戰編碼。

在線編程

https://www.bccn.net/run/

該網站支持的語言也挺多，比較推薦。

今天的介紹就到這里了，如果你打算系統學習編程，那我還是建議你老老實實的安裝編譯環境，安裝編輯器。

紹

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

Github地址

https://github.com/GetmeUK

特性

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

與框架無關的庫不使用任何JavaScript框架（沒有JQuery），但可以很好地使用它們。
靈活的ContentTools軟件包由5個庫組成，每個庫或可以獨立使用。
可擴展的軟件包旨在易于擴展。
小巧完整的編輯器（JS，CSS，圖像和圖標字體）為241kb（壓縮后為49kb）。

功能簡介

ContentTools具有字體加粗、斜體、超鏈接、對齊、列表、表格、圖片、視頻、代碼、撤銷、重做、刪除等功能

1、加粗顯示

2、斜體顯示

3、超鏈接

4、H標題

5、正文

6、有序和無序列表

7、插入表格

8、插入圖片

9、視頻

以上截圖中的功能還不完整，如果想體驗以下完整的功能可以直接去DEMO頁面體驗，如果需要在HTML級別上更改元素的內容，那也是可以的。通過屬性對話框中的最后一個選項卡，可以查看所選元素的內部HTML代碼并直接對其進行更新。

使用

第一步是下載JS，CSS和其他關聯的項目文件：

下載倉庫并打開/ build文件夾，包括預構建的源文件。將文件夾的內容復制到項目的適當位置（例如，content-tools.min.js> /www/scripts/content-tools.min.js）。但是，/ images文件夾和icons.woff字體需要復制到與content-tools.min.css相同的文件夾中，文件結構應類似于：

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文件。包含初始化我們的編輯器的代碼，繼續

<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屬性用于在保存時標識區域（默認情況下使用id屬性），標記可編輯HTML時，常見的誤解是將單個元素標記為可編輯，例如：

<h1 data-editable data-name="heading">Content</h1>

正確的使用方式如下，也就是說必須要在特定的容器元素內

<div data-editable data-name=heading>
 <h1>Content</h1>
</div>

準備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;
}

/* 可編輯區域中文本的對齊樣式 */
[data-editable] .text-center {
 text-align: center;
}

[data-editable] .text-left {
 text-align: left;
}

[data-editable] .text-right {
 text-align: right;
}

初始化編輯器

ContentTools提供了一個編輯器，但是在初始化它之前，我們需要配置一些東西，即：

我們希望用戶能夠將CSS樣式應用于元素。
我們希望頁面的區域是可編輯的。
一種保存我們的內容的機制。
我們可能還會配置圖像處理程序等等

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

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

});

配置樣式

就像文字處理程序一樣，可以為內容配置一系列預定義樣式。當用戶從視口底部的檢查器欄中選擇標簽時，這些標簽就會出現。盡管可以將樣式設置為適用于所有標簽，但是僅顯示適用于標簽類型的樣式。

我們將添加可應用于段落<p>標記的單一樣式.author。在var編輯器下方聲明添加：

ContentTools.StylePalette.add([
 new ContentTools.Style('Author', 'author', ['p'])
]);

StylePalette.add方法使我們可以向編輯器添加樣式列表。每種樣式均聲明為一個Style實例，該實例使用顯示名稱，CSS類和可以應用該樣式的標簽列表初始化。我們需要添加相關的CSS來支持這種樣式，因此在HTML的開頭添加：

<head>
 ...
 <style>
 .author {
 font-style: italic;
 font-weight: bold;
 }
 </style>
</head>

選擇可編輯區域

接下來，我們需要初始化編輯器，并讓它知道頁面上的哪些元素是可編輯的。為此，將以下代碼添加到editor.js中：

editor=ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-name');

我們使用用于頁面可編輯區域的CSS選擇器和屬性名稱（“數據名稱”）來初始化編輯器，以告知編輯器元素的哪個屬性包含其區域名稱。區域名稱在同一頁面中必須唯一。

保存更改

最后，我們希望在用戶保存頁面時得到通知，以便我們可以將每個區域的更新內容存儲在文件或數據庫中。為此，我們監聽由編輯器觸發的保存事件。在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;
 }

 // 保存更改時將編輯器設置為忙
 this.busy(true);

 // 將每個區域的內容收集到一個FormData實例中
 payload=new FormData();
 for (name in regions) {
 if (regions.hasOwnProperty(name)) {
 payload.append(name, regions[name]);
 }
 }

 // 將更新內容發送到要保存的服務器
 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);
});

當用戶保存頁面時，我們可以使用AJAX將每個區域的內容發送到服務器進行保存。在瀏覽器中打開頁面，尋找左上方的藍色編輯按鈕，然后單擊它以開始編輯。

總結

這樣一個美觀且強大的即時編輯器可謂是非常的實用，特別是對于一些內容編輯網站，如CMS、靜態文檔網站、博客等內容型網站尤其有用，希望對你有所幫助，Enjoy it！

在線咨詢

上一篇：css隱藏頁面元素的多種方法
下一篇：數據驅動營銷：14條運用數據的經驗法則

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

通過簡單Html代碼實現實時Web編輯器

Html內容可編輯—contenteditable

<style>…</style>樣式實時變化

JS代碼熱加載

基礎模版和完善

完善功能

完善內容

總結

idenone.com

dabblet

Fenby

W3School

在線編程

紹

Github地址

特性

功能簡介

使用

總結

您的項目需求