ইন্টিগ্রেটেড মার্কডাউন WYSIWYG পাঠ্য সম্পাদক


101

মার্কডাউন কোডের জন্য সোজা WYSIWYG সম্পাদক সন্ধানের জন্য, আমি CkEditor, TinyMCE, ect এর সাথে তুলনামূলক UI খুঁজে পাচ্ছি না।

বিশেষ করে, Markdown "WYSIWYG ওয়েবসাইট" সম্পাদকদের (যেমন মত পোস্টগুলি যে সুপারিশ করা হয় এই ) অর্থে নয় বিশুদ্ধ WYSIWYG ওয়েবসাইট সম্পাদকদের ব্যবহারকারীরা পারেন এখনও কাঁচা Markdown (লিখতে হয় MarkItUp ) অথবা ছাড়া সম্পাদনা ইন-লাইন থাকার অন্যান্য চরম যেতে মান নিয়ন্ত্রণ ( হ্যালো )।

আমার মাঝে কিছু দরকার

আমি এমন একটি মার্কডাউন সম্পাদক খুঁজছি যা দেখতে পাওয়া এবং ফাংশনযুক্ত সি কেইডিটর পাঠ্য বাক্সের মতো ফাংশন করে এবং যা মার্কডাউনকে গ্রহণ করে এবং আউটপুট করে। সর্বনিম্ন বিন্যাস বিকল্পগুলির (বি, আই, ইউ, তালিকাগুলি, ইত্যাদি) একটি সরঞ্জামদণ্ড থাকা উচিত এবং পাঠ্য প্রবেশের ক্ষেত্রটি কাঁচা কোড নয়, রূপান্তরিত মার্কডাউন দেখানো উচিত। এমন একটি উত্স বাটন থাকতে হবে যা ব্যবহারকারীদের কাঁচা মার্কডাউন সম্পাদনা করতে দেবে, তবে এটি optionচ্ছিক। উদা:

এখানে চিত্র বর্ণনা লিখুন

আমি মার্কডাউন / উইকি, ইসি - এটি সরবরাহ করে এমন সুরক্ষার কারণ পাই। এসই তে এখানে কাঁচা কোড প্রবেশ করানো আমার আপত্তি নেই, তবে আমার ব্যবহারকারীরা গীকস নন এবং এটিকে উপভোগ্য মনে করেন না। তারা তাদের পাঠ্যের সাথে * * * ___ এবং ফাঁকা স্থানগুলি দেখতে চায় না। এগুলি "শব্দ" শৈলী সম্পাদনাতে ব্যবহৃত হয় এবং সেই পরিবেশে সর্বাধিক উত্পাদনশীল।

সুতরাং - মার্কডাউনের জন্য সত্যই একীভূত WYSIWYG সম্পাদক আছে? আমি একটি পিএইচপি লিখছি, তাই আমি একটি ক্লাসের সাথে আবেদন করতে পারেন যে কিছু নিখুঁত হবে।


সেপ্টেম্বর 23, 2015 আপডেট

CKEditor এখন একটি আছে Markdown addon যে এই সঠিক জিনিস আছে। অ্যাডন প্রকল্পটি গিথুবে হোস্ট করা হয়

স্ক্রীনশট:

মার্কডাউন ডাব্লুওয়াইএসআইওয়াইজি

মার্কডাউন উত্স


এপ্রিল 13, 2015 আপডেট
কেউ CKEditor বিকাশ professing বলছেন যে চেহারা CommonMark একটি খেলা চেঞ্জার, এবং আমরা সম্ভবত একটি সঠিক দেখতে পারে CKEditor জন্য মার্কআপ ইন্টারফেস (সম্পূর্ণ গল্পের জন্য মন্তব্য পড়তে)।


ফেব্রুয়ারী 6, 2015 আপডেট

সি কেইডিটর এখন একটি প্লাগইন নিয়ে আসে যা বিবিসিওড আউটপুট করে (এবং ইনপুট হিসাবে গ্রহণ করে)।

ডেমো: http://ckeditor.com/demo#bbcode


