Rich visual টেক্সট ইডিটর ! একদম পিউর javascript এবং html ! কিভা‌বে তৈ‌রি কর‌বেন । বে‌সিক টিউ‌টো‌রিয়াল :)

HELLO Friends ,‌কেমন আছ তোমরা ? আমি মুটামু‌টি (fatfaty :p) আছি ।

আমা‌দের কোন কিছু শিখার অন্তরায় হ‌লো শর্টকাট । And that’s why আমি আজ এক‌টি শর্টকাট মুক্ত টিউ‌টে‌রিয়াল করে‌ছি । এখা‌নে No screenshot and No Shortcut .

এখন আসি tutorial সম্প‌র্কে । আপনারা সবাই হয়‌তো ট্রিক‌বি‌ডি বা অন্য যে‌কোন wordpress blog এর visual টেক্সট ইডিটর টা দে‌খে‌ছেন । আমি যেসময় প্রথম এই ধর‌নের Editor দে‌খি তখন আমি আমার প্র‌জে‌ক্টে এটা ব্যবহার কর‌তে চে‌য়ে‌ছিলাম । But গুগল কর‌লেই পেতাম
“Create your won rich text editor using jquery and html5 ” 🙁

But আমি চাইতাম সব‌কিছুই পিউর । তাই একটা বড় প্র‌জেক্ট গিটহাব থে‌কে ডাউন‌লোড ক‌রে কে‌টে ছোট ক‌রে “minimum” অংশ গু‌লো রাখলাম । 🙂 ?

স‌ত্যি বল‌তে কি তখন আমি আমার চাওয়ার থে‌কেও বে‌শি কিছু পেলাম এবং এ থে‌কেই আমার js পথচলা শুরু ।। So shortcut can’t help you to learn anything .

গা‌লি দি‌বেন না প্লিজ । বক বক বাদ দি‌য়ে এখন কা‌জের কথায় আসি 🙂

(***Github:‌গিটহাব হল সোর্স কোন নিরাপ‌দে রাখার জন্য এক‌টি organisation )
(***js:Javascript But not Java. Useful to web designing***)

প্রথ‌মেই Html তৈ‌রি কর‌তে হ‌বে । So এক‌টি ফ‌াইল তে‌রি করুন যার ফর‌মেট হ‌বে .html ।

(SS চাওয়া যা‌বে না । ক‌ঠিন ভা‌বে শিখ‌লে মাথায় গে‌থে যা‌বে । য‌দি POSSIBLE হত ত‌বে CODE ও দেওয়া ঠিক না )

‌নি‌চের Source code টা ভালো ক‌রে দেখুন । নি‌জে নি‌জে তৈ‌রি করা html ফইলটা‌তে লিখুন । Notepad,notepad++,Dreamweaver ব্যবহার কর‌তে পা‌রেন । android user রা Es note editor বা webmaster.apk ব্যবহার কর‌তে পা‌রেন । Result এর জন্য Firefox,Chrome,Opera browser ব্যবহার কর‌তে পা‌রেন । but opera mini হ‌বে না ।

/*HTML সেকশন*/

<button onClick=”addElementF(‘h1’)”>For h1 Tag</button>
<button onClick=”addElementF(‘hr’)”>For hr Tag</button>
<button onClick=”addElementF(‘li’)”>For li Tag</button>

<div id=”TextEditor” style=”width:400px;height:400px;border:1px solid red”>
Shanto
</div>
/*‌শেষ*/

ব্যাখা :
<button<>/button> হ‌লো html tag . এগু‌লো ব্রাউজ‌বে দেখা‌বে ।
onClick=() হ‌লো মাউস‌ক্লিক ইভেন্ট caller ।

(ইভেন্ট: যখন ওয়েব পেজ এ কোন ঘটনা ঘটা‌নো হয় তাই ইভেন্ট (event))

