Home Web Front-end JS Tutorial 10 WYSIWYG editors based on jQuery or JavaScript_jquery

10 WYSIWYG editors based on jQuery or JavaScript_jquery

May 16, 2016 pm 06:28 PM
javascript jquery editor

When editing content online, those JavaScript-based editors help us a lot. These What You See Is What You Get (WYSIWYG) editors provide us with an Office-like operating experience. Today, any website content management system (CMS) and blogging system requires such an editor. This article selects 5 editors based on JavaScript and 5 editors based on the jQuery framework. MarkitUp – jQuery

Official Website | Demo
MarkitUp

markItUp! It is not a "full-featured, messy" editor. Instead, it is a very lightweight, customizable and flexible text editor to meet the needs of developers, in their CMSes, blogs, forums or websites. markItUp! It is not a WYSIWYG editor, it is a simple and practical text editor. Quick porting and usage Dynamic preview with keyboard shortcuts support Ajax support Compatible browsers: IE7, Safari 3.1, Firefox 2, Firefox 3. IE6 and Opera 9 as-is. License: MIT/GPL File: Portable, Save Resource, only 6.5Kb. jWYSIWYG – jQuery

Official Website | Demo
jWYSIWYG

jWYSIWYG, this plugin is a built-in content editor that allows editing of HTML content. This is a replacement for WYMeditor with a convenient and practical function. File size is less than 17Kb and 26Kb total only 9Kb 18Kb code and 7Kb portable. GNU General Public License v2 Compact and lightweight Supports Ajax dynamic preview Compatible with mainstream browsers Lightweight RTE- jQuery

Official Website | Demo
jWYSIWYG

This rich text editor makes changing our basic editing needs as simple and easy as possible. Super lightweight, only 7kb Compatible with mainstream browsers Simple and elegant GNU General Public License HTMLBox – jQuery

Official Website | Demo
HTMLBox

HTMLBox, a cross-browser, open source jQuery library based on HTML/XHTML text. Passed the test of Mozilla Firefox, Inrernet browser, Netscape and Safari browser. The integrated HtmlBox is easy to integrate into CMS, forums, message boards, and blogs. Easy to integrate Compatible with major browsers. Size is only 15kb (minimum 11kb) Supports XHTML output. Supports Ajax dynamic preview There is 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
D Small Rich Text Editor

A rich text editor that uses IFRAME elements and is very versatile and can meet our complex text editing needs. Size (~18k) ! (Portable/Minified JS, Plugins & CSS combined are 12k w/o GZIP, HTML can be reduced to ~3k using GZIP, Images (w/o emoticons) are less than 3k) Compatible Mainstream browsers support all basic functions and support plug-in function image upload, which is implemented through AJAX (using the AjaxFileUpload plug-in). The text area can be adjusted. Supports XHTML 1.0 validation and filtering (Note: this refers to the editor's markup and not to it's generated content which may or may not be valid!). With HTML correction capabilities WYMEditor – jQuery

Official Website | Demo
WYMEditor

WYMeditor is a web-based WYSIWYM (What You See What You Mean) XHTML editor.The main concept of WYMeditor is to leave the details of the visual layout of the document and focus on its structure and meaning while striving to provide users with a comfortable text editor XHTML strict CSS compliant No fonts or text formatting, sizes or colors – They are based on your css styles for easy integration into your application. No installation required. They are written in 100% Javascript code. No plug-ins, no delays. Supports Image, link, table. Supports CSS. Has APIs, supports free plug-ins. And open source compatible with major browsers TinyMCE – non-jQuery

Official Website | Demo
TinyMCE

TinyMCE is a platform independent, web-based Javascript HTML WYSIWYG editor that is open source. Super powerful HTML text or other element conversion capabilities to edit instances. Easy to integrate - just a few lines of code required Customization - themes and plugins, blocking invalid features and attributes. Compatible with major browsers – Mozilla, MSIE, FireFox, Opera, Safari and Chrome. Lightweight – PHP/.NET/JSP/Coldfusion GZip compressor, Makes TinyMCE 75% smaller and a lot faster to load. Compatible with AJAX- Compatible – You can easily use AJAX to save and load content! Support internationalization – 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
fckeditor

