整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
多人可能都用過Web編輯器，比如Ckedit等，除了Word等本地編輯器外Web編輯器也是最常用最方便Web內(nèi)容來源。這些在線編輯器的一個短板限制很多，不能實時反饋在線效果。本文蟲蟲給大家介紹一種很簡單的無限制在線Html編輯器，實現(xiàn)所寫即所得UI和樣式實時刷新，JS代碼也能進行熱加載執(zhí)行重新渲染，而且這些實現(xiàn)都非常簡單，只用到了很少的html和css代碼。
要使Html可以編輯實際上很簡單只要一個body標簽就足矣。contenteditable這個body屬性可能鮮為人知，實際上它的功能就是實現(xiàn)Html文檔可編輯。我們新建一個Html文檔（Cc.html），然后將如下代碼復(fù)制粘貼到文檔中：
<body contenteditable="true"></body>
通過瀏覽器打開這個文檔，怎么樣，神奇的事情發(fā)生了把？
你可以在這個頁面任意輸入文本甚至還可以粘貼圖片。（兼容基本上所有的瀏覽器，IE也可以）。還可以支持Ctr+Z撤銷和重做。
我們知道<div>…</div>和<p>…</p>標簽內(nèi)的文字都會在頁面顯示，而<script>…</script>和<style>…</style>中的都是引用的前端腳本的代碼（JS）等需要通過瀏覽器引擎執(zhí)行渲染顯示出來的，那么這些代碼是不是可以在顯示出來呢？實際上在大多數(shù)瀏覽器只是通過CSS樣式隱藏起來的，我們通過重寫在div>…</div>中增加script, style { display: block; }即可：
<body>
<style>
script, style { display: block; }
</style>
<script>
console.log("Hello Chongchong!");
</script>
</body>
通過將其粘貼到html文件并在瀏覽器中打開它，顯示如下：
而且，我們也可以將這個頁面也設(shè)置為contenteditable，并且<style></ style>增加樣式顯示，比如我們修改字體的大小為20pt，顏色為綠色：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt;color: green}
</style>
<script>
console.log("Hello ChongChong!");
</script>
</body>
現(xiàn)在我們可以，通過在線編輯style{}的內(nèi)容，讓頁面的呈現(xiàn)實時變化，比如字體再增加10pt，顏色變成藍色。
注意，輸入時候內(nèi)容會實時變化的，比如你修改20pt為30pt途中，你字體會變成2，很小很小，繼續(xù)刪除2就會恢復(fù)成默認正常默認，你不用理會繼續(xù)輸入30字體就會變成30pt，其他參數(shù)也類似。
該方法可以實時刷新樣式顯示<style></ style>標簽，對于JS代碼，由于其只會在頁面加載時候執(zhí)行一次，你可以修改<script>…</script>內(nèi)容，但是不能實時執(zhí)行生效。
上面我也說，JS代碼的修改需要重新加載才能執(zhí)行。為了實現(xiàn)重新加載，我們首先使用簡單的按鍵（Shift+enter）觸發(fā)重新加載的方法：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt; color: green}
</style>
<script>
//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鍵。
結(jié)果如上圖就可以彈出一個消息窗口。
通過上面的方法我們實現(xiàn)了一個可編輯上面在線編輯器。在前面代碼的基礎(chǔ)上，我們提供一個基礎(chǔ)的模版供大家使用，完整代碼如下：
<body contenteditable="true" spellcheck="false">
<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>
<script type="text/javascript" class="success">
//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，然后用瀏覽器打開就實現(xiàn)了一個簡單的在線html編輯器。
該在線編輯器模版還非常簡陋，如果能增加語法高亮和自動完成等一些功能可能很好，但是這是很大工作量，有興趣的可以嘗試著做下。也可以通過引入一些第三方的庫來做下，比如使用微軟的language-server-protocol 庫來實現(xiàn)自動完成功能。
至于語法高亮，一般做法是將所有內(nèi)容填充到標簽中并對其進行著色（大多數(shù)其他基于html的編輯器都這樣做），但是這樣會破壞自動刷新和熱加載功能的簡單性。
你可能還希望處理實際內(nèi)容，而不僅僅是編輯本身。這個簡單，只需在contenteditable body中添加另一個元素，該操作可以通過JS腳本實現(xiàn)該操作。還可以添加更多元素，例如一個按鈕或者只是通過修改快速HTML框來實現(xiàn)。這些都可以在提供的模版的基礎(chǔ)上按需增加修改。
本文我們在contenteditable屬性的基礎(chǔ)上實現(xiàn)了，在線Html的編輯器實現(xiàn)內(nèi)容和樣式的實時更新、實現(xiàn)了JS代碼的熱加載。雖然此在線編輯器還非常簡陋，但是以此作為一個想法和基礎(chǔ)"拋磚引玉"，希望大家可以實現(xiàn)一個功能完善，更加實用的在線編輯器。
天給大家推薦幾個可以在線編程的網(wǎng)站。對于大部分開發(fā)者可能會不屑使用在線的網(wǎng)站，認為在自己電腦安裝環(huán)境不是很簡單的事情么。但是你很有可能臨時需要一臺電腦去測試一段簡單的代碼，也有可能想要分享一段代碼給別人，也有可能你想要學習很多語言，又不想一一安裝編程環(huán)境。那么今天推薦的網(wǎng)站肯定能滿足你的需求。
網(wǎng)址：https://ideone.com/SExhrM
這個網(wǎng)站不錯，支持Java，但是頁面有廣告。除了支持Java語言，還支持其他語言。
https://dabblet.com/
這個網(wǎng)站適合前端測試使用，該網(wǎng)站可以用來測試Html，Css，Js等功能。
網(wǎng)址：http://www.fenby.com/
這個網(wǎng)站不只支持后端語言編碼，也支持前端編碼，使用體驗很不錯。支持的語言也很豐富。
前端的支持也很OK。
https://www.w3school.com.cn/tiy/t.asp?f=js_use
當然對于想系統(tǒng)學習前端知識的童鞋可以使用W3School，這個網(wǎng)站很適合，不僅有大量的案列，還有可以實戰(zhàn)編碼。
https://www.bccn.net/run/
該網(wǎng)站支持的語言也挺多，比較推薦。
今天的介紹就到這里了，如果你打算系統(tǒng)學習編程，那我還是建議你老老實實的安裝編譯環(huán)境，安裝編輯器。
ContentTools是一個美觀小巧的網(wǎng)頁內(nèi)容工具（一個JS庫），具備所見即所得（WYSIWYG）的編輯器功能，只需幾個簡單的步驟，即可將ContentTools添加到任何HTML頁面。如下圖所示頁面通過實時ContentTool的彈出層實現(xiàn)實時編輯功能。用小而美來形容它最好不過了！
https://github.com/GetmeUK
ContentTools是用于HTML頁面的美觀小巧的內(nèi)容編輯器。它被設(shè)計為：
ContentTools具有字體加粗、斜體、超鏈接、對齊、列表、表格、圖片、視頻、代碼、撤銷、重做、刪除等功能
1、加粗顯示
2、斜體顯示
3、超鏈接
4、H標題
5、正文
6、有序和無序列表
7、插入表格
8、插入圖片
9、視頻
以上截圖中的功能還不完整，如果想體驗以下完整的功能可以直接去DEMO頁面體驗，如果需要在HTML級別上更改元素的內(nèi)容，那也是可以的。通過屬性對話框中的最后一個選項卡，可以查看所選元素的內(nèi)部HTML代碼并直接對其進行更新。
下載倉庫并打開/ build文件夾，包括預(yù)構(gòu)建的源文件。將文件夾的內(nèi)容復(fù)制到項目的適當位置（例如，content-tools.min.js> /www/scripts/content-tools.min.js）。但是，/ images文件夾和icons.woff字體需要復(fù)制到與content-tools.min.css相同的文件夾中，文件結(jié)構(gòu)應(yīng)類似于：
<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屬性用于在保存時標識區(qū)域（默認情況下使用id屬性），標記可編輯HTML時，常見的誤解是將單個元素標記為可編輯，例如：
<h1 data-editable data-name="heading">Content</h1>
正確的使用方式如下，也就是說必須要在特定的容器元素內(nèi)
<div data-editable data-name=heading> <h1>Content</h1> </div>
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提供了一個編輯器，但是在初始化它之前，我們需要配置一些東西，即：
將以下代碼添加到我們之前創(chuàng)建的editor.js文件中：
window.addEventListener('load', function() {
var editor;
});就像文字處理程序一樣，可以為內(nèi)容配置一系列預(yù)定義樣式。當用戶從視口底部的檢查器欄中選擇標簽時，這些標簽就會出現(xiàn)。盡管可以將樣式設(shè)置為適用于所有標簽，但是僅顯示適用于標簽類型的樣式。
我們將添加可應(yīng)用于段落<p>標記的單一樣式.author。在var編輯器下方聲明添加：
ContentTools.StylePalette.add([
new ContentTools.Style('Author', 'author', ['p'])
]);StylePalette.add方法使我們可以向編輯器添加樣式列表。每種樣式均聲明為一個Style實例，該實例使用顯示名稱，CSS類和可以應(yīng)用該樣式的標簽列表初始化。我們需要添加相關(guān)的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');我們使用用于頁面可編輯區(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實例中
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);
});當用戶保存頁面時，我們可以使用AJAX將每個區(qū)域的內(nèi)容發(fā)送到服務(wù)器進行保存。在瀏覽器中打開頁面，尋找左上方的藍色編輯按鈕，然后單擊它以開始編輯。
這樣一個美觀且強大的即時編輯器可謂是非常的實用，特別是對于一些內(nèi)容編輯網(wǎng)站，如CMS、靜態(tài)文檔網(wǎng)站、博客等內(nèi)容型網(wǎng)站尤其有用，希望對你有所幫助，Enjoy it！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
