कस्टम टिनिमस ड्रॉपडाउन मेनू में टूलबार बटन कैसे जोड़ूं?

Question

मैं इस तरह TinyMCE में एक कस्टम लटकती बना लिया है:

tinymce.init({ 
    toolbar: "alignment", 

    setup: function(editor) { 
     editor.addButton('alignment', { 
      type: 'menubutton', 
      text: 'Alignment', 
      icon: false, 
      menu: [ 
       { text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}}, 
       { text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}}, 
       { text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}}, 
       { text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}}, 
      ] 
     }); 

    } 

}); 

जो बनाता है यह:

हालांकि मैं अपनी पसंद का सिर्फ मुख्य से संरेखण बटन स्थानांतरित करने के लिए है ड्रॉपडाउन मेनू में टूलबार।

मुझे इन वास्तविक बटन को टूलबार से ड्रॉपडाउन मेनू में रखने के बारे में कैसे मिलता है? क्या यह उपरोक्त कोड की तरह है या एक बिल्कुल अलग तरीका है?

तो मूल रूप से टॉगल राज्यों के साथ इन बटनों को ऊपर और बंद के लिए ड्रॉप डाउन में डाल दें।

Answer 1

इस स्थापना का प्रयास करें - Plunker

tinymce.init({ 
    selector: "textarea", 
    toolbar: "styleselect | bold italic | alignment | alignmentv2", 
    setup: function(editor) { 
     editor.addButton('alignment', { 
      type: 'listbox', 
      text: 'Alignment', 
      icon: false, 
      onselect: function(e) { 
      tinyMCE.execCommand(this.value()); 
      }, 
      values: [ 
       {icon: 'alignleft', value: 'JustifyLeft'}, 
       {icon: 'alignright', value: 'JustifyRight'}, 
       {icon: 'aligncenter', value: 'JustifyCenter'}, 
       {icon: 'alignjustify', value: 'JustifyFull'}, 
      ], 
      onPostRender: function() { 
      // Select the firts item by default 
      this.value('JustifyLeft'); 
      } 
     }); 

     editor.addButton('alignmentv2', { 
      type: 'menubutton', 
      text: 'Alignment v2', 
      icon: false, 
      menu: [ 
       {icon: 'alignleft', onclick: function() { console.log(editor); tinyMCE.execCommand('JustifyLeft'); }}, 
       {icon: 'alignright', onclick: function() { tinyMCE.execCommand('JustifyRight'); }} 
      ] 
     }); 
    } 
}); 

Answer 2

@NoBugs, आप संरेखण आइकन अद्यतन प्रदर्शन करने के लिए onselect विधि बढ़ा सकते हैं।

सबसे पहले, this की संरचना की जांच करके onselect विधि में हम देखेंगे कि this.settings.values संपत्ति प्रारंभिक परिभाषित मानों के साथ एक सरणी संग्रहीत करती है।

कई find उपयोगिता कार्यों हम चयनित मान के आइटम मिल और आवश्यकतानुसार आइकन अद्यतन में से एक का उपयोग करके:

onselect: function() { 
    selectedItem = find(this.settings.values, {value: this.value()}) 
    this.icon(selectedItem.icon) 
    tinyMCE.execCommand(this.value()); 
} 

आशा, इस मदद करता है। चीयर्स!

Answer 3

यह शायद कस्टम स्प्लिट बटन का उपयोग करके सबसे अच्छा हल किया गया है। इस तरह हम मुख्य बटन पर अंतिम चयनित विकल्प असाइन कर सकते हैं।

परिणाम यहाँ देखें - CodePen

tinymce.init({ 
    selector: '#editor', 
    menubar: false, 
    toolbar: 'bold italic underline | alignmentsplit | bullist numlist outdent indent', 

    setup: function (editor) { 
    editor.on('init', function() { 
     this.getDoc().body.style.fontSize = '16px'; 
     this.getDoc().body.style.fontFamily = 'Georgia'; 
    }); 
    editor.addButton('alignmentsplit', { 
     type: 'splitbutton', 
     text: '', 
     icon: 'alignleft', 
     onclick: function(e) { 
     tinyMCE.execCommand(this.value); 
     }, 
     menu: [{ 
      icon: 'alignleft', 
      text: 'Align Left', 
      onclick: function() { 
      tinyMCE.execCommand('JustifyLeft'); 
      this.parent().parent().icon('alignleft'); 
      this.parent().parent().value = 'JustifyLeft' 
      } 
     }, { 
      icon: 'alignright', 
      text: 'Align Right', 
      onclick: function() { 
      tinyMCE.execCommand('JustifyRight'); 
      this.parent().parent().icon('alignright'); 
      this.parent().parent().value = 'JustifyRight'; 
      } 
     }, { 
      icon: 'aligncenter', 
      text: 'Align Center', 
      onclick: function() { 
      tinyMCE.execCommand('JustifyCenter'); 
      this.parent().parent().icon('aligncenter'); 
      this.parent().parent().value = 'JustifyCenter'; 
      } 
     }, { 
      icon: 'alignjustify', 
      text: 'Justify', 
      onclick: function() { 
      tinyMCE.execCommand('JustifyFull'); 
      this.parent().parent().icon('alignjustify'); 
      this.parent().parent().value = 'JustifyFull'; 
      } 
     } 
     ], 
     onPostRender: function() { 
     // Select the first item by default 
     this.value ='JustifyLeft'; 
     } 
    }); 
    } 
}); 

नोट: सामग्री कि पहले से ही इस तरह से गठबंधन है पर एक संरेखण विकल्प यदि आप पुनः चयन, TinyMCE संरेखण बंद स्वरूपण टॉगल करता है। यह डिफ़ॉल्ट TinyMCE व्यवहार है, लेकिन आपको यह इंगित करने की आवश्यकता होगी कि इस अनुभाग में उपयोगकर्ता के लिए अधिक समझने के लिए बटन पर टॉगल स्थिति के माध्यम से पहले से ही स्वरूपण है। यह ऊपर लागू नहीं किया गया है।