10款优秀的Rich Text Editor

Introduction

Javascript rich text editor has ease our life when we need to edit articles, post or even documents online. Most of the editors allow user to edit the content straight away (What You See Is What You Get - WYSIWYG), it just like editting a document with microsoft office. Nowadays, I think all of the content management system, blog systems are using rich text editor.

LATEST VERSION: You can read our latest post about rich text editors:10 Feature Packed Javascript WYSIWYG and Rich Text Editors

Sponsor: SentionalJobs

Browse through dozens of job offers for web professionals including design jobs and tech jobs

So, here are the 10 RTEs that I can find online. From the most basic support of font formatting to advanced features such as image upload, table creation, ajax support and so on. Be sure to drop me a comment if you know other RTE that is not listed below. Enjoy.

Advertisement

MarkitUp - jQuery

Official Website
 | 
Demo

markItUp! is not meant to be a "Full-Features-Out-of-the-Box"-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer‘s needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.

  • Fast and unobtrusive integration
  • Support for keyboard shortcuts
  • Ajax dynamic preview
  • Supported: IE7, Safari 3.1, Firefox 2, Firefox 3. IE6 and Opera 9+ as-is.
  • Licence: MIT/GPL
  • File: Packed naked engine is about 6.5Kb.

jWYSIWYG - jQuery

Official Website
 | 
Demo

This plugin is an inline content editor to allow editing rich HTML content on the fly. It‘s an alternative to WYMeditor with much less features. With a small file size less than 17Kb 26Kb total and only 9Kb 18Kb of code and 7Kb packed, the main concept is to keep it simple, not all users need font coloring or create tables, just the basic.

  • GNU General Public License v2
  • Compact and lightweight
  • Ajax dynamic preview
  • Browser friendly

Lightweight RTE- jQuery

Official Website
 | 
Demo

I have made this Rich Text Editor as simple as possible to be easily changed according your needs.

  • Super lightweight 7kb uncompressed
  • Compatible with major browsers
  • Degrade gracefully
  • GNU General Public License

HTMLBox - jQuery

Official Website
 | 
Demo

Cross-browser interactive open-source HTML / XHTML textarea built on top of the jQuery library. Tested with Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari. The integration of HtmlBox into Content Manegement Systems, Forums, Guest Books, Contact Forms is as easy as a childs play.

  • Easy Integration.
  • Multiple Browser Support.
  • Small Size. Size of 15kb (11kb minimized)
  • XHTML Output Possible.
  • Ajax Integration Supported.
  • User Manual. A complete user manual, that will guide you through every step of integrating HtmlBox into your application and customizing it.

D Small Rich Text Editor - jQuery

Official Website
 | 
Demo

This piece of code creates a Rich Text Editor ("RTE") from an IFRAME element. Yes, I know, there are tens of such scripts, and most of them are probably more sophisticated than mine, but my script‘s purpose is to provide enough basic functionality while having the smallest footprint possible.

  • Small (~18k) footprint! (Packed/Minified JS, Plugins & CSS sum to 12k w/o GZIP, HTML can be reduced to ~3k using GZIP, Images (w/o emoticons) are less than 3k)
  • Cross-browser
  • All basic Rich Text functionality
  • Plugin-enabled
  • Image Upload via AJAX (using the AjaxFileUpload plugin).
  • Resizing of text area.
  • Valid XHTML 1.0 Transitional markup (Note: this refers to the editor‘s markup and not to it‘s generated content which may or may not be valid!).
  • HTML Cleanup

WYMEditor - jQuery

Official Website
 | 
Demo

WYMeditor is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor. WYMeditor‘s main concept is to leave details of the document‘s visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).

  • XHTML strict + CSS compliant
  • No font or text formatting, sizes or colors - WYMeditor is CSS-based
  • Designed to be easy to integrate into your application
  • No installation needed - this is 100% Javascript code - no plugin, no extension
  • Image, link, table support
  • Skins support via CSS
  • APIs, plugins support
  • Free and Open Source
  • Major browsers support

TinyMCE - non-jQuery

Official Website
 | 
Demo

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

  • Easy to integrate - Only a few lines of code needed.
  • Customizable - Themes and plugins, block invalid elements and force attributes.
  • Browserfriendly - Mozilla, MSIE, FireFox, Opera, Safari and Chrome.
  • Lightweight - PHP/.NET/JSP/Coldfusion GZip compressor, Makes TinyMCE 75% smaller and a lot faster to load.
  • AJAX Compatible - You can easily use AJAX to save and load content!
  • International - Multilanguage support using language packs.
  • Open Source - Free under the LGPL license, millions of ppl help test and improve this editor every day.

fckeditor - Non-jQuery

Official Website
 | 
Demo