আহোলা সম্পাদক, আপনার যে লিঙ্কটি লিঙ্ক করেছেন তার উত্তরের পরামর্শ অনুসারে আপনি এইচটিএমএল 5 ডাব্লুওয়াইএসআইওয়াইওয়াইজি সম্পাদক যা আপনি ঠিক কী করছেন তা দেখে মনে হচ্ছে। এটি এমনকি অফিস ফিতা একটি ইঙ্গিত আছে। আপনি এটিকে ছাড় দেওয়ার কোনও কারণ আছে?
ক্রিস

1
আমি ভীত আমি আপনার শেষ মন্তব্যটি সত্যই বুঝতে পারি না। আহোলা হ'ল "সম্পাদনা-স্থানে" সমস্ত WYSIWYG সম্পাদক হিসাবে। আহোলদা সম্পাদনা বাক্সটি কেবল একটি divএবং সরঞ্জামদণ্ডটি অন্যটি div, এই পৃষ্ঠায় কেবল জিনিসই হতে পারে। আহোলা সমাধানটি আপনার "ন্যূনতম বিন্যাসের বিকল্পগুলির সেট (বি, আই, ইউ, তালিকাগুলি, ইত্যাদি) এর প্রয়োজনীয়তা পূরণ করে এবং পাঠ্য প্রবেশের ক্ষেত্রটি কাঁচা কোড নয়, রূপান্তরিত মার্কডাউন দেখায়।" কেন আপনি এটি বিবেচনা করবেন এমন কোনও সমাধান নয় কেন দয়া করে আপনি আরও পরিষ্কারভাবে ব্যাখ্যা করতে পারেন।
ক্রিস

1
মার্কডাউন এই সমস্ত WYSIWYG সম্পাদককে নিজেই প্রতিস্থাপন করে। আপনার কেন মার্কডাউন আউটপুট লাগবে?
পোল

4
@ পোল: কারণ এটি HTML সংরক্ষণের বিপরীতে পরে সংরক্ষণ এবং প্রদর্শন করা নিরাপদ?
ড্যান আব্রামভ

1
আমিও এই প্রশ্ন পাচ্ছি না। হয় আপনি HTML তৈরি করতে মার্কডাউন ব্যবহার করেন বা আপনি HTML তৈরি করতে WYSIWYG সম্পাদক ব্যবহার করেন। আপনি মার্কডাউন জেনারেট করার জন্য কেন একটি WYSIWYG সম্পাদক ব্যবহার করতে চান? যদি এটি সত্যিই আপনি চান তবে আপনি সর্বদা CKeditor ব্যবহার করতে এবং HTML কে মার্কডাউনে রূপান্তর করতে পারেন।
এমবি 21

উত্তর:


13

আমি অন্য দিন এই বিষয়ে গবেষণা করছিলাম এবং আমি মার্কডাউন আউটপুট সহ কোনও শালীন WYSIWYG সম্পাদক খুঁজে পাইনি। আসলে, প্রথমে আপনাকে একটি ডাব্লুওয়াইএসআইডাব্লু মার্কডাউন সম্পাদক তৈরি করতে হবে ডাব্লুওয়াইএসআইডাব্লু এইচটিএমএল সম্পাদক এবং এর মধ্যে খুব কমই বাজারে ব্যবহারযোগ্য।

