개요

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를 사용합니다.
또, 종류의 값을 확인해 각각의 언어에 맞추어 포맷이 행해지도록 하고 있습니다.