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

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;
- when 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 sending and server response.

Below is the HTML code of the edited page:

Simple jquery script to edit HTML5 text and save it with ajax

Demonstration of work editable HTML5 text, followed by passing and writing via Jquery-Ajax-Php-mysql.

An example of editable html text 5. Click on any text to edit it. To record, simply click the mouse to another location or the save button.

As you can see, each editable text is enclosed in a tag with the property enabled contenteditable- an HTML5 feature 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, we include style.css and jquery:

Simple jquery script to edit text and save with ajax

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

Our editor is especially convenient for tabular data (for example, a price list), where text design is not needed, but you need to quickly correct or enter new data (we will modernize the script). For myself, I am modernizing the script in order to make, fill in the database of goods. Filling the database in this way will be as convenient as in Excel, which we are so used to.

Despite the fact that WYSIWYG and Markdown visual editors are limited compared to source code editors, they can make editing the basic content of a page much easier. Therefore, in this post we have collected the best WYSIWYG and Markdown visual editors content that can be used in both backend and frontend website development.

ContentTools

Most original text from this collection. However, it is not suitable for all projects due to its specificity.

ContentTools is embedded within the content page itself. To start editing it, you need to click on the corresponding icon, after which it will appear content editing panel. This is very convenient, because when creating a material, we immediately see how it will look on the page.

Personally, it seems to me that he is remotely similar to Evernote editor, but with a different toolbar.

AlloyEditor

Visual content editor AlloyEditor is based on the popular CKEditor. He is very similar to Medium editor and has quite a wide range of functions, such as: Drag&Drop image loading, various toolbar styles, etc.

This is an editor that is really nice to use.

SimpleMDE

The syntax of Markdown is quite difficult for the average user to understand, whose goal is simply to add content to the page. The developers of SimpleMDE tried to make Markdown editor so that anyone can work in it, even without special technical knowledge.

Substance

Substance is simple visual content editor in JavaScript. Any user who decides to add content to your site can easily work with it.

Editor.md

Embedded online markdown editor open source. For ease of use, it is divided into two parts. On the left is the traditional Markdown markup, and on the right is the visual representation of the content.

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'll explain how it all works, as well as show how to instantly update the edited part on the page using PHP, and how to apply all changes to the database.

The code

Now I'll explain what exactly is inline editing.

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

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

Now more

I used bind and unbind. In simple terms, we can bind a mouse click event to an element. And vice versa, you can “take away” this event from the element. Everything is 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 as 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 consider the save function. It will only run when you click on the “Save” button. Here we are simply putting the edited text into a variable and running 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. At the end, we will remove the “selected” class from the element and then paste the updated text from the textarea entered by the user into the div.

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

$(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("

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

PHP

HTML

The HTML is very simple and is a single list item with the class “inlineEdit”, which makes it editable. You can add as many editable elements to the page as you like, but don't forget to give each of them a unique ID.

jQuery Inline-Edit

Click the text below to edit it.

Lorem Ipsum....

Looking for free to use rich text editors? If yes, then you are lucky to have landed 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 text from a web browser. They are used in different ways, providing the user with the ability to post content generated and formatted by him.
We hope our list will offer you really the best solutions. Feel free to share it with your friends, and with us your opinions about this collection. Here is the complete list.
Happy viewing!
CKEditor is a free and open source HTML text editor designed to make it easier for you to fill a website with content. WYSIWYG editor that gives you access to familiar word processor features directly from web pages. Enhance your website experience with this community-driven editor.
markItUp! not designed as an "always-ready-and-all-hands" editor. On the contrary, it is a very compact, flexible in configuration and operation service that can serve the developer when debugging his CMS, blogs, forums or websites. markItUp! is not a WYSIWYG editor and never will be.
NicEdit- a compact, cross-platform, embeddable content editor for varying the content of the website 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 handy HTML editor. Works according to the WYSIWYG scheme.
And most importantly, it can be introduced into 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-frills Rich-Text text editor for jQuery resources? You've come to the right place!
A simple, compact, extensible jQuery based WYSIWYG HTML editor. A means to easily display a WYSIWYG-HTML editor in place of any TextArea DOM element within a page. Lightweight script "weighs" 9.17 Kb; CSS with images together "pull" 25.9 Kb.
uEditor flexible and easy to use. Produces clear, workable code (albeit one that needs to be certified 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 easy. Allows you to compose "rich" formatted text in the web window. It actually writes in XHTML, but you don't need to know HTML to use it. If you know how to use a word processor or email, then you can handle it.