整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

细数几款免费好用的在线HTML编辑器

普及一下基本知识:什么叫在线HTML编辑器?

说得简单点,在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框,可以进行图文排版等操作。


当年本菜鸟做网站的时候,曾经自己用javascript编写过一个比较简单的在线HTML编辑器,用于文本内容的排版。但是因为水平有限,很多功能都无法实现。后来有了eWebEditor,功能确实强大,但这个编辑器是个收费的软件,并且正因为功能强大,也就显得过重,一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢?

答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发,让我们得以享受他们的成果。

一、百度出品的UEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。特别要说的是,头条号后台发布文章的编辑器就是用的UEditor!

百度UEditor

UEditor还有一个轻量版的,叫做UMeditor,简称UM。UM是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线HTML编辑器。 主要特点是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧,以经受贴吧每天几亿的pv的考验,功能设计应当是最优化的了。 当然随着代码的减少,UM的功能对于UE来说还是有所减少,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。

百度UEditor界面

二、xhEditor开源HTML编辑器

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编辑器

KindEditor 也是一个开源的在线HTML编辑器, 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。本菜鸟感觉这个编辑器上手比较容易,功能也很强大,界面比较友好,很适合菜鸟使用。可惜的是最近好像停止更新了,官网好象也能不正常访问。

KindEditor界面

主要特点:

  • 快速:体积小,加载速度快

  • 开源:开放源代码,高水平,高品质

  • 底层:内置自定义 DOM 类库,精确操作 DOM

  • 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

  • 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

  • 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

四、阿里的KISSY

严格来说,KISSY不仅仅是一个在线HTML编辑器,而是由阿里集团前端工程师们发起创建的一个开源 JS 框架,具有跨终端、模块化、使用简单的特点。里面带有HTML编辑器这个模块。

阿里的KISSY

正因为KISSY采取模块化设计,因此具有高扩展性、组件齐全,接口一致、自主开发、适合多种应用场景等优点。KISSY 除了完备的工具集合诸如 DOM、Event、Ajax、Anim 等,KISSY 还面向团队协作做了独特设计,提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架,KISSY还 为移动终端做了大量适配和优化,搞移动web开发的可以好好研究一下KISSY的运用


关于菜鸟手记:

菜鸟最怕就是看大神的攻略,全是术语看头就头大!本人作为一名对啥都感兴趣的资深菜鸟,潜心研究各类技术二十余年,做网站、写程序、搞美工、练书法、学画画、作文章、抓管理、装逼格,属于搞IT里面最懂美工的,搞HR里面最懂画画的,搞文字里面最懂程序的,最终一事无成,博而不精,徒留一堆手记。从菜鸟角度写手记,同样的”白”更易懂,你值得拥有!感兴趣的,请别忘点右角关注菜鸟手记。

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 编辑器,以便用户可以直接在网页上编辑 HTML 内容,以下是几个备受推荐的:

  1. CKEditor:CKEditor 是一个功能强大的、开源的富文本编辑器,可以嵌入到网页中使用。它具有丰富的功能,包括格式化文本、插入图像、创建链接等,而且支持自定义配置和插件扩展。
  2. TinyMCE:TinyMCE 是另一个流行的富文本编辑器,适用于嵌入到网页中。它提供了类似于桌面文本编辑器的功能,支持自定义按钮、插件扩展等,并且易于集成到网页中。
  3. Quill:Quill 是一个现代化的富文本编辑器,具有简洁的界面和丰富的功能。它支持实时协作编辑、嵌入式图片、拖放等特性,并且提供了灵活的 API,可以轻松地集成到网页中。
  4. Froala Editor:Froala Editor 是一个功能强大的富文本编辑器,提供了许多高级功能,如代码编辑器、图片编辑器、嵌入式多媒体等。它具有漂亮的界面和良好的性能,并且可以通过 API 定制和扩展。
  5. Summernote:Summernote 是一个简单易用的富文本编辑器,具有轻量级和快速启动的特点。它支持响应式设计、自定义按钮、插入代码等功能,并且可以通过简单的配置集成到网页中。

这些富文本编辑器都具有不同的特点和优势,您可以根据自己的需求和偏好选择适合您的编辑器。它们通常都提供了丰富的文档和示例代码,方便您进行集成和定制。