TinyMCE में इनिट के बाद टूलबार संशोधित करने का उचित तरीका

Question

मैं क्लाउड होस्टेड एलएमएस को जावास्क्रिप्ट के साथ विस्तारित कर रहा हूं। इसलिए, हम पृष्ठ पर जावास्क्रिप्ट जोड़ सकते हैं, लेकिन विभिन्न घटकों के लिए विक्रेता जावास्क्रिप्ट को संशोधित नहीं कर सकते हैं।

एलएमएस अक्सर tinyMCE का उपयोग करता है। लक्ष्य प्रत्येक tinyMCE संपादक के टूलबार पर एक नया बटन जोड़ना है।

समस्या यह है कि चूंकि छोटे एमसीई मॉड्यूल विक्रेता के अस्पृश्य कोड में प्रारंभ किए जाते हैं, इसलिए हम init() कॉल को संशोधित नहीं कर सकते हैं। इसलिए, हम init() ऑब्जेक्ट की "टूलबार" प्रॉपर्टी पर कोई भी टेक्स्ट नहीं जोड़ सकते हैं।

तो मैं एक मामूली hacky तरीके से इस पूरा किया:

tinyMCE.on('AddEditor', function(e){ 
    e.editor.on('init', function(){ 
    tinyMCE.ui.Factory.create({ 
     type: 'button', 
     icon: 'icon' 
    }).on('click', function(){ 
     // button pressing logic 
    }) 
    .renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0]) 
    }); 
}); 

तो यह काम करता है, लेकिन यह कहना मैं पूरी तरह आराम से डोम में इस तरह के एक विशिष्ट स्थान देखने के लिए उस तरह डालने के लिए होने नहीं कर रहा हूँ अनावश्यक बटन। यद्यपि यह काम करता है, मुझे विश्वास नहीं है कि यह इस तरह इस्तेमाल करने के लिए निर्माता का इरादा था।

प्रारंभ करने के बाद, टूलबार में बटन जोड़ने का कोई उचित तरीका है, अगर हम प्रारंभिक कोड को संशोधित नहीं कर सकते हैं?

Answer 1

मुझे एक और अधिक सुरुचिपूर्ण समाधान मिला, लेकिन यह अभी भी हैक की तरह थोड़ा सा महसूस करता है। यहां मुझे यह मिला है:

// get an instance of the editor 
var editor=tinymce.activeEditor; //or tinymce.editors[0], or loop, whatever 

//add a button to the editor buttons 
editor.addButton('mysecondbutton', { 
    text: 'My second button', 
    icon: false, 
    onclick: function() { 
    editor.insertContent('&nbsp;<b>It\'s my second button!</b>&nbsp;'); 
    } 
}); 

//the button now becomes 
var button=editor.buttons['mysecondbutton']; 

//find the buttongroup in the toolbar found in the panel of the theme 
var bg=editor.theme.panel.find('toolbar buttongroup')[0]; 

//without this, the buttons look weird after that 
bg._lastRepaintRect=bg._layoutRect; 

//append the button to the group 
bg.append(button); 

मुझे लगता है कि इससे कुछ बेहतर होना चाहिए, लेकिन मुझे यह नहीं मिला।

अन्य नोट:

• बदसूरत _lastRepaintRectrepaint विधि है, जो बनाता है बटन परवाह किए बिना बदसूरत अगर आप नए नियंत्रण जोड़ सकते हैं या नहीं
• कोड में देखा देखने की वजह से की जरूरत है, नहीं है टूलबार पर नए नियंत्रण जोड़ने का कोई तरीका नहीं है और इसके बिना को बदसूरत हैक
• append(b)के बराबर है
• आप हैक बिना बटन जोड़ने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं, लेकिन आप अन्य सामान का एक बहुत shortcircuiting रहे हैं:

कोड:

bg.add(button); 
var buttonElement=bg.items().filter(function(i) { return i.settings.text==button.text; })[0]; 
var bgElement=bg.getEl('body'); 
buttonElement.renderTo(bgElement);