This HTML text editor brings to the web much of the power of desktop editors like MS Word. It‘s lightweight and doesn‘t require any kind of installation on the client computer.

  • Multi browser compatibility
  • Outputs XHTML 1.0
  • CSS support for better integration with your web site
  • Font formatting: type, size, color, style, bold, italic, etc
  • Text formatting: alignment, indentation, bullets list, etc
  • Cut, Paste, and Paste as Plain Text, Undo and Redo
  • Paste from Word cleanup with auto detection
  • Image insertion, with upload and server browsing support
  • Right click context menus support
  • Plugins support
  • Spell checker
  • Lightweight and fast
  • Automatic browser detection and customization

Yahoo YUI Rich Text Editor - Non-jQuery

Official Website
 | 
Demo

The Rich Text Editor is a UI control that replaces a standard HTML textarea; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor‘s toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.

Xinha - Non-jQuery

Official Website
 | 
Demo

Xinha (pronounced like Xena, the Warrior Princess) is a powerful WYSIWYG HTML editor component that works in all current browsers. Its configurabilty and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor. Its liberal, BSD licence makes it an ideal candidate for integration into any kind of project.

Conclusion

I hope you all love this resource. :)

时间: 2024-10-13 22:00:26

10款优秀的Rich Text Editor的相关文章

精心挑选10款优秀的 jQuery 图片左右滚动插件

在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQuery Slider 中挑选出适合自己的插件也是需要一些时间的.因此这篇文章给大家挑选了10款优秀的 jQuery Slider 插件,希望能帮助到你. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 精选12款优秀 jQuery Ajax 分页插件和教程 10大流行的 M

给你推荐10款优秀的 HTML5 动画工具

HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Safari 等许多现代浏览器都已经支持.今天,我们列出了10个优秀的 HTML5 动画制作工具,可以帮助你的工作. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读精华文章推荐 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!1

10 款优秀的文件管理插件推荐

本文整理了10款优秀的文件管理插件,这些插件基于jQuery.AJAX和PHP,你可以轻松进行定制并加入到自己的项目中.通过它们,你和用户可以通过浏览器来预览.上传.修改文件和文件夹. 1. elFinder 基于web的简单文件管理器. 源码 + 演示 2. jQuery File Tree 一个基于jQuery的.可配置的AJAX文件浏览插件.你最少只需一行JavaScript代码,即可创建一个自定义的.完全交互式的文件树. 源码 / 演示 3. jquery-filemanager 轻松管

HTML5 常用10款优秀的工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式.今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写HTML5应用. 1.Initializr Initializr是制作HTML5网站最好的入门辅助工具,你可以使用提供的特色模板快速生成网站,也可以自定义,Initializr会为你生成代码简洁的可定制的网页模板. 2.HTML5demos 想知道你的浏览器是否支持HTML5

DevExpress ASP.NET Core v19.1版本亮点:Rich Text Editor

行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Core Controls v19.1中新增的一些控件及增强的控件功能,欢迎下载v19.1试用,点击立即下载>> Pivot Grid 新的富文本编辑器 全新的ASP.NET Core Rich Text Editor附带了您在ASP.NET Core应用程序中快速合并高级文本编辑功能所需的一切. 其功能包括: 文件导入/导出(docx,rtf,txt)

10款优秀Vim插件帮你打造完美IDE

导读 如果你稍微写过一点代码,就能知道“集成开发环境”(IDE)是多么的便利.不管是Java.C还是Python,当IDE会帮你检查语法.后台编译,或者自动导入你需要的库时,写代码就变得容易许多.另外,如果你工作在Linux上,你也会知道Vim在进行文本编辑的时候是多么的方便.所以,你可能会想从Vim中也获取这些IDE特性. 事实上,很少有方法可以帮你做到.有些人可能会想到试着把Vim打造成C语言IDE的,比如c.vim:也有把Vim集成到Eclipse里的 Eclim .但是我想要告诉你的是一

哎呦喂!10款优秀的 HTML5 动画工具

 发表于:2015/7/7  14:57:41 HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Safari 等许多现代浏览器都已经支持.今天,我们列出了10个优秀的 HTML5 动画制作工具,可以帮助你的工作. ™1.Createjs Createjs是与HTML5 canvas元素工作的JavaScript库.该工具是最出名的是创造游戏,生成艺术

创建响应式布局的10款优秀网格工具集锦

在这篇文章中,我们为您呈现了一组优秀的网格工具清单.如果我们错过了任何没有列出在这个清单上的东西,请分享给我们.如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务. 1.Bootstrap 这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备.最新的 Twitter Booststrap 包含四层网格类??——

On-Line Rich Text Editor.

2017年,共享经济持续成为大众关注的焦点,从共享单车.共享雨伞.共享充电宝,到共享电动车.共享汽车.共享床位,甚至连女友都拿来共享了.戴上"共享"高帽的创业项目一茬接一茬地冒出来,正如收割的韭菜,最开始两茬是最嫩的,接下来生长出来的则会让人觉得食之无味又弃之可惜.对于投资人如此,对于用户们来说有何尝不是呢? 让我们盘点下近一年出现过的"共享"明星们,对于它们,死亡还是生存?这是个问题. 据统计,2016年中国的共享经济市场规模接近4万亿元:2017年,共享系宣告进