整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
说得简单点，在线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里面最懂画画的，搞文字里面最懂程序的，最终一事无成，博而不精，徒留一堆手记。从菜鸟角度写手记，同样的”白”更易懂，你值得拥有！感兴趣的，请别忘点右角关注菜鸟手记。
inymce是一个免费的WYSIWYG HTML编辑器，由JavaScript写成。它是一个根据LGPL license发布的自由软件。Tinymce可以将文本区转换为富文本HTML编辑器，并可以嵌入到PHP脚本。
NicEdit是一款轻量级的、跨平台的编辑器，具有强大的功能来编辑HTML内容。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。
Free BBCode Editor是一款免费的WYSIWYG BBCode编辑器，可以插入到任何PHP脚本中。
OpenWebWare是一个跨浏览器，纯JavaScript开发，强大开源的WYSIWYG编辑器。支持多种浏览器和Web编程语言：PHP，ASP，ASP.net，Perl，Java，Cold Fusion。
Wyzz是一款基于GPL的免费WYSIWYG编辑器。
widgEditor是一款轻量的、快速加载的富文本HTML WYSIWYG编辑器。它根据LGPL license发布。 widgEditor编辑器的外观是比较个性的，尤其是文本域上边的控制按钮，比较与众不同。
MarkitUp是一个轻量级，可定制，灵活的WYSIWYG Editor，可实现非常强大的在线文本编辑器功能。可支持html、Wiki、BBScode等编辑格式，具体很强的扩展性，使用非常方便。
TextAreaRich是一款免费的、基于JavaScript的WYSIWYG编辑器 .它可以集成到Web应用程序的PHP或ASP脚本中。
WYMeditor 是一个开源的、基于Web浏览器的可视化HTML编辑器。
本站文章除注明转载外，均为本站原创或翻译
天继续推荐提高我们摸鱼时间的几个神器，相信我，你会爱上他们的。
地址：https://neumorphism.io/
这个网站为 section 或 div 生成对应UI，它也可以自定义border-radius, box-shadow 等。
地址：https://shadows.brumm.af/
它可以为我们生成多个分层阴影，一种非常酷的效果，也可以从曲线中自定义颜色。
地址：https://bennettfeely.com/clippy/
这个算是我用的最多的，早期录的CSS视频，很多复杂点的效果都是用这个工具帮我生成，前列推荐。
地址：https://9elements.github.io/fancy-border-radius/#30.36.29.30--.
它通过操作 border-radius 生成很 awesome 形状，我们可以在项目中尽情的使用的，通过微调来达到我们想要的形状。
地址：https://cubic-bezier.com/
为 CSS 动画生成cubic-bezier。
地址：https://cssgradient.io/
如果你的项目经常需要使用渐变，那么，你会爱上这个网站。我用了很长时间，它非常完美。在这里你也可以使用一些工具，比如渐变按钮等等。
下面这三个波浪生成器可以生成任何类型的波浪，还在为画破浪而苦恼的小伙伴可以用起来了。
地址：https://getwaves.io/
它能生成简单的波浪，并有一些自定义功能。
地址：https://www.softr.io/tools/svg-wave-generator
它可以产生多个渐变波，非常棒。
地址：https://svgwave.in/
它可以生成多个渐变波浪，但主要特点是它还可以为此生成实时动画。
地址：https://cssgrid-generator.netlify.app/
它为网格生成了很棒的css，你可以用div来定制它，它还会为它创建子元素。
它可以生成网格区域。我们可以根据具体需要来命名和定制区域。
地址：https://loading.io/
这个网站可以生成多个加载动画，并以SVG、GIF、PNG和其他格式下载，但它的最大特点是你可以将这些动画定制到新的水平。
地址：https://www.flaticon.com/
这个库有5.7M+矢量图标。可以在这里找到任何可能的图标，你可以使用它。
地址：https://icons8.com/
这个库也有大量的图标，你可以定制它们，也可以直接使用图标，而无需下载它。
希望你从这篇文章中学到了一些东西，如果有的话，请来波赞被。
~~完，我是刷碗，励志等退休后，要回家摆地摊的人，我们下期见！
作者：Jatin Sharma 译者：前端小智 来源：dev 原文：https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6
*请认真填写需求信息，我们会在24小时内与您取得联系。
