整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多人可能都用過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代碼的熱加載。雖然此在線編輯器還非常簡陋，但是以此作為一個想法和基礎"拋磚引玉"，希望大家可以實現一個功能完善，更加實用的在線編輯器。
們來看看Chrome DevTools中的便捷實時編輯功能，以及它如何幫助您調試HTML和CSS，使您的前端更流暢。
Chrome DevTools是一款內置于Chrome瀏覽器中的強大的Web開發工具套件。DevTools對Web開發人員最有用的功能之一是能夠在頁面上實時編輯HTML和CSS。該功能允許任何開發人員，即使是HTML和CSS知識較弱的開發人員，都可以對網頁的潛在變化進行快速原型和迭代。
在使用Lucidchart時，我最近的一個項目是在用戶輸入帳單信息時在輸入中添加一些復選標記，以便在用戶輸入格式正確且有效的信息時即時提供反饋。盡管我在后端代碼中比在CSS和HTML中工作更舒適，但我可以通過實時編輯功能輕松實現這些復選標記。
使用檢查器工具編輯HTML有兩種快速打開檢查員的方法。首先是用F12打開DevTools ，選擇“Elements”選項卡，然后單擊左上角的光標圖標。第二，更快，方法是使用鍵盤快捷鍵Ctrl + Shift + C。如果您經常在Linux環境中工作，那么在您意圖復制文本時，很有可能很多次您都會在意外中使用此快捷方式！
一旦檢查員處于活動狀態，您可以通過單擊它查找頁面上任何元素的HTML。Chrome瀏覽器還會顯示您將鼠標懸停在其上的元素的位置和大小信息。
一旦選擇了一個元素，就可以通過各種方式與它進行交互。通過右鍵單擊“元素”選項卡中的HTML并選擇“編輯為HTML”，您可以實時編輯網頁的標記，Chrome將在編輯完成后立即呈現該標記。
告訴DevTools您正在編輯可能會非常棘手。你的第一本能可能是擊退Escape鍵，但這會使你退出編輯而放棄你的改變。您可以通過按Ctrl + Enter或直接單擊您正在編輯的文本框外部來保存更改。
使用正常的Ctrl + Z和Ctrl + Y熱鍵可以撤消或重做HTML編輯。除非您啟用持續性編輯，否則它們也將在頁面刷新時丟失。
為了開始我的復選標記項目，我開始創建一個原型元素作為測試我想要做的調整的地方。使用Chrome DevTools的實時編輯功能，我添加了一個僅包含字母“X”的占位符div，作為臨時臨時選中標記。
顯然，這是一個非常糟糕的選擇標記的借口，但它足以幫助我快速確定一些問題。首先，復選標記完全是錯誤的。另外，它弄亂了頁面上其他元素的對齊。這兩個問題都可以通過一些CSS來解決。幸運的是，Chrome還提供了一些優秀的工具，可以使用DevTools快速構建CSS更改原型。
從“元素”選項卡編輯CSS在“元素”選項卡的HTML視圖右側，有一個視圖，顯示了CSS規則適用于選定元素的細分。這個視圖對于調試大量的CSS錯誤非常有用。例如，因為您可以看到哪些規則適用于當前元素，您可以確定某個元素是否獲得了您所期望的CSS規則，或者缺少您認為應用于其中的CSS規則。CSS視圖還顯示何時由匹配規則應用的樣式被更具體的規則覆蓋。
CSS視圖提供了一些非常有用的實時編輯功能。每種樣式都在其旁邊有一個復選框，讓您啟用或禁用某些樣式，并查看它們如何影響頁面上的元素。您還可以將新樣式應用于特定元素，現有CSS規則或全新的CSS規則。所有這些更改都立即反映在頁面上。
Chrome DevTools提供了一些便利的功能，可以使實時編輯CSS變得更容易。對那些不熟悉CSS的人最有幫助的是自動完成功能。在您輸入風格名稱時，Chrome會建議可能的匹配項。一旦輸入樣式的名稱，Chrome也將幫助您使用該樣式的正確值。對于枚舉式樣式，例如“位置”或“顯示”，Chrome會顯示合法值供您選擇。對于數值輸入，您可以使用向上和向下箭頭將值增加1，而不必重新輸入單位。
與實時編輯HTML一樣，您可以使用Ctrl + Z和Ctrl + Y撤消或重做您的實時CSS更改。
使用DevTools，我能夠很容易地找出CSS規則的組合，這些規則將我的偽復選框與我想要的對齊。這個過程涉及到一些試驗和錯誤，但實時編輯使迭代周期非常短，這對于像我這樣的CSS新手來說特別有用。
結論我們只是抓住了Chrome DevTools的實時編輯功能的能力，尤其是在CSS域。當我去調試一個CSS問題或快速原型化一個新的CSS變化時，這些基本技巧對我來說始終是非常寶貴的。
ASP.NET Core原生應用的熱更新是指開發者可以通過修改應用程序中的代碼或文件，然后觸發應用程序自動重載的功能。這種方式不僅可以讓開發者更加方便地進行修改和優化，同時也可以讓應用程序的響應速度更加快捷。
相較于以往的熱更新方式，ASP.NET Core的熱更新功能具有許多優勢。首先，ASP.NET Core的熱更新模式可以讓開發者同時進行調試。這意味著開發者可以在修改代碼的同時，保持對應用程序的控制，以便及時發現并解決潛在的問題。
ASP.NET Core的熱更新功能可以讓開發者更加方便地進行代碼和文件的修改。通過熱更新模式，開發者可以快速地更新應用程序中的任何部分，而無需重新編譯和部署整個應用程序。
ASP.NET Core的熱更新功能還具有可擴展性和可靠性。開發者可以通過自定義腳本或使用預設的腳本來觸發熱更新。同時，熱更新過程也會自動進行版本管理和日志記錄，以確保開發者可以輕松地查看和跟蹤應用程序的更新歷史記錄。
Hot Reload功能在各種開發場景下都非常有用，特別是在進行前端UI調整或進行快速原型設計時，它可以顯著提高開發效率。通過減少編譯和部署的等待時間，開發者可以更快地迭代和測試他們的應用程序。
Hot Reload支持多種開發工具和環境，包括Visual Studio、Visual Studio Code以及命令行工具。在Visual Studio中，通?？梢酝ㄟ^保存文件或使用特定的Hot Reload按鈕來觸發熱更新。在Visual Studio Code或命令行環境中，通常通過.NET CLI命令如dotnet watch來啟用和使用Hot Reload功能。
Hot Reload 支持以下類型的更改：
要使用Hot Reload功能，您需要安裝 Visual Studio 2019 版本 16.8 或更高版本，并且在ASP.NET Core應用程序的.csproj文件中啟用以下功能：
我這習慣用保存文件自動Reload。
你會在看頁面源代碼中看到一行
<script src="/_framework/aspnetcore-browser-refresh.js"></script>
注意：熱重載，不能在一些大的功能模塊更新后使用。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
