Javascript editor and code formatting on web pages_javascript tips

Why not use textarea?

1 No highlighting

2 The tab key cannot be used. ——Pressing the tab key will switch to the next control

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

Of course, I’m not strong enough to realize it myself, and I can think with my toes that someone must have realized it. I’ll just see if I can find it.

After a difficult search, I finally found a project called EditArea on SourceForge, which feels good. http://sourceforge.net/projects/editarea/

The sample is also very clear

Use the following method to construct

Copy the code on the web page The code is as follows:

The code editing box will appear on the page

Able to solve the first and second problems, but still.

So I searched and searched and found this website: http://jsbeautifier.org/. This website has made a js formatting tool, which can even format js code that has been obfuscated by a certain obfuscator.

So I integrated these two things based on the plug-in specifications in the above project. Look at the button in the picture above. After pressing it, it becomes

Look, highlighting and formatting are there.

If you need to download it, you can download it from here (the code formatting plug-in is already included): editarea_0_8_2.zip

For examples, see examplesexample.html

The formatting plug-in is implemented in edit_areapluginsbeautifierbeautifier.js