এমন একটি সুযোগ রয়েছে যা আপনি dataProcessorসিকেইডিটারের জন্য তৈরি করতে সক্ষম হবেন যা এইচটিএমএল সম্পাদককে মার্কডাউন সম্পাদক হিসাবে পরিবর্তন করবে। আমাদের কাছে বিবিসি কোডের জন্য এমন একটি প্লাগইন রয়েছে যা এই জাতীয় কাজ করে ( http://ightly-v4.ckeditor.com/3737/sample/bbcode.html দেখুন )।

আপনাকে যা করতে হবে তা হ'ল এই ইন্টারফেসটি বাস্তবায়ন করতে হবে http://ightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor । আপনি যদি বিবিডি কোড প্লাগইনের কোডটি পরীক্ষা করেন তবে আপনি কিছু হ্যাক এবং কৌশল দেখতে পাবেন, কারণ দুর্ভাগ্যক্রমে বর্তমান সি কেইডিটরের আর্কিটেকচারটি এমন ডেটা প্রসেসর তৈরি করতে প্রস্তুত (এখনও) প্রস্তুত নয়। তবে আমি বিশ্বাস করি যে আপনি যদি কেবল কয়েকটি স্টাইলিং বিকল্প সরবরাহ করতে চান তবে আপনার খুব দ্রুত মার্কডাউন সমর্থন কার্যকর করতে সক্ষম হওয়া উচিত।


30

সিম্পলএমডিই , একজন নবাগত, এর উত্তর হতে পারে। আমি এখন এক মাস ধরে ঠিক এরকম কিছু সন্ধান করছি। আমি অবাক হয়েছি যে এটি অনুসন্ধানের ফলাফলগুলিতে উচ্চতর প্রদর্শিত হবে না। এটি খুঁজে পেতে আমাকে লেকচার / এডিটর সম্পর্কে একটি নোটিশ দিয়ে যেতে হয়েছিল ।

এখানে চিত্র বর্ণনা লিখুন


1
বাহ, ভাগ করে নেওয়ার জন্য ধন্যবাদ - এটি আমি যা খুঁজছিলাম ঠিক এটি। অসাধারণ!
জ্যারেড হোয়াইট

1
ধন্যবাদ এইচএনএল, এখানে একই।
মেলভিন

4
যদিও এটি WYSIWYG সত্য নয়। এটি সম্পাদক উইন্ডোতে মার্কডাউন মিশ্রিত করে। এই প্রশ্নটিতে যা চাওয়া হয়েছে তা হ'ল একটি সম্পাদক যা সমাপ্ত ভিউ এবং উত্স উভয়কে পৃথক দর্শনগুলিতে দেখায় (ফিডজেটের জন্য সরঞ্জামদণ্ডে 'উত্স' বোতাম সহ)।
একটি কোডার

9

23 সেপ্টেম্বর, 2015 সম্পাদনা করুন

CKEditor এখন একটি আছে Markdown addon যে এই সঠিক জিনিস আছে। অ্যাডন প্রকল্পটি গিথুবে হোস্ট করা হয়

স্ক্রীনশট:

মার্কডাউন ডাব্লুওয়াইএসআইওয়াইজি

মার্কডাউন উত্স


আমার ফেব্রুয়ারী 6, 2015 আপডেটে পোস্ট হিসাবে, সিকেইডিটারে এখন এমন প্লাগইন অন্তর্ভুক্ত রয়েছে যা বিবিসিওড ইনপুট এবং আউটপুটকে মঞ্জুরি দেয়।

একটি ডেমো এখানে উপলব্ধ: http://ckeditor.com/demo#bbcode

সম্পাদনা এপ্রিল 13, 2015:
কেউ CKEditor বিকাশ professing বলছেন যে চেহারা CommonMark একটি খেলা চেঞ্জার, এবং আমরা সম্ভবত একটি সঠিক দেখতে পারে CKEditor জন্য মার্কআপ ইন্টারফেস (সম্পূর্ণ গল্পের জন্য মন্তব্য পড়তে)।


"এই সঠিক জিনিস না?" অ্যাড-অন সিকেডিটরের সাধারণ অনুসারে এখনও এইড-অনের সাহায্যে এইচটিএমএল এবং মার্কডাউনকে আউটপুট করা হয় না।
user764754

8

পেন হ'ল নতুন (2014 সালের হিসাবে সক্রিয়) ডাব্লুওয়াইএসআইওয়াইওয়াইজি সম্পাদক যা মার্কডাউনকে আউটপুট করে
এটি নিখুঁত নয় — এইচটিএমএল পেস্ট করার ক্ষেত্রে আমার সমস্যা ছিল। তবে এটি কার্যকর।

সম্পাদনা: দুঃখিত! এটি মার্কডাউন আউটপুট দেয় না। ওয়ালারি স্ট্রাচ মন্তব্যগুলিতে উল্লেখ করেছেন যে আমি যে মার্কডাউন ফর্ম্যাটিং লক্ষণগুলি দেখেছি তা আসলে সিএসএস সিউডো উপাদান বিধি ছিল:

তবুও, আমি এটিকে এখানে বিকল্প হিসাবে রেখে দেব কারণ কিছু লোক এই উত্তরটিকে উচ্চ করে দিয়েছে এবং এটি কারওর পক্ষে ব্যবহারযোগ্য হতে পারে।


কলম ডেমোটি জায়গাটিতে সম্পাদনাযোগ্য, ওপি (আমার) কী আগ্রহী / আগ্রহী তা নয় not এই দ্বিতীয়টি সঠিকভাবে ইনস্টল করার সময় নেই। Aতিহ্যবাহী পাঠ্য বাক্স বিকল্প আছে?
একটি কোডার

@ অ্যাকোডার: আমার খারাপ! আমি বুঝতে পারি নি যে আপনি একটি নির্দিষ্ট সরঞ্জামদণ্ড চেয়েছিলেন। হালোর কী হয়েছে যদিও?
এটিতে

2
এটি এখনও এই স্ক্রিনশটের CSS লেআউট। আমি মার্কডাউন ডেটা ধরতে চাই (আমার স্ক্রিনশট i.imgur.com/fM4jFl2.png দেখুন )
ওয়ালারি স্ট্রাচ

1
@ ও্যালারিস্ট্রাচ বাহ, আমি সত্যিই বোকা ছিলাম। আমি বুঝতে পারিনি যে এটি আসলে আউটপুট নয়। আপনার সময় নষ্ট করার জন্য দুঃখিত! আমি উত্তর আপডেট করব।
ড্যান আব্রামভ

3
..এখন মার্কডাউন আউটপুট দেওয়ার জন্য কমপক্ষে বিটা সমর্থন রয়েছে বলে মনে হচ্ছে।
pjz

4

আমি একটি খুব সাধারণ সম্পাদক প্রয়োগ করেছি <textarea>যা মার্কডাউনযুক্ত সামগ্রীর একটি WYSIWYG ফ্যাশনে সম্পাদনা করার অনুমতি দেয় ।

আমি ব্যবহৃত হ্যালো । আমি মনে করি না যে এর ওয়েবসাইট এটি স্পষ্ট করে দিয়েছে যে এটি নিজেই মার্কডাউন ডাব্লুওয়াইএসআইওয়াইজি সম্পাদক নয় তবে ডেমোটি একটির পথ তৈরি করে।

হ্যালো একটি এর মধ্যে এইচটিএমএল এর WYSIWYG সম্পাদনার অনুমতি দেয় <div>। আমি জাভাস্ক্রিপ্ট ব্যবহার করেছি <textarea>যে কোনও ব্লকগুলিতে একটি নির্দিষ্ট wysiwygসিএসএস ক্লাস রয়েছে, এটির সাথে প্রতিস্থাপন করে <div>এবং এর সামগ্রীগুলি অনুলিপি <textarea>করতে <div>। অনুলিপিটি শোডাউনের মাধ্যমে চলে যা মার্কডাউন থেকে এইচটিএমএল উত্পাদন করে।

আর একটি জাভাস্ক্রিপ্ট রুটিন প্রতিবার <div>বিষয়বস্তু পরিবর্তিত হয়। এটা তোলে কপি বিষয়বস্তু (এখন লুকানো) ফিরে <textarea>। এইচটিএমএল থেকে মার্কডাউনতে রূপান্তর করতে সামগ্রীটি টু-মার্কডাউন হয়ে চলে।

যদি এটি <textarea>কোনও>> এর ক্ষেত্র হয় <formতবে সম্পাদিত মার্কডাউন সার্ভারে প্রেরণ করা হবে যখন সেই ফর্মটি জমা দেওয়া হবে।

এর জন্য অনুপ্রেরণা হ্যালো মার্কডাউন উদাহরণ , বিশেষত সম্পাদক . js ফাইল থেকে আসে । আমি জন্য একটি ভিত্তি হিসাবে ব্যবহার আমার নিজের স্ক্রিপ্ট সহ hallo.js , showdown.js এবং টু-markdown.js

আমার স্ক্রিপ্ট, wysiwyg.js হ্যালো মার্কডাউন উদাহরণ থেকে সম্পাদক . js এর উদ্ভব । কিছু বিষয় লক্ষ্য করুন:

  • আমি এটি একটি রেল অ্যাপ্লিকেশনটিতে ব্যবহার করি (এটি যে গুরুত্বপূর্ণ তা নয়)
  • এটি পরে readyএবং এটিও চালিয়ে page:loadযায় কারণ রেলগুলি টারবোলিংক ব্যবহার করে
  • এটি চালু ajaxCompleteকারণ আমি ফর্ম ত্রুটি রিপোর্টের জন্য এজাক্স ব্যবহার করি
  • অন্যান্য নির্ভরতা আছেন: JQueryUI এবং বিস্তৃত (পাগল ব্যবহারকারীদের রত্ন উপকার করতে পারেন jQuery-ui এ-পাগল এবং বিস্তৃত-পাগল )।
  • এছাড়াও টুল বার আইকনগুলির জন্য হরফ হ'ল ফন্ট ব্যবহার করা হয়। ডেমোhallo.js দ্বারা ব্যবহৃত সংস্করণটির মেয়াদ শেষ হয়ে গেছে (এটি হ'ল ফন্টের দুর্দান্ত সংস্করণ ব্যবহার করে) - এর পরিবর্তে গিটহাব থেকে হ্যালো.জেএস ব্যবহার করুন।

