এজেএক্স / জিকুয়েরির মাধ্যমে কীভাবে ডাব্লুপি_এডিটর () লোড করবেন

Question

আমার একটি থিম রয়েছে যা কাস্টম বিকাশযুক্ত এবং সত্যিই জটিল। আমার কাছে থাকা জিনিসগুলির মধ্যে একটি হ'ল একাধিক সামগ্রী ক্ষেত্র যেখানে ব্যবহারকারীরা নির্দিষ্ট ট্যাবগুলির জন্য সামগ্রী নির্দিষ্ট করতে পারেন। আমি wp_editor()ফাংশনটির মাধ্যমে ওয়ার্ডপ্রেস সম্পাদকের একাধিক উদাহরণ লোড করি । এটি পুরোপুরি কাজ করে। ("পৃষ্ঠা" পোস্টের ধরণীতে এটি প্রশাসকের পক্ষে রয়েছে)

যাইহোক, আমি গতিশীলভাবে ট্যাবগুলি যুক্ত / সরানোর ক্ষমতা সহ কয়েকটি উন্নতি করতে শুরু করেছি (আগে, আমি পৃষ্ঠায় 6 টি সম্পাদককে লোড করেছি)। ব্যবহারকারীদের 1-7 টি ট্যাব থাকতে পারে।

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

আমি এখন পর্যন্ত 2 টি জিনিস যা চেষ্টা করেছি তা এখানে:

1. এমন একটি পিএইচপি ফাইল তৈরি করুন যাতে অ্যাডমিন বুটস্ট্র্যাপ অন্তর্ভুক্ত থাকে এবং তারপরে সম্পাদক লোড করা থাকে wp_editor()। আমি তখন $.loadপৃষ্ঠায় কল করতে একটি jQuery করি এবং ফলাফলটি প্রদর্শিত এইচটিএমএলকে যে অঞ্চলে প্রদর্শিত হবে তা অন্তর্ভুক্ত করে। এটি সম্পাদনকারী বোতামগুলির বোতামগুলি অদৃশ্য হওয়ার সাথে সাথে এটি সত্যই কার্যকর হয় না (এটি লক্ষ করার মতো যে, পৃষ্ঠাটি সরাসরি উপরে টানলে সম্পাদক সম্পাদনা এবং পুরোপুরি কার্য সম্পাদন করে)
2. কোনও লুকানো ডিভের অভ্যন্তরে পৃষ্ঠায় সম্পাদকটি লোড করুন এবং তারপরে একবার কোনও ট্যাব যুক্ত হয়ে গেলে, এটি স্থানটিতে সরিয়ে নিতে jquery ব্যবহার করুন। এটি সম্পাদককে কৌশলে বোঝায়, তবে আপনি কোনও সম্পাদক বোতাম ব্যবহার করতে পারবেন না (সেগুলি প্রদর্শন করে তবে কিছুই করেন না) এবং আপনি পাঠ্য অঞ্চলে আপনার কার্সারটি রাখতে পারবেন না (তবে কৌতূহল, যে এইচটিএমএল মোডে স্যুইচ করছে) এইচটিএমএল মোড বোতামগুলির সাথে টাইপিং এবং কিছু কথোপকথনের অনুমতি দেয়)

সুতরাং প্রশ্নটি হচ্ছে, কেউ কি ভাগ্যবান হয়েছে এজেএক্স কলগুলির মাধ্যমে সম্পাদক যুক্ত করেছে? কোন পরামর্শ?

Comments

আপনি কি একটি এজ্যাক্স কল মাধ্যমে চেষ্টা করার চেষ্টা করেছেন admin-ajax.php? যদি আপনার কোড দিয়ে কোনও ফাংশন না করে থাকে তবে admin-ajax.php

— সেটির

কি এই প্রস্তাবনাটি সাহায্য করেছিল? যদি তা হয় তবে এটি কোনও ওয়ার্ডপ্রেস প্রশ্ন নয়। :)

— ফুসিয়া

@ সিসির, আমি যদি আপনার পরামর্শটি সঠিকভাবে পড়ছি, তবে এটি কার্যকর হয়নি। আমি এটি আজাক্স ফর্মটি কল করতে ব্যবহার করেছি: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add_editor');এবং তারপরে ফিরে আসে এমন একটি ফাংশন যুক্ত করেছি wp_editor()। এটি কোনও সমস্যা ছাড়াই ডেকে আনে, তবে এটি এখনও কোনও বোতাম ছাড়াই সম্পাদককে ফিরিয়ে দেয়। (ওপিতে আইটেম 1 হিসাবে হুবহু একই ফলাফল)

— অ্যারন ওয়াগনার

