목차 만들기 애드온을 만들려고 하는데요

게시물 본문에 있는 h2 ~ h6 태그를 수집해서, 게시물 상단에 목차를 뿌려주는 스크립트를 짰습니다.

관리자 계정으로 들어가서 게시판 본문에 스크립트를 삽입하는 형식으로요.

일단은 잘 됩니다.ㅎㅎ

스크립트는 대략 이렇습니다.

(function($) {
    var x = $('.xe_content:first');
    if(x.find('h2').length) {

        var ToC =
            '<nav class="ap-toc">' +
                '<p><strong>Table of Contents</strong></p>' +
                '<ul>';
        $('article h2').each(function(){
            var e2 = $(this),
                t2 = e2.text();
            ToC +=
                '<li>' +
                    '<a href="#">' + t2 + '</a>';
            if(e2.nextAll('h3').length) {
                ToC += '<ul>';
                e2.nextUntil(e2.nextAll('h2'), 'h3').each(function(){
                    var e3 = $(this),
                        t3 = e3.text();
                    ToC +=
                        '<li>' +
                            '<a href="#">' + t3 + '</a>';
                    if(e3.nextAll('h4').length) {
                        ToC += '<ul>';
                        e3.nextUntil(e3.nextAll('h3'), 'h4').each(function(){
                            var e4 = $(this),
                                t4 = e4.text();
                            ToC +=
                                '<li>' +
                                    '<a href="#">' + t4 + '</a>';
                            if(e4.nextAll('h5').length) {
                                ToC += '<ul>';
                                e4.nextUntil(e4.nextAll('h4'), 'h5').each(function(){
                                    var e5 = $(this),
                                        t5 = e5.text();
                                    ToC +=
                                        '<li>' +
                                            '<a href="#">' + t5 + '</a>';
                                    if(e5.nextAll('h6').length) {
                                        ToC += '<ul>';
                                        e5.nextUntil(e5.nextAll('h5'), 'h6').each(function(){
                                            var e6 = $(this),
                                                t6 = e6.text();
                                            ToC +=
                                                '<li>' +
                                                    '<a href="#">' + t6 + '</a>' +
                                                '</li>';
                                        });
                                        ToC += '</ul>';
                                    }
                                    ToC += '</li>';
                                });
                                ToC += '</ul>';
                            }
                            ToC += '</li>';
                        });
                        ToC += '</ul>';
                    }
                    ToC += '</li>';
                });
                ToC += '</ul>';
            }
            ToC += '</li>';
        });
        ToC += '</ul>' +
            '</nav>';

        x.prepend(ToC);

        $('.ap-toc').css({
            'margin-bottom' : '40px',
            'border' : '1px solid #ccc',
            'padding' : '5%'
        });
        $('.ap-toc ul').css('margin-left', '15px');

        x.find('h2, h3, h4, h5, h6').each(function(i){
            $(this).attr('id', 'section' + i);
        });
        $('.ap-toc ul li a').each(function(i){
            $(this).attr('href', '#section' + i);
            $(this).click(function(e){
                e.stopImmediatePropagation();
            });
        });
    }
})(jQuery);

문제는!!

이걸 애드온으로 만들어보려고 하는데요.

... 잘 안 되네요ㅠ 애드온 만들기 초보자여서;;;

혹시 $called_position이라든지, js 불러올 때 유의해야 할 부분이 있을까요?

애드온 파일은 아래처럼 했는데요.

어떤 문제가 있는지 잘 모르겠어요.

도움 부탁 드립니다;;;

<?php
if(!defined('__XE__')) exit();

if($this->module == 'board' && $called_position == 'before_display_content' && Context::getResponseMethod() == 'HTML' && $this->act != 'dispBoardWrite')
{

    Context::loadFile(array('./addons/ap_table_of_contents/js/ap_table_of_contents.js', 'body', '', null), true);

}