অ্যাডমিন এডিটর শর্টকোডগুলি রেন্ডার করার সমাধান

Question

আমি এই প্রশ্নটি প্রায় এক বছর আগে জিজ্ঞাসা করেছি এবং আমি আশা করছি যে কোনও ধরণের সহজ সমাধান রয়েছে যা আমাকে আমার উদ্দেশ্য অর্জন করতে দেবে। সুতরাং এখানে এটি যায়:

আমি প্রায়শই অ্যাডমিন এডিটর এর মধ্যে শর্টকোড ব্যবহার করি তবে আমি যখন এটি ক্লায়েন্টের দিকে ফিরিয়ে দিই তারা প্রায়শই বুঝতে পারে না তারা কীভাবে কাজ করে।

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

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

Comments

আপনি কি ( wp.tutsplus.com/tutorials/theme-de વિકાસment/… ) নিবন্ধটি পড়েছেন ? টিনিএমসিই অংশটি পরীক্ষা করুন।

— cr0z3r

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

— নেটকন্সট্রাক্টর.কম

আপনি কী বোঝাতে চাইছেন যে আপনি যে দৃশ্যমান শর্টকোডকে অন্তর্ভুক্ত করছেন তার প্রতিনিধি এবং বাস্তবে শর্টকোডটি বাস্তব-চুক্তি এইচটিএমএল দ্বারা প্রতিস্থাপন না করে এমন একটি ভিজ্যুয়াল এইড অন্তর্ভুক্ত করতে চান? অর্থাত্ গ্যালারী স্থানধারক, যা আসলে গ্যালারী কোড নয়, বরং একটি ভিজ্যুয়াল প্লেসোল্ডার যা কেবল ব্যবহারকারীকে জানিয়ে দিচ্ছে, "আরে, এখানে একটি গ্যালারী আছে"?

— ম্যাথু বয়েনেস

একদম ঠিক! এবং আমি

— এটিটি

wordpress.org/plugins/shortcode-ui

— jgraup

Answer 1

আপনি যা বলছেন তা করা আসলে এটি খুব খারাপ নয়। আপনার প্রথমটি করতে আপনার এক ঘন্টা এবং পরবর্তী সময়গুলি করতে 10 মিনিট সময় লাগবে।

শেষ পর্যন্ত আপনি যা করতে যাচ্ছেন তা হচ্ছে একটি টিনিএমসিই প্লাগইন তৈরি করা। শুরু করার জন্য আপনার নিজেকে কীভাবে সজ্জিত করা উচিত তা এখানে:

1. একটি ক্ষুদ্রতম প্লাগইন তৈরির সাধারণ গাইড
2. ওয়ার্ডপ্রেস কোর থেকে উদাহরণ কোড
3. ওয়ার্ডপ্রেসে একটি TinyMCE প্লাগইন যুক্ত করার জন্য একটি সাধারণ গাইড। আমি দেখেছি এই এক , যা পর্যাপ্ত বলে মনে হয়।

কাজ শেষ করার জন্য এখন আপনার কাছে সমস্ত সরঞ্জাম রয়েছে! এই সমস্তগুলির মধ্যে, আপনার পক্ষে সবচেয়ে বেশি আগ্রহী কোডটি হ'ল ডাব্লুপি উদাহরণ কোডটিতে এই ব্লকটি রয়েছে:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

এখানে, গ্যালারীটির শর্টকোড একটি imgট্যাগ দিয়ে প্রতিস্থাপিত হবে । imgট্যাগ বর্গ হয়েছে wp-gallery, স্টাইল দ্বারা পরার যা সিএসএস এখানে পাওয়া ।

2016-04-06 সম্পাদনা করুন: TinyMCE 4 এবং ওয়ার্ডপ্রেস 4.4 এর জন্য আপডেট হওয়া সামগ্রী এবং লিঙ্কগুলি

Comments

মজাদার! আমাকে জিজ্ঞাসা করতে দিন ... সমস্ত শর্টকডের আসল সামগ্রীটি স্বয়ংক্রিয়ভাবে সংযুক্ত সামগ্রীতে রূপান্তরিত হওয়ার বিষয়ে আপনার কী ধারণা?

— নেটকন্সট্রাক্টর.কম

