有偿请高手解决一个问题:添加 @user 回复的功能

2014-08-07 20:10:48 +08:00
 zhiyongyici
我使用wordpress+bbpress 搭建了一个小型社区网站(风格仿了v2ex),并且使用了 simditor 编辑器。现在想用js实现 @user 功能。请高手给予帮助。

作为回报,我可以付费,或者赠送本站半年的广告(自然志全站)。

实现功能:增加 @user 功能。
使用的程序:wordpress+bbpress插件。
地址: http://ziranzhi.com/bbs
测试账户:ceshi
密码:cc5228600

方便的话可以加QQ详谈。
11061-3846
6308 次点击
所在节点    问与答
59 条回复
qq5775548
2014-08-07 21:37:09 +08:00
ShareBox.SuggestBox.Box.prototype = {
_constructor: function(options) {
this.handler = [];
this.container = $('<div class="suggest-box"></div>').hide().appendTo('body').get(0);
this.warp = $('<ul class="warpper"></ul>').appendTo(this.container).get(0);
},
_transform: function(html, source) {
var fixes = html.match(/\{[^\{]*\}/ig);
if (fixes == null) return;

fixes = fixes.toString()
.replace(/[\{\}]+/g, '')
.split(',');

//写入 data-link 属性
for (var i = 0, f = fixes, s = source; i < f.length; i ++) {
if (s.hasOwnProperty(f[i])) {
if ('object' === typeof s[f[i]]) {
var datas = toJSON(s[f[i]]);
html = html.replace('{' + f[i] + '}', datas);
continue;
}

html = html.replace('{' + f[i] + '}', s[f[i]]);
}
}

return html;
},
//将source转化成html
transform: function(source, code) {
var list = [];
if (source && source.length > 0) {
for (var i = 0, s = source; i < s.length; i ++) {
list.push(this._transform(code || OPTIONS.ShareBox.label, s[i]));
}
}

return list.join('');
},
empty: function() {
$(this.warp).empty();
return this;
},
put: function(list) {
$(this.warp).append(list);
return this;
},
getDatas: function(item) {
var datas = (item ? $(item) : $(this.warp).children().filter('.focus'))
.attr('data-link');

return $.parseJSON(datas);
},
hide: function() {
$(this.container).hide();
this.logout();

return this;
},
at: function(options, cursor_pos) {
var self = this;
var type = options.type, source = options.source, field = options.field, $field = $(field);
this.field = field;

this.empty();
this.put(this.transform(source));
this.logout();

var insert = function() {
setTimeout(function() {
var $eidtor = $field.shareBox();
$eidtor.select(cursor_pos.startPos + 1, cursor_pos.endPos);

var datas = self.getDatas();
$eidtor.insert(datas.value + ' ');
}, 1);
};

this.boxKeyDownHandle = function(e) {
var $l = $(self.warp).children();

switch(e.keyCode) {
//focus prev
case 38: //key ↑
var k = $l.index($l.filter('.focus'));
k = k <= 0 ? $l.length : k;

$l.removeClass('focus')
.eq(k-1)
.mouseover();

return false; //prohibit browers scroll event
//focus next
case 40: //key ↓
var k = $l.index($l.filter('.focus'));
k = k >= $l.length - 1 ? -1 : k;

$l.removeClass('focus')
.eq(k+1)
.mouseover();

return false;
//insert
case 9: //key Tab
case 13: //key Enter
insert();
self.hide();
return false;
//cancle
case 8: //key Backspace
case 27: //key Esc
$field.shareBox().insert('');
self.hide();
return;
}
};

//focus style
this.listMouseoverHandle = function(e) {
$(self.warp).children().removeClass('focus');
$(this).addClass('focus');
};

//select auto insert
this.listClickHandle = function(e) {
insert();
self.hide();
};

this.docClickHandle = function() {
self.hide();
};

$field.bind('keydown', this.boxKeyDownHandle);
$(this.warp).children().bind('mouseover', this.listMouseoverHandle)
.bind('click', this.listClickHandle)
.eq(0).mouseover();

$(document).bind('click', this.docClickHandle);

//position
var pos = $field.shareBox().getCursorOffset();
$(this.container).css({left: pos.left,top: pos.top}).show();

suggestBox.active = this;
return this;
},
logout: function() {
if ($.isFunction(this.boxKeyDownHandle)) $(this.field).unbind('keydown', this.boxKeyDownHandle);
if ($.isFunction(this.boxKeyDownHandle)) $(this.field).unbind('keydown', this.boxKeyDownHandle);

var $c = $(this.warp).children();
if ($.isFunction(this.listMouseoverHandle)) $c.unbind('mouseover', this.listMouseoverHandle);
if ($.isFunction(this.listMouseoverHandle)) $c.unbind('click', this.listMouseoverHandle);
if ($.isFunction(this.docClickHandle)) $(document).unbind('click', this.docClickHandle);

this.boxKeyDownHandle = this.listMouseoverHandle = this.listClickHandle = this.docClickHandle = undefined;
}
};
qq5775548
2014-08-07 21:37:16 +08:00
$.extend(ShareBox.prototype, ShareBox.TextEdit.prototype, {
_emotions: {},
emot: function(options) {
var emot = this._emotions[options.id || 'box'];
if (! (emot instanceof ShareBox.Emotion)) {
emot = this._emotions[options.id || 'box'] = new ShareBox.Emotion(options);
emot._constructor(options);
}

var field = this.field;
if (emot.field == field) {
emot.active == false
? emot.show(field, false, options.to)
: emot;

return emot;
}

emot.show(field, true, options.to);
return emot;
},
parseEmot: function(text) {
var path = OPTIONS.Emotion.path;
var emot = OPTIONS.Emotion.emot;
for (var i in emot) {
for (var j in emot[i]) {
var reg = new RegExp('\\[' + j + '\\]', 'g');
text = text.replace(reg, function($1) {
return '<a title="' + j + '"><img src="' + path[i] + emot[i][j] + '" alt="' + j + '" /></a>';
});
}
}

return text;
},
suggest: function(options) {
if (! this._suggest) {
options = options || {};
options.field = this.field;
this._suggest = suggestBox.suggest(options);
return this._suggest;
}
}
});

var suggestBox = new ShareBox.SuggestBox();

$.fn.extend({
shareBox: function(options) {
var edits = [];
this.filter('input[type="text"], textarea').each(function() {
var edit = new ShareBox();
edit._constructor(this);

if ($.isPlainObject(options)) {
if ('undefined' === typeof this.suggest && options.suggest) this.suggest = edit.suggest(options.suggest);
if (options.emot) edit.emot(options.emot);
if ('undefined' === typeof this._autogrow && options.autogrow) this._autogrow = $(this).autogrow();
}

edits.push(edit);
});

return edits.length > 1 ? edits : edits[0];
},
/**
* Auto-growing textareas; technique ripped from Facebook
* (Textarea need set style "overflow:hidden" under IE)
* https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js
*/
autogrow: (function() {
function times(string, number) {
for (var i = 0, r = ''; i < number; i ++) r += string;
return r;
};

return function() {
this.filter('textarea').each(function() {
this.timeoutId = null;

var $this = $(this).css('overflow', 'hidden'),
minH = $this.height();

var shadow = $('<div></div>')
.css({
position: 'absolute',
wordWrap: 'break-word',
top: 0,
left: -9999,
display: 'none',
width: $this.width(),
fontSize: $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight')
})
.appendTo(document.body);

var update = function() {
var val = this.value
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/&/g, '&amp;')
.replace(/\n$/, '<br/>&nbsp;')
.replace(/\n/g, '<br/>')
.replace(/ {2,}/g, function(space) {
return times('&nbsp;', space.length -1) + ' ';
});

shadow.html(val);
$(this).css('height', Math.max(shadow.height(), minH));
}

var updateTimeout = function() {
clearTimeout(this.timeoutId);

var that = this;
this.timeoutId = setTimeout(function(){
update.apply(that);
}, 100);
};

$(this).bind('change', update).bind('keyup keydown', updateTimeout);

update.apply(this);
});

return this;
};
})()
});

})(jQuery);
qq5775548
2014-08-07 21:38:53 +08:00
对不起各位 我发第一条已经后悔了 可惜不能删除 你妹 竟然回复字数这么少,删不到 还是直接发吧 没有CSS的 研究写这份代码应该都会明白的~~~~~~
哎 不再在V2X 上贴代码了 欢迎拍砖 ~~~woyun~~
hahastudio
2014-08-07 21:44:12 +08:00
你知道么,v2ex 支持 gist 的= =
zhiyongyici
2014-08-07 21:45:13 +08:00
@Sunyanzi 我现在的问题可能更加简单,如果不用可视化编辑 ,点击 [回复] 按钮回复框中会出现 <a href="">@user</a> 的代码,如果加载了可视化编辑器(simditor)就没有反应,我感觉应该不是很麻烦。
zhiyongyici
2014-08-07 21:49:44 +08:00
@qq5775548 是的,v2ex 不能删帖挺不方便的。你的代码我真的看不懂(小白用户,莫鄙视 ^_^)。你能帮忙解决这个问题吗?可以加我Q详谈。
mahone3297
2014-08-07 21:51:21 +08:00
lz直接上个价格吧,大家哄抢。。。
功能应该不难,我觉得,难在读懂wordpress+bbpress 代码
zhiyongyici
2014-08-07 21:56:15 +08:00
@mahone3297 额,,100可以吗(胆怯)?
Mihuwa
2014-08-07 21:59:32 +08:00
建议去猪八戒上发个任务。
zhiyongyici
2014-08-07 22:03:51 +08:00
因为不懂,所以不知道工作量有多少,报价没有谱,会弄的朋友可以直接加我Q聊。如果没有我就去猪八戒试试看。
qq5775548
2014-08-07 22:07:21 +08:00
@zhiyongyici 还是算了, 还在忙着找工作呢...
sampeng
2014-08-07 22:22:58 +08:00
这个题目是我每次面试必问的一个。。。。。
kmvan
2014-08-07 22:37:27 +08:00
楼主的需求跟php完全无关的只是js而已。
zhiyongyici
2014-08-07 22:45:46 +08:00
@kmvan 是的,我也感觉是 Js 的事,而且是编辑器的事,但是我一头雾水,一点不懂~
kmvan
2014-08-07 22:53:05 +08:00
@zhiyongyici 你不是会js吗?编辑器有api的,绑定点击事件,调用api写入文本就可以了啊。
kmvan
2014-08-07 22:54:13 +08:00
这帖子好长,手机差点卡死
shajiquan
2014-08-07 23:02:51 +08:00
@zhiyongyici 似乎已经解决了。
yinheli
2014-08-07 23:35:14 +08:00
@给你写了个插件. 用的 coffeescript, 把编译后的文件放到你的博客试试
https://gist.github.com/yinheli/2ea1c51710c452e9b81d#file-simditor-replay-js
zhiyongyici
2014-08-07 23:37:25 +08:00
@shajiquan 已经解决了~ 一个朋友用了一段JS就完事了。。。免费的,好感动~!
yinheli
2014-08-07 23:37:28 +08:00
@Livid sorry, 破坏了页面的样式.... 或者你可以修理下.

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/126651

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX