লাইভ এডিটরে রিচ টেক্সট তৈরি করুন এবং জেনারেট হওয়া HTML নিন, ফরম্যাটিং, তালিকা, লিংক এবং সোর্স ভিউ সহ।
লাইভ এডিটরে রিচ টেক্সট তৈরি করুন এবং জেনারেট হওয়া HTML নিন, ফরম্যাটিং, তালিকা, লিংক এবং সোর্স ভিউ সহ। লাইভ এডিটরে রিচ টেক্সট তৈরি করুন এবং জেনারেট হওয়া HTML নিন, ফরম্যাটিং, তালিকা, লিংক এবং সোর্স ভিউ সহ।
পটভূমি
একটি WYSIWYG এডিটর কী করে
WYSIWYG মানে What You See Is What You Get। কাঁচা HTML
ট্যাগ টাইপ করার বদলে আপনি একটি ডকুমেন্ট দৃশ্যত এডিট করেন -- বোল্ড, ইটালিক, হেডিং, তালিকা, লিংক
ইত্যাদি -- এবং এডিটর আপনার কাজগুলো আপনার জন্য মার্কআপে অনুবাদ করে। আপনি
যে পৃষ্ঠাটি দেখছেন তা ব্রাউজারের বিল্ট-ইন contenteditable
ক্ষমতা এবং document.execCommand API ব্যবহার করে, যা এক দশকেরও বেশি সময় ধরে
প্রতিটি প্রধান ব্রাউজারের অংশ। কোনো থার্ড-পার্টি লাইব্রেরি জড়িত নয়:
ফরম্যাটিং ব্রাউজার দ্বারা স্থানীয়ভাবে প্রয়োগ করা হয়, তাই জেনারেট হওয়া HTML
ওয়েবের অন্য যেকোনো এডিটযোগ্য অঞ্চলের জন্য আপনার ব্রাউজার যা তৈরি করে তার সাথে হুবহু মেলে।
টুলবার দিয়ে কী কী করা যায়
টুলবারটি বেশিরভাগ মানুষের প্রয়োজনীয় অপারেশন কভার করে: আন্ডো/রিডো, বোল্ড, ইটালিক,
আন্ডারলাইন, স্ট্রাইকথ্রু, হেডিং H1-H3, প্যারাগ্রাফ, কোড ব্লক, বুলেট এবং
সংখ্যাযুক্ত তালিকা, ব্লক কোট, লিংক এবং সব ফরম্যাটিং সরিয়ে ফেলা। ফন্ট
এবং সাইজ সিলেক্টর বর্তমান সিলেকশনের টাইপফেস এবং ফন্ট সাইজ পরিবর্তন করে।
সোর্স টগল রেন্ডারড ভিউ এবং কাঁচা HTML সম্বলিত একটি সাধারণ
textarea-এর মধ্যে স্যুইচ করে, যা আপনি সরাসরি এডিট করতে পারেন। এডিটরের
নিচের স্ট্যাটস লাইন বর্তমান কন্টেন্টের অক্ষর এবং শব্দ সংখ্যা দেখায়।
HTML আউটপুট কীভাবে গঠন করা হয়
এডিটর যেখানে সম্ভব উপস্থাপনাগত স্যুপের বদলে শব্দার্থক মার্কআপ তৈরি করে:
হেডিং হয় <h1>/<h2>/<h3>, তালিকা হয় <ul>/<ol>/<li>, কোট
হয় <blockquote>, এবং কোড হয় <pre>। টেক্সট-স্তরের ফরম্যাটিং প্রয়োগ করা হয়
<strong>, <em>, <u> এবং <del> দিয়ে। যেহেতু ব্রাউজারের execCommand ইঞ্জিন,
সঠিক মার্কআপ ব্রাউজারভেদে সামান্য ভিন্ন হতে পারে -- একটি বোল্ড ক্লিক
একটি ব্রাউজারে <strong> এবং অন্যটিতে <b> তৈরি করতে পারে। সর্বোচ্চ
সামঞ্জস্যের জন্য, এক্সপোর্ট করা HTML ইচ্ছাকৃতভাবে ন্যূনতম এবং অতিরিক্ত পরিষ্কার ছাড়াই
ইমেইল, CMS এডিটর বা ডকুমেন্টেশন সিস্টেমে পেস্ট করা যায়।
ব্যবহারিক টিপস
সোর্স ভিউতে সুইচ করার পর আউটপুট ফিল্ড থেকে এক্সপোর্ট করা HTML কপি করুন,
অথবা HTML কপি করুন বাটন ব্যবহার করুন। ইমেইল ক্লায়েন্টে পেস্ট করার সময়
মার্কআপটি সহজ রাখুন -- অনেক ক্লায়েন্ট <style> এবং জটিল নেস্টিং ছিঁড়ে ফেলে। যদি আপনি
এই কন্টেন্ট এমন একটি পৃষ্ঠায় এমবেড করতে চান যার নিজস্ব স্টাইল আছে, শব্দার্থক
ট্যাগ পছন্দ করুন এবং ইনলাইন স্টাইল এড়িয়ে চলুন; এক্সপোর্ট করা মার্কআপ কোনো ইনলাইন
স্টাইলিং ব্যবহার করে না, তাই এটি স্বাভাবিকভাবেই আপনার পৃষ্ঠার CSS উত্তরাধিকার সূত্রে পায়। এই পৃষ্ঠার
সবকিছু আপনার ব্রাউজারে স্থানীয়ভাবে চলে; কন্টেন্ট কখনো পৃষ্ঠা ছেড়ে যায় না।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
একই কাজ কেন ভিন্ন ব্রাউজারে ভিন্ন ট্যাগ তৈরি করে?
এডিটর ব্রাউজারের নেটিভ execCommand-এর কাছে কাজটি অর্পণ করে, এবং ব্রাউজাররা যা নির্গত করে তাতে সামান্য ভিন্নতা থাকে (যেমন <strong> বনাম <b>, বা <i> বনাম <em>)। কন্টেন্ট কার্যত অভিন্ন; পিক্সেল-নিখুঁত মার্কআপের প্রয়োজন হলে সেটি সামঞ্জস্য করতে সোর্স ভিউ ব্যবহার করুন।
আমি কি Word বা Google Docs থেকে কন্টেন্ট পেস্ট করতে পারি?
সাধারণত হ্যাঁ। ব্রাউজারের পেস্ট হ্যান্ডলার পেস্ট করার সময় রিচ ক্লিপবোর্ড কন্টেন্টকে HTML-এ রূপান্তর করে। প্রক্রিয়ায় ফরম্যাটিং সরল হতে পারে; পেস্ট করার পর মার্কআপ পরিদর্শন ও পরিষ্কার করতে সোর্স ভিউতে সুইচ করুন।
আউটপুট HTML কি কোথাও ব্যবহার করা নিরাপদ?
এটি কোনো ইনলাইন স্টাইল এবং কোনো স্ক্রিপ্ট ছাড়া সাধারণ মার্কআপ, যা ইমেইল, CMS কন্টেন্ট এবং ডক্সের জন্য নিরাপদ। পাবলিক ওয়েব পেজের জন্য, পেস্ট করা স্ক্রিপ্ট ট্যাগের বিরুদ্ধে সুরক্ষা দিতে আক্ষরিকভাবে রেন্ডার করা যেকোনো HTML স্যানিটাইজ করা পছন্দ করুন।
কেন কোনো ইমেজ আপলোড বাটন নেই?
ইমেজ আপলোডের জন্য একটি সার্ভার বা data-URI হ্যান্ডলিং প্রয়োজন, এবং এই টুল সম্পূর্ণ অফলাইন চলে এবং কোনো ব্যাকএন্ড নেই। আপনি এখনও এডিটরে একটি ছবি বা লিংক পেস্ট করতে পারেন, বা সোর্স ভিউতে একটি <img> ট্যাগ যোগ করতে পারেন।
এই টুল কি আমার কন্টেন্ট সংগ্রহ করে?
না। সবকিছু আপনার ব্রাউজারে ঘটে; কোনো নেটওয়ার্ক রিকোয়েস্টই নেই। আপনার টেক্সট কখনো পৃষ্ঠা ছেড়ে যায় না, এবং পৃষ্ঠাটি নেটওয়ার্ক সংযোগ বিচ্ছিন্ন অবস্থায়ও কাজ করে।
আমি কি ইমেইলে আউটপুট ব্যবহার করতে পারি?
হ্যাঁ। সোর্স ভিউতে সুইচ করুন, HTML কপি করুন এবং HTML গ্রহণ করে এমন একটি ইমেইল কম্পোজারে পেস্ট করুন (বেশিরভাগই করে)। মার্কআপটি সহজ রাখুন: আপনার ক্লায়েন্ট এটিকে বিকৃত করলে প্যারাগ্রাফ, হেডিং, তালিকা এবং লিংকের বাইরে কিছু ছিঁড়ে ফেলুন।