JavaScript エディターと Web ページのコードの書式設定_JavaScript のヒント

テキストエリアを使用しないのはなぜですか?

1 ハイライトなし

2 Tabキーは使用できません。 ——Tabキーを押すと次のコントロールに切り替わります

3 コードのフォーマットはありません。 ——Eclipse 環境に慣れているため、Ctrl + SHIFT F を使用してコードを整形できます。

もちろん、私は自分でそれに気づくほど強いわけではないので、誰かがそれに気づいているに違いないと足の指で考えることはできますが、それを見つけられるかどうかを確認してみます。

難しい検索の結果、最終的に SourceForge で EditArea というプロジェクトを見つけました。これは良い感じです。 http://sourceforge.net/projects/editarea/

サンプルも非常に鮮明です

次のメソッドを使用して構築します

Web ページ上のコードをコピーします コードは次のとおりです:

<スクリプト言語="Javascript" type="text/javascript" src="../edit_area/edit_area_full.js">
<スクリプト言語= "Javascript" type="text /javascript">
// 初期化
editAreaLoader.init({
id: "example_1" // 変換するテキストエリアの ID
,start_highlight: true / / ハイライトで始まる場合
、allow_resize: "both"
、allow_toggle: true
、word_wrap: true
、言語: "zh" //国際化
、構文: "js" / /コード スタイル、サポート js,php,sql,
//以下はフォーマット サポート
,begin_toolbar: "btn_beautifier,|" //ツールバーを挿入します
,プラグイン: "beautifier" //コントロールを使用します
} );

コード編集ボックスがページに表示されます

最初の問題と 2 番目の問題は解決できますが、まだです。

そこで、探し続けてこの Web サイトを見つけました: http://jsbeautifier.org/。この Web サイトは、特定の難読化ツールによって難読化された JS コードもフォーマットできる JS フォーマット ツールを作成しました。

そこで、上記のプロジェクトのプラグイン仕様に基づいて、これら 2 つを統合しました。上の写真のボタンを押すと、

になります。

ほら、強調表示と書式設定があります。

ダウンロードする必要がある場合は、ここからダウンロードできます (コードフォーマットプラグインはすでに含まれています): editarea_0_8_2.zip

例については、exampleexample.html を参照してください

書式設定プラグインは edit_areapluginsbeautifierbeautifier.js に実装されています