এটিতে ডাব্লুওয়াইএসআইওয়াইজি সক্ষম করার জন্য আপনাকে কেবল যে কোনওতে সিএসএস যুক্ত class='wysiwyg'করতে <textarea>হবে। <textarea>Markdown ফরম্যাট করা টেক্সটের conain করা উচিত নয়।

আমি আশা করব যে ওয়াইসওয়াইগ.জেএস সহজেই অন্য সম্পাদক ব্যবহার করতে সক্ষম হয় যদি আপনি হ্যালো পছন্দ না করেন যতক্ষণ না এটি এটি এইচটিএমএলে কাজ করে <div>। বেশ কয়েকটি বেছে নিতে বেছে নেওয়া হয়েছে তবে সবগুলি হালোর চেয়ে হালকা ওজনের নয় ।

আমার পাওয়া কাজের একটি হাসির টুকরোটি মার্কডাউন -এইচটিএমএল-ফর্ম । এটি একই শোডাউন এবং টু-মার্কডাউন ব্যবহার করে


আরে @ স্টারফ্রাই, আপনি উপরে বর্ণিত যা ব্যবহার করেছেন তা পুনরুত্পাদন করার চেষ্টা করেছি wysiwyg.js, তবে কোনও দুর্দান্ত সাফল্য মেলেনি । ভাবছেন যদি আপনার সাথে কোনও এইচটিএমএলও কোথাও কোথাও ছিটিয়ে থাকে? নির্ভরতাগুলির স্থিতিশীল সংস্করণ তালিকা ইত্যাদি? ধন্যবাদ!
জেমসন

