Javascript editor and code formatting on the webpage

Why not use textarea?

1 not highlighted

2. The tab key is unavailable. -- Press the tab key to switch to the next control.

3. No code for formatting. -- Because you are used to the Eclipse environment, you can use ctrl + shift + F to format the code.

Of course, I am not strong enough to realize it myself, and I can think of someone else with my toes.

After a difficult search, I finally found a project named EditArea on SourceForge. Http://sourceforge.net/projects/editarea/

Its sample is also clear

Construct a Web page using the following methods:

Copy codeThe Code is as follows:
<Script language = "Javascript" type = "text/javascript" src = "../edit_area/edit_area_full.js"> </script>
<Script language = "Javascript" type = "text/javascript">
// Initialisation
EditAreaLoader. init ({
Id: "example_1" // id of the textarea to transform
, Start_highlight: true // if start with highlight
, Allow_resize: "both"
, Allow_toggle: true
, Word_wrap: true
, Language: "zh" // internationalized
, Syntax: "js" // code style, supporting js, php, SQL,
// The following are supported formats.
, Begin_toolbar: "btn_beautifier, |" // insert Toolbar
, Plugins: "beautifier" // use the control
});
</Script>

You can see the code edit box on the page.

 

It can solve the first and second problems, but it can also solve them.

Find this website again: http://jsbeautifier.org /. This website provides a js formatting tool that can even be used to format the JavaScript code obfuscated by a obfuscator.

So I integrated these two things according to the plug-in specifications in the above project. Look at the button shown in the figure above. After you press it, it becomes

Check, highlight, and format.

 

Download the plug-in that already contains the code format: editarea_0_8_2.zip

For an example, see \ exemples \ example.html.

The formatted plugin is implemented in \ edit_area \ plugins \ beautifier. js.