jQuery এবং TinyMCE: টেক্সারিয়ার মান জমা দেয় না

Question

আমি ফর্ম জমা দেওয়ার জন্য jQuery এবং টিনিএমসিই ব্যবহার করছি , তবে সিরিয়ালায়নে সমস্যা আছে যে টেক্সারিয়া মানটি পোস্ট করে না।

কোডটি এখানে:

<form id="myForm" method="post" action="post.php">
    <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

ভাষা: ল্যাং-জেএস

$('#myForm').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
            $('#result').fadeIn('slow');
            $('#result').html(data);
            $('.loading').hide();
        }
    })
    return false;
});

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,separator,image,separator,justifyleft,justifycenter,justifyright,jformatselect,fontselect,fontsizeselect,justifyfull,bullist,numlist,undo,redo,styleprops,cite,link,unlink,media,advhr,code,preview",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resize_horizontal : false,
    theme_advanced_resizing : true,
    extended_valid_elements :"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
});

আমার কী পরিবর্তন করা উচিত তা আপনি আমাকে ব্যাখ্যা করতে পারেন, এবং কেন, পাঠ্য অঞ্চলের মানটি পোস্ট করার জন্য?

Answer 1

ফর্ম জমা দেওয়ার আগে কল করুন tinyMCE.triggerSave();

Comments

টিকিএমসিই 3.2+ ব্যবহার করে জ্যাকুয়েরি প্লাগইনটি ব্যবহার করুন: $('#textarea_id').tinymce().save();আপনার ফর্মের সাবসেট হ্যান্ডলারে।

— ব্রেন্ডেন

@ ব্রেনডেন আমি ৩.৩.৮ সংস্করণটি টিনিমস ব্যবহার করছি এবং কনসোলে এটি ত্রুটিটি দেখায় যে টিনিমেস () কোনও ফাংশন নয়। আমি আমার সমস্যাটি বড় বিষয়টির সাথে স্থির করেছি

— কোড

সেরা উত্তর, সংক্ষিপ্ত তবে মিষ্টি এবং এটি সবচেয়ে পরিষ্কার সমাধান। একাধিক ক্ষেত্রের সাথেও কাজ করে। কেবল ত্রুটিটি হ'ল এটি সমস্ত উপাদানগুলির জন্য সঞ্চয়কে ট্রিগার করে।

— হুগো জিংক

tinymce.init ({নির্বাচক: 'টেক্সারিয়া'});

— সুরজ

ড্যান ম্যালকমের বর্তমান সংস্করণটির সেরা উত্তর রয়েছে - দয়া করে নীচের পোস্টটি দেখুন - প্রথমে তালিকাভুক্ত হওয়ার জন্য আরও 70 টি আপভোট দরকার।

— রবার্ট গুইস

Answer 2

টিনিএমসিই সম্পাদকদের মাধ্যমে পরিবর্তনগুলি করা হয় বলে আপনি লুকানো টেক্সারিয়ার মানগুলি সিঙ্কে রাখার জন্য নীচে TinyMCE কনফিগার করতে পারেন:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
});

টেক্সারিয়া উপাদানগুলি স্বয়ংক্রিয়ভাবে আপ টু ডেট রাখা হবে এবং ফর্মগুলি সিরিয়ালাইজ করার আগে আপনার কোনও অতিরিক্ত পদক্ষেপের প্রয়োজন হবে না etc.

এটি TinyMCE 4.0 এ পরীক্ষা করা হয়েছে

ডেমো এখানে চলছে: http://jsfiddle.net/9euk9/49/

আপডেট: উপরোক্ত কোডটি ডুমানিয়াকের মন্তব্যের ভিত্তিতে আপডেট করা হয়েছে

Comments

দুর্দান্ত, এখন এটি কাজ করে। আমি বুঝতে পারছি না কেন সম্পাদকীয় ডকুমেন্টেশনে এরকম কিছু উল্লেখ করা হয়নি।

— জনএ 10

tinemce.triggerSave()save()আপনার সমস্ত সক্রিয় সম্পাদকদের জন্য ফাংশনটি কল করে । আপনার যদি একাধিক থাকে তবে আপনার অন চেঞ্জ ফাংশনটি সেট করতে আরও দক্ষeditor.on('change', editor.save);

— ডুমোনিয়াক

@ ডুমানিয়াক - ধন্যবাদ, ধন্যবাদ উত্তর এবং জেসফিডেল আপডেট হয়েছে। সম্পাদকের অবজেক্টের পদ্ধতি হিসাবে সেভ বলা হয় তা নিশ্চিত করার জন্য আমি কলব্যাকে বেনামে ফাংশন ধরে রেখেছি।

— ড্যান ম্যালকম

৪.১.০ এর উপরে টিনেমস সংস্করণ সহ একটি বাগ রয়েছে যার মধ্যে গা the় এবং ইটালিক বোতাম রয়েছে যার জন্য 'এমস-অ্যাক্টিভ' শ্রেণিটি সরাসরি যুক্ত করা হয় না (তবে কেবল টেক্সারিয়ার ক্ষেত্রে টাইপ করা কয়েকটি চরিত্রের পরে) - এইভাবে বোতামগুলি তা দেয় না সক্রিয় দেখুন ... তারযুক্ত ... ( jsfiddle.net/9euk9/304 )

— ওউয়াতাজ

দুর্দান্ত সমাধান!

— শাকিল আহমেদ

Answer 3

থেকে TinyMCE, jQuery এবং আয়াক্স ফরম :

TinyMCE ফর্ম জমা

• টিনিএমসিএ দ্বারা টেক্সেরিয়া প্রতিস্থাপন করা হলে এটি প্রকৃতপক্ষে লুকানো থাকে এবং পরিবর্তে টিনিএমসিই সম্পাদক (একটি আইফ্রেমে) প্রদর্শিত হয়।

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

• একটি স্ট্যান্ডার্ড ফর্ম জমা দেওয়ার জন্য, এটি TinyMCE দ্বারা পরিচালিত। আজাক্স ফর্ম জমা দেওয়ার জন্য, আপনাকে কল করে (ফর্মটি জমা দেওয়ার আগে) ম্যানুয়ালি করতে হবে:

  tinyMCE.triggerSave();

$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});

Answer 4

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

ফর্মটিতে একটি লুকানো ক্ষেত্র যুক্ত করুন:

<input type="hidden" id="question_html" name="question_html" />

ফর্মটি পোস্ট করার আগে সম্পাদকের কাছ থেকে ডেটা পান এবং লুকানো ক্ষেত্রে রাখুন:

$('#question_html').val(tinyMCE.get('question_text').getContent());

(আপনি সাধারণত ফর্মটি পোস্ট করলে সম্পাদক অবশ্যই এটির যত্ন নেবে, তবে আপনি ফর্মটি স্ক্র্যাপ করে ফর্মটি ব্যবহার না করে নিজেই ডেটা প্রেরণ করছেন, ফর্মটিতে অনসামিত ইভেন্টটি কখনই ট্রিগার হয় না))

Comments

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

— ব্রেন্ডেন

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

— গুফা

ডাউনটা কেন? আপনি যদি ভুল বলে মনে করেন তবে এটি কী ব্যাখ্যা না করে তবে উত্তরটি উন্নত করতে পারে না।

— গুফা

Answer 5

আপনি যখন নিজের ফর্মটিতে এজাক্স চালাবেন, আপনাকে প্রথমে আপনার টেক্সেরিয়াকে আপডেট করার জন্য টিনিএমসিএলকে বলা দরকার:

// TinyMCE will now save the data into textarea
tinyMCE.triggerSave(); 
// now grap the data
var form_data = form.serialize(); 

Answer 6

আমি ব্যবহার করতাম:

var save_and_add = function(){
    tinyMCE.triggerSave();
    $('.new_multi_text_block_item').submit();
};

আপনার যা করা দরকার তা এটিই।

Answer 7

আপনি টেক্সারিয়ার ফোকাস হারিয়ে ফেললে এটি নিশ্চিত করবে যে সামগ্রীটি সংরক্ষণ হবে

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });

Answer 8

var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));

Comments

TinyMCE.activeEditor.getContent () ব্যবহার করাটাই আমি কাজ করতে পারি। ধন্যবাদ!

— ম্যাডটুরকি

Answer 9

আপনি TinyMCE এর জন্য jQuery প্লাগইন এবং প্যাকেজটি সহজেই ব্যবহার করতে পারেন এটি এই ধরণের সমস্যার সমাধান করে।

Answer 10

আমার কিছুক্ষণের জন্য এই সমস্যাটি ছিল এবং triggerSave()কাজ করে না, বা অন্য কোনও পদ্ধতিতেও হয় নি।

সুতরাং আমি একটি উপায় খুঁজে পেয়েছি যা আমার পক্ষে কাজ করেছিল (আমি এটি এখানে যুক্ত করছি কারণ অন্যান্য লোকেরা ইতিমধ্যে ট্রিগারসেভ এবং অন্যদের চেষ্টা করেছে ...):

tinyMCE.init({
   selector: '.tinymce', // This is my <textarea> class
   setup : function(ed) {
                  ed.on('change', function(e) {
                     // This will print out all your content in the tinyMce box
                     console.log('the content '+ed.getContent());
                     // Your text from the tinyMce box will now be passed to your  text area ... 
                     $(".tinymce").text(ed.getContent()); 
                  });
            }
   ... Your other tinyMce settings ...
});

আপনি যখন আপনার ফর্মটি জমা দিচ্ছেন বা যা কিছু যা করতে হবে তা আপনার নির্বাচক (আমার ক্ষেত্রে .tinymce:) ব্যবহার করে ডেটা হস্তান্তর করুন $('.tinymce').text()।

Answer 11

@ ফিল্ডার: আমার সাথে একই সমস্যা ছিল normal.6. 3. 'নরমাল মোডে' চলছে; এবং ট্রিগারসেভ বা সেভ () কোনওটিই কাজ করছে না।

আমি jQuery TinyMCE প্লাগইনে পরিবর্তন করেছি এবং এখন এটি কাজ করছে এমন আরও কিছু না করে। আমি লাইন ধরে কোথাও ধরে নিচ্ছি যে তারা টিনিএমসিই এর jQuery সংস্করণের জন্য কিছু প্রকারের অটো ট্রিগারসেভ প্রয়োগ করেছে।

Comments

আকর্ষণীয় সন্ধান। আমি বিশ্বাস করি আপনি সংস্করণ 3.5.7 বলতে চান? আমি মাত্র 3.5.7 এবং 3.5.8 দিয়ে কিছু পরীক্ষা tinyMCE.triggerSave()করেছি এবং স্বাভাবিক মোডে আমার পক্ষে ভাল কাজ করে। তবে আপনি ঠিক বলেছেন যে জকিউরি মোডে ইতিমধ্যে কিছু ধরণের অটো সেভ রয়েছে, যা tinymce.com/wiki.php/plugin:autosave এর বিরোধিতা করে : "সম্ভবত এজেএক্স অটো সংরক্ষণ সমর্থন সরবরাহ করতে এই প্লাগইনটি ভবিষ্যতে সম্ভবত বাড়ানো হবে।"

— Sayap

Answer 12

আমি কেবল () ক্ষুদ্রতম অংশটি লুকিয়ে ফর্মটি জমা করি, টেক্সেরিয়ার পরিবর্তিত মূল্য অনুপস্থিত। সুতরাং আমি এটি যুক্ত করেছি:

$("textarea[id='id_answer']").change(function(){
    var editor_id = $(this).attr('id');
    var editor = tinymce.get(editor_id);
    editor.setContent($(this).val()).save();
});

এটা আমার জন্য কাজ করে.

Answer 13

tinyMCE.triggerSave(); এটি সঠিক উত্তর বলে মনে হচ্ছে, কারণ এটি আইফ্রেম থেকে আপনার টেক্সেরিয়ায় পরিবর্তনগুলি সিঙ্ক করবে।

যদিও অন্য উত্তরগুলিতে যুক্ত করতে - আপনার এটির কেন দরকার? আমি কিছুক্ষণের জন্য tinyMCE ব্যবহার করে আসছি এবং ফর্ম ক্ষেত্রগুলি না পেরে সমস্যাগুলির মুখোমুখি হই নি। কিছু গবেষণার পরে, এটি ফর্ম এলিমেন্ট জমা দেওয়ার তাদের "অটো প্যাচিং" হিসাবে দেখা গেল, যা ডিফল্টরূপে চালু রয়েছে - http://www.tinymce.com/wiki.php/Configration3x:submit_patch

মূলত, তারা submitকল করার triggerSaveপূর্বেই নতুন সংজ্ঞা দিয়েছিল, তবে কেবল submit অন্য কিছু দ্বারা ইতিমধ্যে সংজ্ঞা দেওয়া হয়নি:

if (!n.submit.nodeType && !n.submit.length) {
    t.formElement = n;
    n._mceOldSubmit = n.submit;
    n.submit = function() {
        // Save all instances
        tinymce.triggerSave();
        t.isNotDirty = 1;

        return t.formElement._mceOldSubmit(t.formElement);
    };
}

সুতরাং, যদি আপনার কোড (বা অন্য 3rd পার্টি লাইব্রেরি) অন্য কিছু সঙ্গে তালগোল পাকানো হয় submitতাদের "স্বয়ংক্রিয় প্যাচিং" না করবে না কাজ এবং একে ডাকতে প্রয়োজনীয় হয়ে triggerSave।

সম্পাদনা: এবং আসলে ওপি-র ক্ষেত্রে, submitমোটেই ডাকা হচ্ছে না। যেহেতু এটি আজাক্স হয়েছে, এটি উপরে বর্ণিত "অটো প্যাচিং" কে বাইপাস করছে।

Answer 14

সবার আগে:

1. আপনাকে অবশ্যই আপনার পৃষ্ঠায় টিনেমেস জ্যাকুয়ারি প্লাগইন অন্তর্ভুক্ত করতে হবে (jquery.tinymce.min.js)

2. সবচেয়ে সহজ এবং নিরাপদ উপায় হ'ল ব্যবহার করা getContentএবং setContentট্রিগারসেভ সহ। উদাহরণ:

   tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
   tinyMCE.triggerSave();