This HTML text editor has features similar to MS Word. It is lightweight and requires no installation Compatible with mainstream browsers Supports XHTML 1.0 You can customize your own CSS font formats: type, size, color, style, bold, italic, etc Text formats: alignment, indentation, bullets list, etc Support Cut, Paste, and Paste as Plain Text, Undo and Redo Paste from Word cleanup with auto detection Supports inserting pictures, uploading, and previewing Right-click drop-down menu Supports plug-ins Intelligent spell checker Lightweight and fast automatic detection and Personalized browser Yahoo YUI Rich Text Editor – Non-jQuery

Official Website | Demo
Yahoo UI RTE

The Rich Text Editor is developed by Yahoo YUI. It can replace standard HTML text; supports text font selection, bold, italics, ordered list, unordered list, link, drag and drop image, toolbar through Plugins are extensible and enable a high degree of personalization. Xinha – Non-jQuery

Official Website | Demo
Xinha

Xinha (pronounced like Xena, the Warrior Princess) is a powerful WYSIWYG HTML editor component that supports all current browsers. Its configurabilty and scalability make it easy to generate suitable content without limitations

Source:http://blog.sn00py.cn/2010/03/10 wysiwyg-editor based on jquery or javascript/

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Introduction to Go language development tools: a list of essential tools Introduction to Go language development tools: a list of essential tools Mar 29, 2024 pm 01:06 PM

Title: Introduction to Go language development tools: List of essential tools In the development process of Go language, using appropriate development tools can improve development efficiency and code quality. This article will introduce several essential tools commonly used in Go language development, and attach specific code examples to allow readers to understand their usage and functions more intuitively. 1.VisualStudioCodeVisualStudioCode is a lightweight and powerful cross-platform development tool with rich plug-ins and functions.

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

Detailed explanation of VSCode functions: How does it help you improve work efficiency? Detailed explanation of VSCode functions: How does it help you improve work efficiency? Mar 25, 2024 pm 05:27 PM

Detailed explanation of VSCode functions: How does it help you improve work efficiency? With the continuous development of the software development industry, developers' pursuit of work efficiency and code quality have become important goals in their work. In this process, the choice of code editor becomes a key decision. Among many editors, Visual Studio Code (VSCode for short) is loved by the majority of developers for its powerful functions and flexible scalability. This article will introduce some functions of VSCode in detail and discuss

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Understanding VSCode: What is this tool used for? Understanding VSCode: What is this tool used for? Mar 25, 2024 pm 03:06 PM

"Understanding VSCode: What is this tool used for?" 》As a programmer, whether you are a beginner or an experienced developer, you cannot do without the use of code editing tools. Among many editing tools, Visual Studio Code (VSCode for short) is very popular among developers as an open source, lightweight, and powerful code editor. So, what exactly is VSCode used for? This article will delve into the functions and uses of VSCode and provide specific code examples to help readers

Discuz Editor: an efficient post layout tool Discuz Editor: an efficient post layout tool Mar 10, 2024 am 09:42 AM

Discuz Editor: An efficient post layout tool. With the development of the Internet, online forums have become an important platform for people to communicate and share information. In the forum, users can not only express their opinions and ideas, but also discuss and interact with others. When publishing a post, a clear and beautiful format can often attract more readers and convey more accurate information. In order to facilitate users to quickly type and edit posts, the Discuz editor came into being and became an efficient post typesetting tool. Discu

Discuz Editor: Powerful web page editing tool Discuz Editor: Powerful web page editing tool Mar 09, 2024 pm 06:06 PM

Discuz Editor: A powerful web page editing tool that requires specific code examples. With the development of the Internet, website construction and content editing have become more and more important. As a common web page editing tool, Discuz editor plays an important role in website construction. It not only provides a wealth of functions and tools, but also helps users edit and publish content more conveniently. In this article, we will introduce the features and usage of the Discuz editor, and provide some specific code examples to help readers better understand and use

See all articles