একবার আরম্ভ করা টিনিএমসিকে ডিওএমের আশেপাশে সরানো যায় না। আপনাকে এটি অপসারণ করতে হবে, ডিওএম এ সরানো হবে এবং আবার শুরু করতে হবে। অনুরূপ কোড তবে আমার ব্লগে এখানে অগ্রণী মন্তব্যের জন্য : techytalk.info/… মন্তব্য ফর্ম সরানো হয় যখন ব্যবহারকারী ক্লিক করে উত্তর / উত্তর বাতিল করে দেয়।

Answer 1

কুইকট্যাগগুলি দেখানোর জন্য, আপনাকে সেগুলি আপনার অজ্যাক্স অন-পরিপূর্ণ হ্যান্ডলারের মধ্যে পুনরায় ইনস্ট্যান্ট করতে হবে।

quicktags({id : 'editorcontentid'});

আমার এজাক্স সাফল্যের হ্যান্ডলারটি দেখতে এমন দেখাচ্ছে;

success: function(data, textStatus, XMLHttpRequest){
            //append editor to dom
            $('#container').append($(data).html());
            //init quicktags
            quicktags({id : 'editorcontentid'});
            //init tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

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

এটি গুরুত্বপূর্ণ যে আপনি যখন আপনার সম্পাদক উদাহরণটি তৈরি করেন, আপনি এটি টিনেমস ব্যবহারের জন্য সেট করেন, সেইভাবে টিনেমস জেএস ফাইলটিও এনকোড করা থাকে।

Answer 2

এটির সাথে লড়াই করার পরে, সমাধানটি খুঁজে বের করে যা কার্যকর হয়, আপনি নতুন উপাদান যুক্ত করার পরে একটি কলব্যাকে:

tinymce.execCommand( 'mceAddEditor', true, element.id );

এটি আশ্চর্যজনক যে কোডেক্সের অভ্যন্তরে শূন্য ডকুমেন্টেশন রয়েছে।

Comments

টিনিমেস একটি বাহ্যিক সংস্থান, তাই আমার মনে হয় তারা মনে করতে পারে যে টেনিমসের নিজস্ব ডকগুলি এটি আবৃত করে - tinymce.com / ডকস - তবে উদাহরণগুলির তুলনায় বেশ দরিদ্র ... এছাড়াও কাজের উত্তরের জন্য আপনাকে অবশ্যই টিন্মস স্ক্রিপ্টগুলি অন্তর্ভুক্ত করতে হবে! (simpliest উপায় আউটপুট এক পিএইচপি ডামি হয় wp_editor()সঙ্গে tinymceথেকে ARG সেট true:-)

— jave.web

ধন্যবাদ সাথী ... এটি আমার

— পক্ষেও কাজ করে

Answer 3

পরিশেষে, সমাধান কাজ:

ওয়ার্ডপ্রেসে অ্যাকশন যুক্ত করুন, আসুন বলতে দিন My_Action_Name(টেক্সটরিয়া আইডিও নোট করুন My_TextAreaID_22):

add_action('wp_ajax_My_Action_Name', function(){
    wp_editor( $_POST['default_text'], 'My_TextAreaID_22',      $settings = array( 'tinymce'=>true, 'textarea_name'=>'name77', 'wpautop' =>false,   'media_buttons' => true ,   'teeny' => false, 'quicktags'=>true, )   );    exit;
});

এখন, ড্যাশবোর্ডে, এই ফাংশনটি সম্পাদন করুন (নোট, এর ব্যবহার My_TextAreaID_22এবং ব্যবহার করুন My_Action_Name):

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Get default Wordpress SETTINGS  ( I cant confirm, but if you will need to change target ID, then add this line:  My_New_Global_Settings.selector = "My_TextAreaID_22";   )
    jQuery.post(ajaxurl,
        { action: "My_Action_Name",     default_text: "Hello World"}, 
        function(response,status){ 
            tinymce.init(My_New_Global_Settings); 
            tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
            quicktags({id : "My_TextAreaID_22"});
            // tinyMCE.execCommand( 'mceAddEditor', true, element.id );
        }
    );

}   
start_Ajax_request();     // < ---- EXECUTE

Answer 4

আপনার এজাক্স টেক্সারিয়া যুক্ত করার পরে আপনাকে আবারও সম্পাদক ডাকতে হবে, আমি এটি এটি করেছি:

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // other options here
  });
};

তারপরে আপনার অজ্যাক্সের পরে আপনার ফাংশনটিতে কল করুন:

$('#my_new_textarea_container').html(response).tinymce_textareas();

Comments

দয়া করে ব্যাখ্যা করুন কীভাবে এটি কাজ করে? এটা কাজ করে না. আমি এটা চেষ্টা করেছি.

