Tôi muốn thêm một nút vào thanh công cụ gọi hàm JavaScript như thế Tada()
nào?
Bất kỳ ý tưởng về làm thế nào để thêm điều này?
Tôi muốn thêm một nút vào thanh công cụ gọi hàm JavaScript như thế Tada()
nào?
Bất kỳ ý tưởng về làm thế nào để thêm điều này?
Tôi đang trong quá trình phát triển một số Plugin tùy chỉnh cho CKEditor và đây là gói dấu trang sinh tồn của tôi:
Đối với mục đích của bạn, tôi khuyên bạn nên xem một trong các plugin trong _source/plugins
thư mục, ví dụ như nút "in". Thêm một chức năng Javascript đơn giản là khá dễ dàng để đạt được. Bạn sẽ có thể sao chép plugin in (lấy thư mục từ _source vào thư mục / plugin thực tế, lo lắng về việc thu nhỏ sau), đổi tên, đổi tên mỗi lần đề cập đến "in" trong đó, đặt cho nút một tên thích hợp bạn sử dụng sau trong thiết lập thanh công cụ của bạn để bao gồm nút và thêm chức năng của bạn.
Ngoài ra có một cách hay cho phép một người thêm nút mà không cần tạo plugin.
html:
<textarea id="container">How are you!</textarea>
javascript:
editor = CKEDITOR.replace('container'); // bind editor
editor.addCommand("mySimpleCommand", { // create named command
exec: function(edt) {
alert(edt.getData());
}
});
editor.ui.addButton('SuperButton', { // add new button and bind our command
label: "Click me",
command: 'mySimpleCommand',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
Kiểm tra cách thức hoạt động ở đây: DEMO
Nếu bạn định làm điều này và bạn muốn sử dụng một thanh công cụ tùy chỉnh trong cấu hình của mình thì nó sẽ không hoạt động trừ khi bạn thêm 'SuperButton' (trong trường hợp này) vào thanh công cụ tùy chỉnh của bạn. (Có hai giờ trong cuộc đời tôi không bao giờ quay trở lại)
@ J.Bruni Điều đó không thay đổi thực tế, rằng một câu trả lời được chấp nhận sẽ gửi OP đến các giai điệu của tài liệu và các câu hỏi khác thay vì đưa ra câu trả lời trực tiếp. Đây không phải là thứ dành cho những gì SE được tạo ra. SE / SO không phải là danh sách liên kết, nhưng câu hỏi và câu trả lời chất lượng. Câu trả lời được chấp nhận không có chất lượng cũng không có giá trị. Nó chỉ là một loạt các liên kết với thông điệp "giúp mình" ở giữa các dòng.
Xem URL này để biết ví dụ dễ dàng http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/
Có một vài bước:
1) tạo thư mục plugin
2) đăng ký plugin của bạn (URL ở trên nói rằng chỉnh sửa tệp ckeditor.js KHÔNG làm điều này, vì nó sẽ bị hỏng vào lần tới khi phiên bản mới được khởi chạy. Thay vào đó hãy chỉnh sửa config.js và thêm một dòng như vậy
config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere';
3) tạo một tệp JS có tên plugin.js trong thư mục plugin của bạn Đây là mã của tôi
(function() {
//Section 1 : Code to execute when the toolbar button is pressed
var a = {
exec: function(editor) {
var theSelectedText = editor.getSelection().getNative();
alert(theSelectedText);
}
},
//Section 2 : Create the button and add the functionality to it
b='addTags';
CKEDITOR.plugins.add(b, {
init: function(editor) {
editor.addCommand(b, a);
editor.ui.addButton("addTags", {
label: 'Add Tag',
icon: this.path+"addTag.gif",
command: b
});
}
});
})();
Trong trường hợp bất kỳ ai quan tâm, tôi đã viết một giải pháp cho việc này bằng cách sử dụng Prototype. Để nút này xuất hiện chính xác, tôi phải chỉ định extraPlugins: 'ajaxsave'
từ bên trong lệnh CKEDITOR.replace()
gọi phương thức.
Đây là plugin.js:
CKEDITOR.plugins.add('ajaxsave',
{
init: function(editor)
{
var pluginName = 'ajaxsave';
editor.addCommand( pluginName,
{
exec : function( editor )
{
new Ajax.Request('ajaxsave.php',
{
method: "POST",
parameters: { filename: 'index.html', editor: editor.getData() },
onFailure: function() { ThrowError("Error: The server has returned an unknown error"); },
on0: function() { ThrowError('Error: The server is not responding. Please try again.'); },
onSuccess: function(transport) {
var resp = transport.responseText;
//Successful processing by ckprocess.php should return simply 'OK'.
if(resp == "OK") {
//This is a custom function I wrote to display messages. Nicer than alert()
ShowPageMessage('Changes have been saved successfully!');
} else {
ShowPageMessage(resp,'10');
}
}
});
},
canUndo : true
});
editor.ui.addButton('ajaxsave',
{
label: 'Save',
command: pluginName,
className : 'cke_button_save'
});
}
});
Có các hướng dẫn hữu ích trong tài liệu chính thức của CKEditor 4, bao gồm việc viết một plugin chèn nội dung vào trình chỉnh sửa, đăng ký một nút và hiển thị một cửa sổ hộp thoại:
Nếu bạn đọc hai điều này, hãy chuyển sang Tích hợp các Plugin với Bộ lọc nội dung nâng cao .
Cho đến nay có một bài viết giới thiệu có sẵn:
Bạn sẽ cần tạo một trình cắm thêm. Tài liệu về CKEditor rất kém cho việc này, đặc biệt là vì tôi tin rằng nó đã thay đổi đáng kể kể từ FCKEditor. Tôi sẽ đề nghị sao chép một trình cắm thêm hiện có và nghiên cứu nó. Một google nhanh cho "CKEditor plugin" cũng tìm thấy bài đăng trên blog này .
Bạn có thể thêm hình ảnh nút như sau:
CKEDITOR.plugins.add('showtime', //name of our plugin
{
requires: ['dialog'], //requires a dialog window
init:function(a) {
var b="showtime";
var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));
c.modes={wysiwyg:1,source:1}; //Enable our plugin in both modes
c.canUndo=true;
//add new button to the editor
a.ui.addButton("showtime",
{
label:'Show current time',
command:b,
icon:this.path+"showtime.png" //path of the icon
});
CKEDITOR.dialog.add(b,this.path+"dialogs/ab.js") //path of our dialog file
}
});
Đây là plugin thực tế với tất cả các bước được mô tả.
Có thể có một số plugin nhưng người ta có thể sử dụng CSS để tạo nút. Trước hết, nhấp vào nút Nguồn được đề cập trong Trình chỉnh sửa, sau đó dán mã nút ở đó, Khi tôi sử dụng CSS để tạo nút và thêm href vào nó.
<p dir="ltr" style="text-align:center"><a href="https://play.google.com/store/apps/details?id=com.mobicom.mobiune&hl=en" style="background-color:#0080ff; border: none;color: white;padding: 6px 20px;text-align: center;text-decoration: none;display: inline-block;border-radius: 8px;font-size: 15px; font-weight: bold;">Open App</a></p>
Đây là nút viết ứng dụng mở trên nó. Bạn có thể thay đổi Màu như tôi đang sử dụng # 0080ff (Xanh nhạt)
Bài viết này cũng có thể hữu ích http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
Có các mẫu mã và hướng dẫn từng bước về việc xây dựng plugin CKEditor của riêng bạn với nút tùy chỉnh.
Đã hỏi |
9 năm trước |
Đã xem |
110,816 |
Hoạt động |