整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
nlinehtmleditor.net是非常简单和易用的HTML在线编辑器，适用的标签有H1，H2，H3，H4，P,IMG,List等，还可以在下方查看实时预览。你可以手动输入这些标签，也可以通过点击工具栏上的图标来使用它们。它甚至可以让你通过具体的图片路径添加图片。完成编辑之后，你可以复制你的HTML代码并保存到本地磁盘，也可以在你的网站或博客中使用它。
html.am提供了一个成熟的免费在线WYSIWYG HTML编辑器。它拥有几乎所有的命令用来编辑你的文字，包括字体大小，颜色，尺寸，列表，超链 接及更多。 除了上面提到的标签，它还支持高级的HTML标签，包括表格，文本框， 复选框，单选按钮，文本域，按钮等。此外，还能插入图片对象，Flash 对象，表格甚至是iFrame。你可以按要求键入和编辑文本内容。编写完成后你可以将编辑页面的源代码复制到您的网站上。您可以通过点击主菜单上的源按钮切换源代码 ，还能通过点击最大化按钮把编辑器最大化。
jsfiddle.net是一个多窗格的HTML在线编辑器。你可以在HTML窗格中键入HTML代码，而CSS和Java Script脚本将会键入到各自的窗口中。每次更改之后你必须点击运行按钮来查看最终的结果。你可以进行在线保存 ，它为你提供了一个唯一的保存路径。另外，它还支持在线协作。
codepen.io是一个具有先进功能的HTML在线编辑器，可以在同样的浏览窗口中单独编辑HTML, CSS,和Java Script。你可以在编写的同时进行预览，还能点击“更改视图”按钮重新进行分层并选中你需要的层，编写完成之后，你可以将代码导出并保存到一个压缩文件中。这个编辑器拥有许多的快捷键方便您进行使用。
cssdeck.com是一个拥有四个窗格的HTML在线编辑器，他们分别用来编写HTML, CSS和Java Script并进行实时预览。你可以在每个窗口中单独编写代码，但组合的输出结果将会显示在预览窗口中。此外，编辑器还拥有许多的快捷键。
html-color-codes.info提供了免费的HTML在线编辑器。它可以让你键入和编写文本并生成格式化HTML代码。无论是专业的HTML程序员还是只了解一些HTML知识的新手都能使用它。你可以应用格式，缩进，各种样式 ，不同的字体以及字体大小到你的文本中。它还具有“粘贴为纯文本” 和“粘贴”的选项，使格式设置更容易。它也有一个预览按钮来预览您的网页。完成编辑后，您可以点击“编辑HTML源码”按钮（在工具栏上的最后一个按钮）复制HTML代码。
htmleditor.in是一个类似于MS Word的免费WYSIWYG HTML和HTML5在线编辑器。只需要进入文本，并应用各种格式设置到你的文本中，如：粗体，斜体，下划线，删除线，上标，下标，编号，字体大小，字体，颜色等。它有一个拼写检查的设备，能进行拼写检查。它还具有许多形式设计工具，你可以插入动画，图片，表格，水平线，笑脸和其它的外部对象到你的页面。
codebeautify.org不仅仅是一个免费的HTML在线编辑工具。它实际上是一个用来美化和精简代码的在线工具。您可以输入一个现有网页的网址，它将会显示出完整的代码。你可以编写代码并进行实时查看。此外，你还可以页面存储大小以及字符数。最后，它能为你所修改的代码提供一个唯一的路径进行保存。这个功能让它成为团队合作项目的第一选择，每个团队成员都能通过共享路径看到修改后的代码。
htmledit.squarefree.com是一个基本的HTML在线编辑器。在使用它之前你必须了解HTML的相关知识。你必须手动将格式化标记应用于文本类型，能实时看到文本和格式的变化。总而言之，这是一个非常基础的HTML编辑器。
4html.net 提供免费的HTML在线编辑功能。只需在给定区域键入文本并使用各种格式化标签。它拥有的格式例如：粗体，斜体风格，强调，预格式化的地址，标题，标题1至6的格式等。它还有代码高亮显示，自动缩进等功能。除了简单的粘帖功能，它还具有“粘贴为纯文本”和“从Word中粘贴”等功能。编辑结束后，你可以把HTML代码复制到你的网站或博客中。
{@@_update}
本站文章除注明转载外，均为本站原创或翻译
说得简单点，在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框，可以进行图文排版等操作。
当年本菜鸟做网站的时候，曾经自己用javascript编写过一个比较简单的在线HTML编辑器，用于文本内容的排版。但是因为水平有限，很多功能都无法实现。后来有了eWebEditor，功能确实强大，但这个编辑器是个收费的软件，并且正因为功能强大，也就显得过重，一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢？
答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发，让我们得以享受他们的成果。
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。特别要说的是，头条号后台发布文章的编辑器就是用的UEditor!
百度UEditor
UEditor还有一个轻量版的，叫做UMeditor，简称UM。UM是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线HTML编辑器。 主要特点是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式， 以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧，以经受贴吧每天几亿的pv的考验，功能设计应当是最优化的了。 当然随着代码的减少，UM的功能对于UE来说还是有所减少，但也有增加，比如拖拽图片上传，chrome的图片拖动改变大小等。
百度UEditor界面
xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
xhEditor完全基于Javascript开发，可以应用在任何的服务端语言环境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。
主要特点：
精简迷你：初始加载4个文件，包括：1个js(50k)+2个css(10k)+1个图片(5k)，总共65k。若js和css文件进行gzip压缩传输，可以进一步缩减为24k左右。
使用简单：简单的调用方式，加一个class属性就能将textarea变成一个功能丰富的可视化编辑器。
无障碍访问：提供WAI-ARIA全面支持，全键盘精细操作，全程语音向导，提供完美无障碍访问体验，充分满足残疾人的上网需求。
内置Ajax上传：内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓取上传。
Word自动清理：实现Word代码自动检测并清理，生成代码最优化精简，却不丢失细节效果。
UBB可视化编辑：支持UBB可视化编辑，在获得安全高效代码存储的同时，又能享受可视化编辑的便捷。
KindEditor 也是一个开源的在线HTML编辑器， 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。本菜鸟感觉这个编辑器上手比较容易，功能也很强大，界面比较友好，很适合菜鸟使用。可惜的是最近好像停止更新了，官网好象也能不正常访问。
KindEditor界面
主要特点：
快速：体积小，加载速度快
开源：开放源代码，高水平，高品质
底层：内置自定义 DOM 类库，精确操作 DOM
扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera
严格来说，KISSY不仅仅是一个在线HTML编辑器，而是由阿里集团前端工程师们发起创建的一个开源 JS 框架，具有跨终端、模块化、使用简单的特点。里面带有HTML编辑器这个模块。
阿里的KISSY
正因为KISSY采取模块化设计，因此具有高扩展性、组件齐全，接口一致、自主开发、适合多种应用场景等优点。KISSY 除了完备的工具集合诸如 DOM、Event、Ajax、Anim 等，KISSY 还面向团队协作做了独特设计，提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架，KISSY还 为移动终端做了大量适配和优化，搞移动web开发的可以好好研究一下KISSY的运用。
关于菜鸟手记：
菜鸟最怕就是看大神的攻略，全是术语看头就头大！本人作为一名对啥都感兴趣的资深菜鸟，潜心研究各类技术二十余年，做网站、写程序、搞美工、练书法、学画画、作文章、抓管理、装逼格，属于搞IT里面最懂美工的，搞HR里面最懂画画的，搞文字里面最懂程序的，最终一事无成，博而不精，徒留一堆手记。从菜鸟角度写手记，同样的”白”更易懂，你值得拥有！感兴趣的，请别忘点右角关注菜鸟手记。
多人可能都用过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代码的热加载。虽然此在线编辑器还非常简陋，但是以此作为一个想法和基础"抛砖引玉"，希望大家可以实现一个功能完善，更加实用的在线编辑器。
*请认真填写需求信息，我们会在24小时内与您取得联系。