— আহমেদ ফুয়াদ

আমি টেক্সারিয়ায় থাকা এজাক্স সামগ্রী যুক্ত করার পরে আমি ( response) উপর ক্ষুদ্রতর ম্যাক চাই ।

— শাহর

Answer 5

উপর @toscho থেকে ব্যবহারযোগ্য সমাধান GitHub । তিনি এখানে একটি প্রশ্নের জন্য এই দুর্দান্ত ফলাফলটি তৈরি করেন, আরও তথ্যের জন্য তার উত্তর দেখুন।

Comments

এটি ব্যবহারের জন্য একটি লাইব্রেরি প্রয়োজন - টি 5 ... কেবলমাত্র ডাব্লুপি-সমাধান নয়

— cale_b

Answer 6

এই কোডটি ব্যবহার করুন, আশা করি এটি সহায়তা করবে:

wp_editor( '', 'custom_editor_id' );
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

আরও বিশদ এখানে পাওয়া যাবে ।

Comments

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

— মায়িনুল ইসলাম

সেই লিঙ্কটি এখনই ভেঙে গেছে এবং উত্তরের পিছনে আমার কোনও প্রসঙ্গ নেই। ("কেবল একটি লিঙ্ক" উত্তরগুলি খারাপ হওয়ার একাধিক কারণগুলির মধ্যে একটি)

— সুদার

এটি কাজ করে তবে কিছু সমস্যা রয়েছে, আপনি যখন পাঠ্য বা ভিজ্যুয়াল নির্বাচন করেন এটি সম্পাদকের মধ্যে নকল পাঠ্য অঞ্চল তৈরি করে

— জোহান প্রিটোরিয়াস

Answer 7

আমি এটি এইভাবে পরিচালনা করেছি:

1. প্রথমে আপনাকে মূল পৃষ্ঠায় ডব্লিউপি_এডিটর কল করতে হবে, যেখানে আপনি অজ্যাক্স কল করেছেন। তবে আপনাকে অবশ্যই এটি লুকানো ডিভিডে আবদ্ধ করতে হবে:

    <div style="display:none">
    <?php
    wp_editor( '', 'unique_id', array(
        'media_buttons' => false,
        'textarea_rows' => 10,
        'teeny' => true,
    ) );
    ?>
    </div>

আইডি অবশ্যই রন্ডম এবং অনন্য হতে হবে। সেটিংস অবশ্যই আপনার এজাক্স সম্পাদকের সেটিংসের মতো হওয়া উচিত।

2. দ্বিতীয় আপনি এজ্যাক্স প্রতিক্রিয়া এ কল প্রয়োজন:

wp_editor( '', '[set id as you need]', array(the same settings as in the main page) ); _WP_Editors::editor_js(); //this print editor init code

Answer 8

এটি অ্যাডমিন পৃষ্ঠাগুলিতে কাজ করবে।

জেএস এজেএক্স দ্বারা একটি ধারকটিতে একটি নতুন ডাব্লুপিপি সম্পাদক যুক্ত করতে:

1) ডাব্লুপি_এডিটরটি ফিরিয়ে আনার জন্য ফাংশন.এফপিতে একটি ডব্লিউপি_জ্যাক্স ফাংশন তৈরি করুন

২) কোনও বোতাম টিপে যখন এই ক্ষেত্রে, একটি নতুন পাঠ্য সম্পাদককে অনুরোধ করার জন্য একটি jQuery স্ক্রিপ্ট তৈরি করুন এবং এটি একটি ধারকটিতে যুক্ত করুন

পিএইচপি ফাইল

function yourprefix_get_text_editor() {
    $content = ""; // Empty because is a new editor
    $editor_id = $_POST["text_editor_id"]; // Random ID from AJAX JS call
    $textarea_name = $_POST["textarea_name"]; // Name from JS file
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // Mandatory wp_die
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

জেএস স্ক্রিপ্ট (jsfile.js)

jQuery(function($) {
$("someelement").click(function(e) { // To Add an Editor from a button click
    var target = themeajax.ajax_url; // Passed from wp_localize_script
    var editor_id = "editorid"; // Generate this dynamically
    var textarea_name = "textareaname" // Generate this as you need
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Use your logic to get the container where you want to append the editor
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

স্ক্রিপ্টগুলি কল করুন:

function yourprefix_admin_scripts($hook) {
    wp_enqueue_script('your-slug', get_stylesheet_directory_uri() . '/path/to/jsfile.js', array('jquery'), null, true);
    wp_localize_script('your-slug', 'themeajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('admin_enqueue_scripts', 'yourprefix_admin_scripts');