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

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

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

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

정답은 바로 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. 태그 입력 필수 애드온이 설치 되어있으면

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

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

LOGIN