मैं Requ.js के साथ TinyMCE को कैसे कार्यान्वित कर सकता हूं?

Question

मैं वर्तमान में एक निर्भरता के रूप में TinyMCE स्रोत में गुजर रहा हूं, और फिर tinyMCE.init ({}) पर कॉल कर रहा हूं; लेकिन यह TinyMCE शुरू नहीं कर रहा है। जब मैं console.log को छोटा करता हूं, तो यह एक TinyMCE ऑब्जेक्ट देता है। नीचे कोड नमूना:

define([ 
'jQuery', 
'Underscore', 
'Backbone', 
'TinyMCE' 
], function($, _, Backbone, tinyMCE) { 

     tinyMCE.init({ 
      mode: "exact", 
      elements: $('textarea'), 
      theme: "advanced", 
      theme_advanced_toolbar_location: 'top', 
      theme_advanced_buttons1: 'bold,italic,underline,bullist,numlist,link,unlink', 
      theme_advanced_buttons2: '', 
      theme_advanced_buttons3: '', 
      theme_advanced_toolbar_align: 'left', 
      plugins: 'paste,inlinepopups', 
      width: '100%', 
      height: textarea.attr('data-height'), 
      oninit: function() { 
       console.log('TargetTD :'); 
       console.log(targetTD); 

      } 
     }); 
    } 
}); 

Answer 1

एक ही समस्या थी। मेरा समाधान TinyMCE की बजाय TinyMCE jQuery प्लगइन का उपयोग करना था। इस तरह यह ठीक काम करता है।

requirejs.config({ 
    baseUrl: "js", 
    paths: { 
     tinyMCE: 'libs/tinymce/tiny_mce' 
    }, 
    shim: { 
     tinyMCE: { 
      exports: 'tinyMCE', 
      init: function() { 
       this.tinyMCE.DOM.events.domLoaded = true; 
       return this.tinyMCE; 
      } 
     } 
    } 
}); 

requirejs([ 
    'tinyMCE' 
], function (tinyMCE) { 
    console.log(tinyMCE); 

    // your code here 
}); 

संपादित:

define(['jquery', 'tiny_mce/jquery.tinymce'], function ($) { 
    $('textarea').tinymce({ 
     script_url : 'js/tiny_mce/tiny_mce.js', 
     theme : 'advanced', 
     theme_advanced_buttons1 : 'fontselect,fontsizeselect,forecolor,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,removeformat,indent,outdent,numlist,bullist,copy,paste,link', 
     theme_advanced_buttons2 : '', 
     theme_advanced_buttons3 : '', 
     theme_advanced_toolbar_location : 'top', 
     theme_advanced_toolbar_align : 'left' 
    }); 
}); 

Answer 2

आप requirejs 2.1.0 या उच्चतर के लिए 'शिम' का उपयोग कर सकते हैं, नीचे मुख्य स्क्रिप्ट का उदाहरण देख मैं टिप्पणी में नीचे से iimuhin के स्निपेट जोड़ा है। यह इसके बिना काम नहीं कर रहा है; मैंने इसे जोड़ा क्योंकि भविष्य के खोजकर्ता जोड़े गए आईई सिरदर्द से परहेज करने की सराहना करेंगे।

Answer 3

आप रीढ़ की हड्डी के दृश्य में सामान्य रूप से tinyMCE को लागू कर सकते हैं। लेकिन आपको तब तक इंतजार करना चाहिए जब तक कि tinyMCE प्रारंभ करने से पहले डोम में दृश्य का एल डाला नहीं जाता है। जावास्क्रिप्ट में, डीओएम में तत्व डालने पर पता लगाने का अब तरीका है। लेकिन जब रीढ़ की हड्डी का दृश्य प्रस्तुत किया जाता है (Backbone.View.render()), वर्तमान ब्राउज़र की प्रक्रिया के बाद तत्व डोम में डाला जाएगा। 1 मिलीसेकंड के साथ छोटे mce तत्व को आरंभ करने के लिए "setTimeout" का उपयोग करें (जो कि अगले ब्राउज़र की प्रक्रिया में कोड को निष्पादित करेगा)।

http://jsfiddle.net/pCdSy/10/