整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多人可能都用過Web編輯器，比如Ckedit等，除了Word等本地編輯器外Web編輯器也是最常用最方便Web內容來源。這些在線編輯器的一個短板限制很多，不能實時反饋在線效果。本文蟲蟲給大家介紹一種很簡單的無限制在線Html編輯器，實現所寫即所得UI和樣式實時刷新，JS代碼也能進行熱加載執行重新渲染，而且這些實現都非常簡單，只用到了很少的html和css代碼。
要使Html可以編輯實際上很簡單只要一個body標簽就足矣。contenteditable這個body屬性可能鮮為人知，實際上它的功能就是實現Html文檔可編輯。我們新建一個Html文檔（Cc.html），然后將如下代碼復制粘貼到文檔中：
<body contenteditable="true"></body>
通過瀏覽器打開這個文檔，怎么樣，神奇的事情發生了把？
你可以在這個頁面任意輸入文本甚至還可以粘貼圖片。（兼容基本上所有的瀏覽器，IE也可以）。還可以支持Ctr+Z撤銷和重做。
我們知道<div>…</div>和<p>…</p>標簽內的文字都會在頁面顯示，而<script>…</script>和<style>…</style>中的都是引用的前端腳本的代碼（JS）等需要通過瀏覽器引擎執行渲染顯示出來的，那么這些代碼是不是可以在顯示出來呢？實際上在大多數瀏覽器只是通過CSS樣式隱藏起來的，我們通過重寫在div>…</div>中增加script, style { display: block; }即可：
<body>
<style>
script, style { display: block; }
</style>
<script>
console.log("Hello Chongchong!");
</script>
</body>
通過將其粘貼到html文件并在瀏覽器中打開它，顯示如下：
而且，我們也可以將這個頁面也設置為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>
現在我們可以，通過在線編輯style{}的內容，讓頁面的呈現實時變化，比如字體再增加10pt，顏色變成藍色。
注意，輸入時候內容會實時變化的，比如你修改20pt為30pt途中，你字體會變成2，很小很小，繼續刪除2就會恢復成默認正常默認，你不用理會繼續輸入30字體就會變成30pt，其他參數也類似。
該方法可以實時刷新樣式顯示<style></ style>標簽，對于JS代碼，由于其只會在頁面加載時候執行一次，你可以修改<script>…</script>內容，但是不能實時執行生效。
上面我也說，JS代碼的修改需要重新加載才能執行。為了實現重新加載，我們首先使用簡單的按鍵（Shift+enter）觸發重新加載的方法：
<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鍵。
結果如上圖就可以彈出一個消息窗口。
通過上面的方法我們實現了一個可編輯上面在線編輯器。在前面代碼的基礎上，我們提供一個基礎的模版供大家使用，完整代碼如下：
<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，然后用瀏覽器打開就實現了一個簡單的在線html編輯器。
該在線編輯器模版還非常簡陋，如果能增加語法高亮和自動完成等一些功能可能很好，但是這是很大工作量，有興趣的可以嘗試著做下。也可以通過引入一些第三方的庫來做下，比如使用微軟的language-server-protocol 庫來實現自動完成功能。
至于語法高亮，一般做法是將所有內容填充到標簽中并對其進行著色（大多數其他基于html的編輯器都這樣做），但是這樣會破壞自動刷新和熱加載功能的簡單性。
你可能還希望處理實際內容，而不僅僅是編輯本身。這個簡單，只需在contenteditable body中添加另一個元素，該操作可以通過JS腳本實現該操作。還可以添加更多元素，例如一個按鈕或者只是通過修改快速HTML框來實現。這些都可以在提供的模版的基礎上按需增加修改。
本文我們在contenteditable屬性的基礎上實現了，在線Html的編輯器實現內容和樣式的實時更新、實現了JS代碼的熱加載。雖然此在線編輯器還非常簡陋，但是以此作為一個想法和基礎"拋磚引玉"，希望大家可以實現一個功能完善，更加實用的在線編輯器。
家好，我是 Echa。
前段時間，老鐵們私信我有么有又免費又好用的在線代碼編輯器，最近找了找。終于找到了。給老鐵們安排上。創作不易，喜歡的老鐵們轉發加個關注，點個贊，速速收藏，謝謝！
今天來推薦六個好用又免費的在線代碼編輯器！
在線地址：https://codesandbox.io/
CodeSandbox 是一個在線代碼編輯器，主要用于創建 Web 應用項目，其提供了多種模塊：
CodeSandbox 為前端開發提供了完整的代碼編輯器體驗和沙盒環境。其包含了很多實用功能：
在線地址：https://codepen.io/
CodePen 是一個在線的HTML、CSS 和 JavaScript 代碼編輯器，能夠編寫代碼并即時預覽效果，可以利用它來構建和分享代碼。CodePen 支持使用 Less、Sass、PostCSS 等來編寫CSS。CodePen 不僅是一個在線編輯器，還是一個龐大的前端社區，上面有來自全球開發者分享的各種各樣炫酷的效果，并且這些代碼都是開源和共享的。
在線地址：https://stackblitz.com/
Stackblitz 和 VSCode 非常像，使用簡單可以一鍵創建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等項目：
Stackblitz 具有以下特性：
在線地址：http://jsfiddle.net/
JSFiddle 是一個在線代碼編輯器，允許用戶在單個頁面上編輯和運行 HTML、JavaScript 和 CSS 代碼。JSFiddle 使用 CodeMirror 構建，其提供了多游標、語法高亮、語法驗證（linter）、大括號匹配、自動縮進、自動完成、代碼/文本折疊、搜索和替換以協助開發人員的操作。JSFiddle 被廣泛用于共享簡單的測試和演示。
在線地址：https://jsbin.com/
JS Bin 是一個開源的協同 web 開發調試工具。主要用于幫助測試 JavaScript 和 CSS 的代碼片段，功能與 jsFiddle 類似。可以實時分享在 JS Bin 中輸入的內容，在任何平臺上的任何設備上查看 JS Bin 的輸出，都是實時更新的。
在線地址：https://code.juejin.cn/
碼上掘金是一個為廣大開發者提供代碼在線 Playground 的平臺，具備輕量簡單、易使用、現代標準、模塊化、實時編輯，所見即所得等特性。內置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