1
@Jameson আমি আমার কাছে কিছু নোট যুক্ত করেছেন সারকথা । আমি আশা করি তারা সাহায্য করবে! আপনার যদি কিছু প্রশ্ন থাকে তবে সংক্ষেপে মন্তব্য যুক্ত করতে নির্দ্বিধায়
স্টারফাই

3

আমি একটি মার্কডাউন সম্পাদকও খুঁজছি যা এই থ্রেডের শীর্ষে বর্ণিত হয়েছে

আপনি কি "মার্কডাউন সরঞ্জামগুলি" দেখেছেন: http://md-wysiwyg.sourceforge.net/

ডেমো: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

এটি আমরা যা খুঁজছি তার কাছাকাছি মনে হচ্ছে এটি আপনার ডাব্লুওয়াইএসওয়াইওয়াইজি সমৃদ্ধ পাঠ্য গ্রহণ এবং মার্কডাউন আউটপুট করার একটি যুক্তিসঙ্গত কাজ করে। তবে আমি কোনও গুগল ডক থেকে কিছু সমৃদ্ধ পাঠ্য পেস্ট করার সময় এটি কোনও এনকোডিং ব্যতিক্রমে ব্যর্থ হয়েছিল।


এটির জন্য উত্স কোডটি HTML টি মার্কডাউন নয় shows
একটি কোডার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.