Làm cách nào để thêm các nút trên thanh công cụ vào menu thả xuống tinymce tùy chỉnh?

Question

tôi đã tạo ra một danh sách thả xuống tùy chỉnh trong TinyMCE như thế này:

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');}}, 
      ] 
     }); 

    } 

}); 

mà tạo ra này:

Tuy nhiên những gì tôi muốn là chỉ cần di chuyển các nút liên kết từ chính thanh công cụ trong trình đơn thả xuống.

Tôi làm cách nào để đưa các nút thực này từ thanh công cụ vào menu thả xuống? Nó giống như đoạn mã trên hay là một cách hoàn toàn khác?

Vì vậy, về cơ bản, đặt các nút này trong trình đơn thả xuống ở trên với trạng thái bật và tắt.

Answer 1

Hãy thử thiết lập này - 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, bạn có thể nâng cao onselect phương pháp để thực hiện việc cập nhật biểu tượng liên kết.

Lúc đầu, bằng cách kiểm tra cấu trúc của đối tượng this trong phương pháp onselect, chúng ta sẽ thấy rằng this.settings.values thuộc tính lưu trữ một mảng có giá trị được xác định sớm.

Bằng cách sử dụng một trong nhiều chức năng tiện ích find chúng tôi nhận được item giá trị được lựa chọn và cập nhật các biểu tượng khi cần thiết:

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

Hope, điều này sẽ giúp. Chúc mừng!

Answer 3

Điều này có thể được giải quyết tốt nhất bằng cách sử dụng nút chia tách tùy chỉnh. Bằng cách đó, chúng tôi có thể gán tùy chọn được chọn cuối cùng cho nút chính.

Xem kết quả ở đây - 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'; 
     } 
    }); 
    } 
}); 

Lưu ý: Nếu bạn lại chọn một tùy chọn liên kết trên nội dung đã được liên kết theo cách đó, TinyMCE Toggles sự liên kết định dạng tắt. Đây là hành vi TinyMCE mặc định, nhưng bạn sẽ cần phải chỉ ra rằng phần đã có định dạng đó thông qua trạng thái bật tắt trên nút để điều này có ý nghĩa hơn đối với người dùng. Điều này chưa được thực hiện ở trên.