질문/조언질답게시판

해당 모듈을 구입하고 저희 사이트에 서비스를 제공한 이유가 자동완성 기능 때문이었습니다.

 

멘션,해시태그 2개가 자동완성으로 제시됩니다.

 

그런데 사용하기에 정말 골치아픈 문제가 있습니다.

글 작성시 에디터에서 자동완성을 보여주기 위한 태그가 사용에 따라 제거되지 않고 함께 저장되어 버리는 경우가 많습니다.

 

<span class="atwho-query">#</span>우유 개껌 줘도 되나요?

 

저 span 자체가 사라져야 하는데 깜빡했다가 단어에 다시 #을 붙인다거나 글을 모두 쓰고나서 단어에 나중에 #을 붙아려 하는다양한 케이스에 저 span이 사라지는 동작 없이 글이 저장되게 됩니다.

 

문제는 저 상태에서는 해시태그 애드온에 의해 링크를 걸어주지 못합니다.

그래서 저 태그를 글 작성시점에 제거가 되길 요청을 지속적으로 드렸으나 2년이 다 되어가도 해결이 되지 않아 사실 지금 저 기능 때문에 오히려 태그라는 것을 식별해주는 기능에  지장을 많이 주고 있습니다.

 

이왕 구입한 모듈이니 사용은 해야 하는데 참 어렵네요.

 

 

다시 해시태그애드온으로 넘어가겠습니다.

 

(function($){
var Hashtags = xe.createPlugin("hashtags", {
targets : [],
init : function() {
this.targets = [];
},
API_ONREADY : function() {
var thisPlugin = this;

// extract target text nodes
this.extractTargets($('.xe_content'));

$(this.targets).each(function() {
thisPlugin.cast('HASHTAGS', [this]);
});
},
API_HASHTAGS : function(oSender, params) {
var textNode = params[0];
if(!$(textNode).parent().length || $(textNode).parent().get(0).nodeName.toLowerCase() == 'a') return;
var content = textNode.nodeValue,
dummy = $('<span>'),
opts = addonHashtagsJsOptions,
newval;

// is IS
if(opts[1]) {
newval = '<a href="./?mid='+current_mid+'&act=IS&where=document&search_target='+opts[0]+'&is_keyword=';
} else {
newval = '<a href="./?mid='+current_mid+'&search_target='+opts[0]+'&search_keyword=';
}

content = content.replace(/(?!\s)(.)(#)/g, '$1 $2').replace(/(?:^:|^|\s|>| )(#([\w|ㄱ-ㅎ|ㅏ-ㅣ|가-힣\-]+)){1,}/g, function(match) {
return match.replace(/#([\w|ㄱ-ㅎ|ㅏ-ㅣ|가-힣\-]+)/g, function(m, p1) {
return newval+encodeURIComponent(p1)+'" '+(opts[3]?'target="_blank" ':'')+'style="color:'+opts[2]+';padding:1px 3px;border:1px solid #0000FF;border-radius:8px;text-decoration:none;font-weight:normal;" class="hashtag">#'+p1+'</a>';
});
});

$(textNode).before(dummy);
$(textNode).replaceWith(content);
params[0] = dummy.next('a');
dummy.remove();
},
extractTargets : function(obj) {
var thisPlugin = this,
wrap = $('.xe_content', obj);

if(wrap.length) {
this.extractTargets(wrap);
return;
}

$(obj)
.contents()
.each(function(){
var node_name = this.nodeName.toLowerCase();
if($.inArray(node_name, ['a', 'pre', 'xml', 'textarea', 'input', 'select', 'option', 'code', 'script', 'style', 'iframe', 'button', 'img', 'embed', 'object', 'ins']) != -1) return;

if(this.nodeType == 3) { // text node
var content = this.nodeValue;

if(content.length < 2) return;
if(!/(?:^:|^|\s|>| )#([\w|ㄱ-ㅎ|ㅏ-ㅣ|가-힣\-]+)/.test(content)) return;

thisPlugin.targets.push(this);
} else {
thisPlugin.extractTargets(this);
}
});
}
});

xe.registerPlugin(new Hashtags());
})(jQuery);

 

 

