تبدیل Textarea به IDE
سلام دوستان وقت بخیر
برای پروژه کامپایلر میخوام گرافیکش رو با html و css پیاده سازی کنم.به این صورت که یک textarea قرار دادم که درونش کد نوشته میشه و حالا textarea دیگری که صرفاً مطالبش خواندنیه و نتیجه کار در آن قرار میگیرد.اما بحث سر قسمتیه که میخوام کدم رو توش تایپ کنم.میخوام یه ویژگی داشته باشه که مثل IDE ها که با گذاشتن یک پرانتز به صورت اتوماتیک پرانتز بسته میشه و نشانه وسط آن قرار میگیره تا کدها نوشته بشه و یا با گذاشتن اولین " ، خود IDE برای بستن اون " را قرار میده.
اما متاسفانه نمیدونم این که چطور باید این کار رو انجام بدم و پیاده سازیش به چه زبانی و به چه صورتی است.لطفا راهنماییم بفرمایید
ممنون
3 پاسخ
سلام وقت بخیر
الان میتونم بپرسم که چطور باید از این کد استفاده کنم و نحوه ارتباط دهی اون با Textarea را چطور باید انجام داد.
سلام ITPRO عزیز، کد زیر این کار رو برای شما انجام میده:
(function(){
function insertInto(str, input){
var val = input.value, s = input.selectionStart, e = input.selectionEnd;
input.value = val.slice(0,e)+str+val.slice(e);
if (e==s) input.selectionStart += str.length - 1;
input.selectionEnd = e + str.length -1;
}
var closures = {40:')',91:']', 123:'}'};
$(".editable").keypress(function(e) {
if (c = closures[e.which]) insertInto(c, this);
});
})();
علامت هایی که پشتیبانی شدن داخل متغیر closures تعریف شدن.
کد بالا با textarea هایی که کلاس editable داشته باشن کار میکنه، حالا شما می تونید selector کد رو جوری تغییر بدید که با textarea مورد نظر شما کار کنه، کافیه تو کد بالا editable رو با کلاس یا id مورد نظرتون عوض کنید.