整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多人可能都用过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小时内与您取得联系。