21,41번 라인에 강조를 해 드린 부분이 span 태그를 잘 처리할 수 있도록 해준 코드가 아니니까 지금 제가 말씀 드린 케이스가 링크가 안걸리겠죠??

 

<span>#</span>우유 로 고쳐봤으나 역시 링크가 안걸립니다.

 

코드의 링크 부분은 일부 제가 수정한 것이라 애드온 원본과 다른점은 참고해주세요.

 

지금 예시의 사례처럼 span 요소가 삽입이 되어도 해당 부분에 똑같이 링크가 걸릴수 있도록 할 수 있을까요? 애드온이 원래 그렇게 제작된 것인데 지금 동작이 오류가 있는 것인지 모르겠습니다.

 

일단 모듈에서 고쳐지기는 이제는 힘든 시점 같아 애드온을 한번 고쳐보고 싶네요.

  • profile

    글 저장하기 직전에 본문에 있는 아래 태그를 제거 하고 싶으신게 질문이 맞나요?

    <span class="atwho-query">#</span>

     

    그렇다면 아래의 코드를 ckeditor/editor.html 제일 하단 스크립트에 삽입해보세요.

     

      $(document).ready(function() {
        var empty_atwho_query = xe.createPlugin("empty_atwho_query", {
          API_BEFORE_VALIDATE : function(sender, params) {
            var value = $(params[0]).find('input[name=content]').val()
            .replace(/<span class="atwho-query">#<\/span>/gi,"");
    
            $(params[0]).find('input[name=content]').val(value);
    
            return true;
          }
        });
        var oEmpty_atwho_query = new empty_atwho_query();
        xe.getApp("Validator")[0].registerPlugin(oEmpty_atwho_query);
      });

     

  • profile profile
    모듈 개발자분께 드린 요청은 맞습니다. 저것 포함 글 작성시에만 필요한 태그가 남았다면 지워달라구요. 그런데 어렵다고만 하십니다. 어떤 태그가 더 있는지 class가 없는 경우도 있는지 등 제가 확인하기 어려운게 너무많습니다. 제 기억으로는 <span>#</span> 도 본 기억이 납니다.
  • profile

    이전 버전의 경우 글 작성중 해시태그 목록이 있을때 글작성 완료를 눌러 에디터를 떠나 버린 글에 대한 제어가 가능하지 않았습니다.

    오늘 오후 업데이트 이후로 에디터 자동 완성 모듈에서 글 작성후 본문에 대한 제어가 가능합니다.
    <span class="atwho-query">#</span> 를 #로 변환하는 업데이트를 제공해 드리면 애드온 수정없이 사용 가능할듯합니다.
    금주중에 업데이트가 한번 더 있을텐데 그때 포함하도록 하겠습니다.

  • profile profile

    혹시 이문제 패치하시면 라이믹스는 전혀 고려가 안되어 있는건 아닌지요.
    제가 혹시 판매 사이트 체험하기 테스트로 해보려 했으나 미처 생각 못했던 것이 해당 사이트는 라이믹스라 class는 코어에서 필터링 됩니다. 그런데 XE에서는 반대로 id가 필터링되고 라이믹스는 id가 필터링이 안될건데요...

     

    현재로서는 저희는 XE로 운영중이라 문제는 없을 겁니다.

    https://catenater.com/testboard/46102#comment_46104

  • profile profile
    감사합니다.
    확인해보겠습니다.
  • profile profile

    그리고 운영하시는 사이트와 엑팔에서

     

    Screenshot_20190214-225958.png

     

     

    페이지 접속할때 이런 현상이 발생합니다. 두 사이트에서 공통으로 사용하는 것 들이 있을 것 같네요.