에디터자동완성 자동완성기능 고생중입니다. 2년 되어갑니다.

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

멘션,해시태그 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 요소가 삽입이 되어도 해당 부분에 똑같이 링크가 걸릴수 있도록 할 수 있을까요? 애드온이 원래 그렇게 제작된 것인데 지금 동작이 오류가 있는 것인지 모르겠습니다.

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