Simple Jquery editor to edit HTML5 text and save with ajax. Inline editing with jQuery and PHP Jquery text editor

As you know, inline editing, or in other words, the ability to edit content directly on the page, is a very useful thing that should always be at your fingertips. I will tell you how it all works, and also show you how with using PHP instantly update the edited part on the page, and how to make all the changes to the database.

Code

Now I'll explain what inline editing is all about.

On the Demo page, you will see a block with some text. Hover your cursor over any part of this block and you will see a small edit icon. It looks like a Facebook icon.

If you click inside the block with the text or on the icon itself, the block will be replaced with the textarea form, and the save and cancel buttons will appear at the bottom.

Now in more detail

I used binding and unbinding. In simple words, we can bind a mouse click event to the element. Conversely, you can “take away” this event from an element. It's pretty simple. In the 9th line of the code below, we assign a click event to all elements with the “inlineEdit” class, and assign the “updateText” function to the handler. This means that every time you click inside the "inlineEdit" block, the "updateText" function will run. This function replaces a block of text with the form textarea.

Now let's look at the save function. It will run only when you click on the “Save” button. Here we just push the edited text into a variable and run it through the update.php file. You will notice that while the update is in progress, a download icon is displayed. We will also display a response message from the PHP page. Finally, we will remove the “selected” class from the element and then insert the updated text from the textarea, entered by the user, into the div block.

The cancel function will run when the element with the .revert class is activated. This function simply removes the “selected” class as in the previous function, but inserts the original text into the div, not the edited text.

