Redmineのプラグイン「view_customize」で書いたHTML、JavaScript、CSSのコードを自動整形させる

6862 ワード
ViewCustomizePlugin Redmine redmine_plugin Redmine テキストリンク

概要

Redmineのプラグイン「view_customize」ではHTML、JavaScript、CSSを使って画面を自由にカスタマイズすることができますが、
そのview_customizeを使ってview_customizeに書いたコードの整形（フォーマット）を行います。

このように書いたコードが、

このように整形された形になります。

view_customize設定

Redmineの構築とview_customizeの導入は完了済みとして進めます。

メニューの管理から表示のカスタマイズを選択して新規で追加します。

パスのパターン：/view_customizes/*

挿入位置：全ページのヘッダ

種別：HTML

コード：

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify-html.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify-html.min.js"></script>

<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.10.2/js/lib/beautify.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.10.2/js/lib/beautify-css.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/v1.10.2/js/lib/beautify-html.js"></script>

<script>
    $(document).ready(function() {
        const code_text = $('#view_customize_code');
        if (code_text[0]) {
            code_text.blur(function() {
                const text = $(this).val();
                let format_text = '';
                const type = $('#view_customize_customize_type').val();
                if (type === 'javascript') {
                    $(this).val(js_beautify(text, {}));
                } else if (type === 'css') {
                    $(this).val(css_beautify(text, {}));
                } else if (type === 'html') {
                    $(this).val(html_beautify(text, {}));
                }
            });
        }
    });
</script>

こんな感じで設定を行なって保存します。

これでコードの入力エリアからフォーカスが外れた時に、自動でコードの整形を行うようになります。

フォーマット処理はCDNで読み込んだjs-beautifyを使っています。
また、種別の値を確認してそれぞれの言語に合わせてフォーマットが行われるようにしています。