এটি সমস্ত বিষয়বস্তুর উপর নির্ভর করে। প্রথমে মনে রাখবেন যে কিছু এইচটিএমএল কেটে যায়, টিনিএমসিএ ইত্যাদিতে রেন্ডার করতে সমস্যা হয় Second দ্বিতীয়ত, আসুন আমরা বলতে পারি যে আপনার শর্ট কোডটি জটিল HTML এর একটি ব্লক রেন্ডার করে - যদি আপনার ব্যবহারকারী এটি সম্পাদনা করতে যান তবে তারা অজান্তেই এটি ভেঙে ফেলতে পারে। তৃতীয়ত, যদি আপনার শর্ট কোডের বিকল্প থাকে, আপনি যদি এইচটিএমএল ব্লককে না মেরে এবং শর্টকোডটি পুনরায় না করেন তবে unless বিকল্পগুলি এখন অকেজযোগ্য রেন্ডার করা হবে। সম্ভাবনাগুলি হ'ল, যদি আপনার কোডটি যথেষ্ট জটিল হয় যে আপনার শর্টকোডের দরকার পড়ে তবে আমি মনে করি স্থানধারক আপনার সেরা বাজি।

— ম্যাথু বয়েনেস

আপনি কি কখনও এই বিষয়ে অন্য কারও দ্বারা সমাধান দেখতে পেয়েছেন?

— নেটকন্সট্রাক্টর.কম

Answer 2

এটি সম্পূর্ণ উত্তর নয়, কেবল একটি ডিজাইনের দিকনির্দেশ। আমি মনে করি সেরা পন্থাটি এরকম কিছু:

প্রশাসক সম্পাদনা পোস্টে

সংরক্ষিত পোস্ট থেকে সমস্ত শর্টকোড ছিঁড়ে ফেলুন এবং সম্পাদক থেকে আলাদা করে কোনও মেটাবক্সের ভিতরে রেন্ডার করুন । ক্ষুদ্র সম্পাদকের শর্টকডগুলি যেমন ঘটে থাকে তেমনি শ্যুর করুন appears

TinyMCE জাভাস্ক্রিপ্ট এপিআই এ

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

রেন্ডার শর্টকোডের অবস্থাটি কখনও সংরক্ষণ করবেন না

সম্পাদকগুলি স্যুইচ করার আগে, খসড়াগুলি, অটোড্রাফ্টগুলি সংরক্ষণ করুন এবং প্রকাশ করুন, পুনরুদ্ধারটি ট্রিগার করতে একটি API কল করুন, যাতে রেন্ডার শর্টকোডের অবস্থা কখনই সংরক্ষণ হয় না ...

এটি করা যেতে পারে তবে সম্পাদকের বিষয়বস্তুটি কোথায় এবং কখন অ্যাক্সেস করতে হবে তা বুঝতে এবং 'সেভ' এর আগে এবং আরও কিছুতে জাভাস্ক্রিপ্টের ক্রিয়াকলাপটি আঁকতে আপনার ক্ষুদ্র MCE API এর সাথে ফ্যামিলার হওয়া দরকার।

একই সম্পাদনা পোস্ট পেজ লোডে একাধিক tinyMCE সম্পাদক থাকতে পারে।

পুনঃস্থাপন অংশ দিকে তাকিয়ে তদন্ত করা যেতে পারে [gallery]সর্টকোড beaviour। তবে [MY_SHORTCODE]ক্লিকটি কিছু jQuery কৌশল দ্বারা করতে হবে।

অ্যাডমিন_ফুটার স্ক্রিপ্টে, কার্সারটি যেখানে সক্রিয় রয়েছে তার সামগ্রীতে অ্যাক্সেস করুন:

var $editor_content = $(tinymce.activeEditor.getBody());

কীভাবে শুরু করা যায় তার ইঙ্গিত।

Answer 3

আমি গ্রাফিকভাবে প্রদর্শন এবং শর্টকোডগুলি খুব খুব ভাল করার জন্য একটি উপায় খুঁজছিলাম। এবং এখন, অবশেষে, আমি একটি টিউটোরিয়াল পেয়েছি যা ঠিক এটি করে: https://generatewp.com/take-shortcodes-ultsmate-level/

আমি বর্ণনাটি যুক্ত করব যাতে সার্চ ইঞ্জিনগুলি এটি গ্রহণ করে:

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