Làm cách nào để thêm nút tùy chỉnh vào thanh công cụ gọi hàm JavaScript?

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:

• Một bài đăng StackOverflow liên kết đến và nói về một hướng dẫn bổ trợ đã giúp tôi bắt đầu (Tim Down đã đề cập đến điều này)
• Một số plugin được tạo sẵn cho FCK và CKEditor có thể cải thiện sự hiểu biết về hệ thống của một người
• Blog của AlfonsoML , một trong những nhà phát triển, có rất nhiều thứ có giá trị ở đó, ví dụ: bản địa hóa Plugin trong CKEditor
• Tương tác giữa các nút hộp thoại và hộp thoại IFrame , với đầu vào từ Garry Yao, một trong những nhà phát triển
• Các diễn đàn không tệ như họ nhìn, có một số đá quý ẩn ở đó. Hãy chắc chắn rằng bạn tìm kiếm ở đó, tốt, nếu không phải đầu tiên, thì ít nhất là thứ hai hoặc thứ ba.

Đố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/pluginsthư 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

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

BÁNH 4

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:

• Tạo Plugin CKEditor 4 trong 20 dòng mã
• Tạo Plugin CKEditor đơn giản

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 .

BÁNH 5

Cho đến nay có một bài viết giới thiệu có sẵn:

Khung CKEditor 5: Bắt đầu nhanh - Tạo một plugin đơn giả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.