<div> এটাও tag । কিন্ত‌ু এখা‌নে একটা attribute(উপাদান) আছে contenteditable=””
এটা দি‌য়ে আমরা ক‌ন্টেন্ট edit করার অনুম‌তি পাই ।
(style attribute এ visual effect তৈ‌রি করা হ‌য়েছে ।

Ok fine.
এখন জাভা‌স্ক্রিপ্ট এ আসি । এটাই মূল সেকশন । মা‌নে প্র‌োগ্রাম ।

(Note :javascript case sensitive.)
(/*….*/ যা আছে এটা হ‌লে ক‌মেন্ট । এটা ব্রাউজার execute কর‌বে না । এখা‌নে যাকিছু লিখ‌তে পা‌রেন ।)
‌ দি‌য়ে in document js শুরু হয় এবং দি‌য়ে শেষ হয় ।
var সাধারণত variable বা চল‌কের আগে ক‌সে ।

document.getElementById() দি‌য়ে আমা‌দের টেক্সট ইডিটর‌কে ইম‌পোর্ট ক‌রে‌ছি ।
function দ্বা addElementF() ফাংশন শুরু ক‌রে‌ছি ।
“param” মা‌নে parameter যা ইভেন্ট থে‌কে ডাটা কা‌লেক্ট ক‌রে ফাংশ‌নে পৌ‌ছে দেয় ।

switch() একটি js conditional ফাংশন । google it আরও জান‌তে ।

বা‌কি সব ক‌মে‌ন্টে লেখা আছে ।

html section এর নি‌চে এগু‌লো লিখুন ।

/*JS শুরু*/

/*ভে‌রি‌য়েবল সেকশন । এখা‌নে edtr ভে‌রি‌য়েব‌লে আমা‌দের টেক্সট editor কে রাখা হ‌য়ে‌ছে ID এর মাধ্য‌মে */
var edtr = document.getElementById(‘TextEditor’);

/*End of variable section*/

/*ফাংশন শুরু*/
function addElementF(param){
/*js switch ফাংশন */
switch (param){
case “h1”:
edtr.innerHTML +=”<h1>Appear Html H1 tag visualy</h1> “;
break;
case “hr”:
alert(param);
edtr.innerHTML +=”<hr>”;
break;
case “li”:
alert(param);
edtr.innerHTML +=”<ul><li>List Style</li></ul>”;
break;
}
/*switch ফংশন শেষ */
}
/*মুল ফাংশন শেষ */

/*JS শেষ*/

ব্রাউজ‌রে ফাইলটা রান করান ।

শর্টকাট প‌রিহার কর‌লেই আপ‌নি web developing এর বস হ‌তে পার‌বেন । আর হ্যা প‌রিশ্রম কর‌তেই হ‌বে । প্রাথ‌মিক অবস্থায় য‌দি শিখ‌তে চান ত‌বে wordpress,joomla বা jquery,node.js এস‌বের ধা‌রে কা‌ছেও ঘেস‌বেন না । আপ‌নি expert হ‌লে এদের ডে‌ভেলপাররাই আপনার হা‌তেরপা‌য়ে ধর‌বে । Good bye everyone.

/*JS শুরু*/

/*ভে‌রি‌য়েবল সেকশন । এখা‌নে edtr ভে‌রি‌য়েব‌লে আমা‌দের টেক্সট editor কে রাখা হ‌য়ে‌ছে ID এর মাধ্য‌মে */
var edtr = document.getElementById(‘TextEditor’);

/*End of variable section*/

/*ফাংশন শুরু*/

function addElementF(param){
/*js switch ফাংশন */
switch (param){
case “h1”:
edtr.innerHTML +=”<h1>Appear Html H1 tag visualy</h1> “;
break;
case “hr”:
alert(param);
edtr.innerHTML +=”<hr>”;
break;
case “li”:
alert(param);
edtr.innerHTML +=”<ul><li>List Style</li></ul>”;
break;
}
/*switch ফংশন শেষ */
}
/*মুল ফাংশন শেষ */

/*JS শেষ*/

ব্রাউজ‌রে ফাইলটা রান করান ।
(important: এটা form action নি‌তে পার‌বে না । এর জন্য আরও কিছু কোড যোগ কর‌তে হ‌বে । So জান‌তে চাই‌লে ক‌মেন্ট করুন । next tutorial তৈ‌রি করব ।)

শর্টকাট প‌রিহার কর‌লেই আপ‌নি web developing এর বস হ‌তে পার‌বেন । আর হ্যা প‌রিশ্রম কর‌তেই হ‌বে । প্রাথ‌মিক অবস্থায় য‌দি শিখ‌তে চান ত‌বে wordpress,joomla বা jquery,node.js এস‌বের ধা‌রে কা‌ছেও ঘেস‌বেন না । আপ‌নি expert হ‌লে এদের ডে‌ভেলপাররাই আপনার হা‌তেরপা‌য়ে ধর‌বে । Good bye everyone.

Source code here: Source +webmaster pro apk
try Html code here :Html editor online

অনু‌রোধ :Web development এর জন্য একটা ক্যা‌টেগ‌রি তৈ‌রি ক‌রে দেওয়ার জন্য এড‌মিন প্যা‌নেল কে অনু‌রোধ কর‌ছি ।