Cách thích hợp để sửa đổi thanh công cụ Sau khi bắt đầu bằng TinyMCE

Question

Tôi đang mở rộng LMS được lưu trữ trên đám mây bằng javascript. Do đó, chúng tôi có thể thêm javascript vào trang, nhưng không thể sửa đổi javascript của nhà cung cấp cho các thành phần khác nhau.

LMS thường sử dụng TinyMCE. Mục đích là thêm một nút mới vào thanh công cụ của mỗi trình soạn thảo tinyMCE.

Vấn đề là do các mô-đun TinyMCE được khởi tạo trong mã không thể chạm của nhà cung cấp, chúng tôi không thể sửa đổi lệnh init(). Do đó, chúng tôi không thể thêm bất kỳ văn bản nào vào thuộc tính "thanh công cụ" của đối tượng init().

Vì vậy, tôi thực hiện điều này một cách vừa phải 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]) 
    }); 
}); 

Vì vậy, các công trình này, nhưng không cần thiết phải nói rằng tôi không hoàn toàn thoải mái cần phải tìm kiếm một địa điểm cụ thể như trong DOM như thế để chèn nút. Mặc dù điều này làm việc, tôi không tin đó là ý định của người sáng tạo cho nó được sử dụng như thế này.

Có cách nào thích hợp để thêm nút vào thanh công cụ, sau khi khởi tạo, nếu chúng tôi không thể sửa đổi mã khởi tạo?

Answer 1

Tôi đã tìm thấy một giải pháp thanh lịch hơn, nhưng nó vẫn cảm thấy hơi giống một hack. Dưới đây là những gì tôi nhận được:

// 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); 

Tôi cảm thấy có điều gì đó tốt hơn thế này, nhưng tôi không tìm thấy.

ghi chú khác:

• xấu xí _lastRepaintRect là cần thiết vì sự repaint phương pháp, mà làm cho các nút trông xấu xí bất kể nếu bạn thêm điều khiển mới hay không
• nhìn vào mã, có không có cách nào để thêm các điều khiển mới vào thanh công cụ mà không cần sơn lại và không có cách nào để có được xung quanh nó mà không cần hack xấu xí
• append(b) tương đương với add(b).renderNew()
• bạn có thể sử dụng đoạn mã sau để thêm các nút mà không có hack, nhưng bạn đang shortcircuiting rất nhiều thứ khác:

Code:

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);