انتقال Selector از body به tag p ؟

[redhat2]

سلام به دوستان ، یه سوال داشتم ، من دارم یه ادیتور می نویسم ، سوال من اینجا هستش ، که من میخوام زمانی که برای بار اول کاربر روی ناحیه textarea ( که اینجا یک div هست با خاصیت contenteditable که true هستش ) focus یا click کرد ، یک Tag p به ناحیه texarea اضافه بشه و هر چی که شروع به نوشتن می کنیم توی تگ p قرار بگیره و با هربار enter یه تگ جدید اضافه بشه ؟ ( این دقیقا کاری هست که ادیتور redactor انجام میده ، البته اگه باهاش کار کرده باشین ) چطور باید اینکارو انجام بدم ، چند روزی هست که دارم دنبال نحوه انجام این کار توی اینترنت می گردم ولی به جایی نرسیدم ، خواهشا کمک کنین ، ممنون . اینم از کدهایی که تا حالا نوشتم :


(function ( $ ) {
$.fn.editor = function(options){
var settings = $.extend({
width: '650px',
height: '220px',
dir: 'rtl',
default_font: 'Tahoma,11px'
},options);
var div = '<div></div>';
var editor = $(div).addClass('editor').css({
'width':settings.width
});
var editor_toolbar = $(div).addClass('editor_toolbar');
var font = settings.default_font.split(',');
var editor_body = $(div).addClass('editor_body').attr('contenteditab le','true').css({
'height':settings.height,
'direction':settings.dir,
'font-family': font[0],
'font-size': font[1]
});
var toolbar_1 = ['bold','italic','textcolor','bgcolor'];
var toolbar_1_span = $('<span></span>').addClass('toolbar_1');
toolbar_1_span.appendTo(editor_toolbar);
for(var i=0;toolbar_1.length>i;i++){
var a = $('<a></a>');
var a_span = $('<span></span>').addClass(toolbar_1[i]);
a.attr({
'id':i+1
}).prepend(a_span).appendTo(toolbar_1_span);
}
editor_toolbar.prependTo(editor);
editor_body.appendTo(editor);
this.css('display','none');
$('body').append(editor,this);
$('.toolbar_1 span').each(function(){
if($(this).hasClass('textcolor') || $(this).hasClass('bgcolor'))
{
$(this).parent('a').append($('<span></span>').addClass('arrow'));
}
});


}
}( jQuery ));

[plague]

این رو روی یه texarea ساده تست کن تا دستت بیاد



$('#editor').focus(function(){

position = $(this)[0].selectionStart;
var txtToAdd = '<p> ';
var textAreaTxt = $(this).val();
$(this).val(textAreaTxt.substring(0, position) + txtToAdd + textAreaTxt.substring(position));

var start = this.selectionStart,
end = this.selectionEnd;

$(this).val( $(this).val()+'</p>' );
this.setSelectionRange(start, end);

})


برای اینتر هم همین میشه فقط event رو باید عوض کنی

[redhat2]

سلام ، ممنون از کدتون ، من کد را با کد زیر تغییر دادم ، این در Textarea کار می کنه ولی در div با خاصیت contentable کار نمیکنه ، میشه کمک کنین ؟ ممنون .


var first_p = $('<p></p>');
editor_body.keyup(function(){
$(this).prepend(first_p);
var start = first_p.selectionStart;
var end = first_p.selectionEnd;
first_p.html($(this).val());
this.setSelectionRange(start, end);

})


کل کد رو پیوست کردم .

[plague]

اگه هرچیزی غیر از textarea بود اول تبدیلش کن به textarea یا یه textarea اضافه کن داخلش و روی اون کار کن
من با contenteditable ها کار نکردم چندان تا حالا که راهنماییت کنم