태그 입력폼 엔터 Tab 등등으로 입력하고 예쁘게 하는 방법 팁

톰캣

2022.12.10 09:01

6,832

동영상과 같은 방식으로 작동합니다.

매번 도움만 받다가 저도 조금이나마 기여 해보려고 합니다.

태그 입력을 쉽고 예쁘게 하는방법!!!

정답은 바로 Tagify 플러그인을 사용하는 것 입니다.

게시판 xedition 스킨 기준이나 다른 스킨에서도 일부 css만 수정하면 충분히 작업이 가능합니다.

/modules/board/skins/xedition/write_form.html 의

<input type="text" name="tags" id="tags" value="{htmlspecialchars($oDocument->get('tags'))}" class="iText" style="width:300px" placeholder="태그" title="Tag" />

위 코드를 찾습니다.

저 코드 바로 윗줄에

                   .tagify .tagify__tag-text {
                   white-space: nowrap;
                   }
               </style>

를 삽입합니다.

바로 다음 줄에는 아래의 코드를 삽입합니다.

// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=tags]');

                   // initialize Tagify on the above input node reference

                   var tagify = new Tagify(input, {
                   originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
                   })

                   // bind "DragSort" to Tagify's main element and tell
                   // it that all the items with the below "selector" are "draggable"
                   var dragsort = new DragSort(tagify.DOM.scope, {
                       selector: '.'+tagify.settings.classNames.tag,
                       callbacks: {
                           dragEnd: onDragEnd
                       }
                   })

                   // must update Tagify's value according to the re-ordered nodes in the DOM
                   function onDragEnd(elm){
                       tagify.updateValueByDOMTags()
                   }

                   // listen to tagify "change" event and print updated value
                   tagify.on('change', e => console.log(e.detail.value))
               </script>

최종 소스는

                   .tagify .tagify__tag-text {
                   white-space: nowrap;
                   }
               </style>
               <input type="text" name="tags" id="tags" value="{htmlspecialchars($oDocument->get('tags'))}" class="iText" style="width:300px" placeholder="태그" title="Tag" />
               <script src='https://unpkg.com/@yaireo/tagify'></script>
               <script src='https://unpkg.com/@yaireo/dragsort'></script>
               <script>
                   // This demo is using "dragsort" lib (by myself)
                   // https://github.com/yairEO/dragsort

// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=tags]');

                   // must update Tagify's value according to the re-ordered nodes in the DOM
                   function onDragEnd(elm){
                       tagify.updateValueByDOMTags()
                   }

                   // listen to tagify "change" event and print updated value
                   tagify.on('change', e => console.log(e.detail.value))
               </script>

가 됩니다.

이제 실행 해보면 css가 일부 중복되는것이 있습니다. 저는 과감히 제거 해 주었습니다.

<label for="tags" class="iLabel">{$lang->tag}: {$lang->about_tag}</label>

바로 윗줄의 이부분을 제거하고

board.default.css의 아래 부분을 제거 하였습니다.

.read_footer .tags {
   display: inline-block;
   height: 16px;
   font-size: 11px;
   color: #666;
   vertical-align: top;
   padding: 0 15px 0 32px;
   line-height: 16px;
   background: none;
}

그러면 동영상과 같은 태그 입력이 가능해 집니다

단점1. 태그 입력 필수 애드온이 설치 되어있으면

태그 입력이 안되어있으면 아무 반응이 없음. 태그를 입력해도 얼럿창이 뜨고 글이 써짐 (방법 찾아볼게요)