$ (document) .ready (function () (function slideout () (setTimeout (function () ($ ("# response"). slideUp ("slow", function () ());), 2000);) $ (".inlineEdit"). bind ("click", updateText); var OrigText, NewText; $ (". save"). live ("click", function () ($ ("# loading"). fadeIn (" slow "); NewText = $ (this) .siblings (" form "). children (". edit "). val (); var id = $ (this) .parent (). attr (" id "); var data = "? id =" + id + "& text =" + NewText; $ .post ("update.php", data, function (response) ($ ("# response"). html (response); $ (" #response "). slideDown (" slow "); slideout (); $ (" # loading "). fadeOut (" slow ");)); $ (this) .parent (). html (NewText) .removeClass ( "selected"). bind ("click", updateText);)); $ (". revert"). live ("click", function () ($ (this) .parent (). html (OrigText) .removeClass ("selected"). bind ("click", updateText);)); function updateText () ($ ("li"). removeClass ("inlineEdit"); OrigText = $ (this) .html (); $ ( this) .addClass ("selected"). html ("

"+ OrigText +" "

") .unbind (" click ", updateText);)));

PHP

Html

HTML is very simple and consists of a single list item with the class “inlineEdit”, which makes it editable. You can add as many editable elements as you like to the page, but remember to assign a unique ID to each one.

jQuery Inline-Edit

Click the text below to edit it.

• Lorem Ipsum ....

Looking for free to use rich text editors? If so, then you are lucky to be on the right page. In this review, we bring you 10 great free Rich-Text editors. Rich text editors allow you to edit and type from a web browser. They are used in different ways, providing the user with the ability to post generated and formatted content by him.

We hope our list will offer you the really best solutions. Feel free to share it with your friends, and with us your opinions on this collection. Here is a complete list.

Happy viewing!

CKEditor is a free open source HTML text editor designed to make it easier for you to fill your website with content. A WYSIWYG editor that gives you access to familiar word processor functions right from the web. Enhance your website experience with this community-powered editor.

markItUp! Not conceived as an always-ready-and-of-all-trades editor. On the contrary, it is a very compact, flexible in configuration and operation service that can serve a developer when debugging his CMS, blogs, forums or websites. markItUp! is not a WYSIWYG editor and never will be.

NicEdit- compact, cross-platform, embeddable content editor for varying website content easily and simply right in the browser.

TinyMCE is an off-platform javascript / HTML WYSIWYG editing console released as an open source web-based resource and protected by the LGPL. TinyMCE can convert HTML TEXTAREA fields and other HTML elements into edit units.

Free cross-platform WYSIWYG editor packed with all the rich text editing features you need to dramatically improve your content management system.

jQuery TE is a jQuery module. Compact (19.5 Kb) and very easy to use HTML editor. Works according to WYSIWYG scheme.
Most importantly, it can be embedded in your system in just 1 minute. And its interface can be modified as you like. Even CSS classes can be replaced.

Looking for a no-nonsense Rich-Text text editor for jQuery resources? You have come to the right place!

A simple, compact, extensible jQuery-based HTML editor that works in a WYSIWYG manner. A facility to easily display a WYSIWYG HTML editor in place of any TextArea DOM element within the page. The lightweight script "weighs" 9.17 Kb; CSS with pictures together "pull" 25.9 Kb.

uEditor flexible and easy to use. Produces a clear, workable code (albeit one that requires certification in the prescribed manner), among other things, you can use your own style sheet to work in WYSIWYG mode. The functionality of the service can be further enhanced thanks to an easy-to-use system of additional modules.

With Whizzywig, it's simple. Allows you to compose rich formatted text in a web window. He's actually writing in XHTML, but you don't need to know HTML to use it. If you know how to use a word processor or e-mail, then you can do it too.

I was looking for a visual editor that was pleasing to the eye so that I didn't have to redo the design and waste time. In the process, I found and tested several visual editors. Installing visual editors on a site presents a simple system of actions. It is necessary to put a number of requests for scripts in the HEAD tag (after uploading the entire folder with the visual editor to the server). The downloaded files usually provide a demo version of use, it is from the code of this page that you can easily get the names of the scripts you need. Here is a small code used in the BODY page for direct use of the editor. We will place it in the place in the html-form where we need it.
Visual editors are divided into views using different processing. So, I met visual editors based on jQuery, MooTools, ActiveX and just JavaScript.

Visual editors using MooTools
I came across some very interesting visual editors based on this technology. However, due to incompatibility with jQuery scripts already used on the site for other needs, I continued to search for something more universal.

MooEditable visual editor example using MooTools

Scripts Inserted Between Tags<HEAD>HEAD>:

Use in

Textarea 1 —Here is the text written in a visual editor—

The standard form tag TEXTAREA is used here, which will make the input field workable even if disabled
JavaScript for the user (although all options of the visual editor will not work).
Download visual editor MooEditable

Example ggEdit, a visual editor based on MooTools
In FireFox, this visual editor ("ggEdit") refused to work at all. As a Mozilla user, this didn't suit me at all.
However, I liked the interface of such a visual editor (example "ggEdit" (the source can be downloaded)).

JQuery based visual editors
This visual editor (WKRTE) would probably be nice if the modular windows (image insertion, links) didn't pop up outside the screen frame
Example WKRTE, jQuery based visual editor:

It is noteworthy that the main scripts are not inserted in … where basically style requests (CSS):

The main scripts will appear before the closing tag:

<BODY>

--Some content--

Visual editor AJAX, jQuery, JavaScript

This visual editor ("CKEditor") uses a rich palette of technologies in its use cases. Although AJAX here performs rather auxiliary - rather than key - functions of the visual editor. Main library: jQuery, JavaScript.
I didn’t carry out rigorous testing for cross-browser compatibility, but in my browsers it works with a bang, which could not but rejoice. An additional plus is the Russian language!

Scripts: may be different. One example:

Main library in HEAD:

<HEAD>

HEAD>

<BODY>

--Some content--

Very often, in the process of editing site content, it is necessary (and also very convenient) to see the finished result on the browser page. Using the HTML5 tags property - contenteditable, Jquery, Ajax and PHP, let's create a simple HTML5 text editor for the site.

Our editor will have the following properties:
- when you click on the text intended for editing, this text can be edited immediately;
- when you press the Escape key after editing the text, all changes to the current text are canceled;
- if you lose focus, or click to edit another text, the changed text is sent to the server, a message is displayed about the status of the server sending and responding.

Below is the HTML code of the page being edited:

As you can see, each editable text is enclosed in a tag with the enabled property contenteditable- a feature of HTML5 that allows you to edit text directly in the browser. To save on the server, you need to accurately identify the edited text, so our id contains the material identifier and the database field, separated by an underscore, for example - id = "item1_title".

In the header of our page, include style.css and jquery:

We accept our edited text on the server - file save.php

Our editor is especially convenient for tabular data (for example, price), where text design is not needed, but it is necessary to quickly correct or add new data (we will modernize the script). For myself, I am modifying the script to add, fill in the product database. Filling in the database in this way will be as convenient as in Excel, to which we are so accustomed.

Give users the opportunity formatting text without learning additional code is something that developers have been working hard on for the past few years. And all is not in vain, they have already made significant progress. Here are the 10 most used WYSIWYG editors... We hope you find something for your own projects.

01. NicEdit

NicEdit is a great alternative to large and unwieldy editors. It includes all the required functions, but remains very easy to integrate into the site.

02. TinyMCE

TinyMCE is a free javascript HTML WYSIWYG editor. It is easy to integrate into your site and provides a wide range of customization and appearance options. TinyMCE is probably the most "complete" editor in our collection today. Almost MSWord.

03. CKEditor

CKeditor Is the new FCKEditor, which has earned the title of market leader early on. The editor is developed on its basis, and is aimed at fixing what problems were encountered in FCKEditor. The result is a highly productive WYSIWYG editor that offers all the features you would normally use in MSWord or Open Office.

04. YUI Rich Text Editor

YUI Rich Text Editor Is a graphical user interface from Yahoo that turns a simple text input field into a full-fledged WYSIWYG editor. The application is provided in different versions, with different properties and content. But using any of the versions, you will get all the functions you need for the editor.

Markitup Is a jQuery plugin that allows you to turn a regular text input field into a tag and formatting editor. Html, Wiki and BBcode are just a few of what the plugin offers. Markitup is not a WYSIWYG editor, but that doesn't make it any worse as it offers you all the functionality you need.

06. FreeTextBox

FreeTextBox is an HTML editor designed specifically for ASP.NET. The appearance of the editor is very similar to Microsoft Word. The free version doesn't really have a lot of features, but it does have everything you need.

07. MooEditable

WYSIWYG editors, for the most part, now provide plugins for the popular jQuery library, and in less cases, Mootools. MooEditable bridges the gap quite well with a simple but highly efficient JavaScript library. If you are a fan of Mootools, then you will have no problem with it.

08. OpenWysiwyg?

OpenWysiwyg Is a cross-browser full-fledged editor with all the required features. It even includes attractive dropdown menus and buttons. Unfortunately Chrome won't support it.

09. Spaw Editor- the site is dead

Spaw Editor Is a WYSIWYG editor that allows website developers to replace standard text fields with a manageable HTML editor, with a wide range of settings, in many languages, and with the ability to change the look and feel.

10.jHtmlArea

jHtmlArea Is another WYSIWYG text editor that is a plugin for Jquery. The goal of the plugin is simplicity and ease of use. It includes all the required functions. You can customize the look, functionality, and languages.