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 NoCodeFormat. -- 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.