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?


67
49
Tạ Thanh Hoa
9 năm trước

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?

Hữu ích 67 Yêu thích 49 Chia sẻ Viết bình luận 0
Không hữu ích

9 Trả lời


91
Tạ Duy An
9 năm trước

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/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.

Hữu ích 91 Trả lời hay nhất Chia sẻ Viết bình luận 0
Không hữu ích

98
Đặng Thụy Uyên
5 năm trước

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

Hữu ích 98 Chia sẻ Viết bình luận 5
Không hữu ích

Đây phải là câu trả lời được chấp nhận! Vì nó trả lời chính xác và trực tiếp câu hỏi của OP, thay vì gửi anh ta vào sổ tay <s> hell </ s>.

Hữu ích 8 · Không hữu ích · Trả lời 0

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)

Hữu ích 3 · Không hữu ích · Trả lời 0

@trejder - Tôi đang nâng cấp câu hỏi này, nhưng tôi tin chắc rằng câu trả lời này không được áp dụng vào năm 2009, sáu năm trước, khi cả câu hỏi và câu trả lời được chấp nhận của OP đã được tạo ra ...

Hữu ích 2 · Không hữu ích · Trả lời 0

@ 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.

Hữu ích 2 · Không hữu ích · Trả lời 0

Phương pháp này gần như hoạt động. Tôi thấy rằng tôi phải bấm vào phần thân tài liệu ckeditor để có nút xuất hiện. Bất cứ ai cũng biết chức năng nào tôi có thể gọi để có được thanh công cụ để 'làm mới' mà không cần phải bấm vào phần thân tài liệu?

Hữu ích 0 · Không hữu ích · Trả lời 0

28
Phan Hương Giang
9 năm trước

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
            });
        }
    }); 
})();
Hữu ích 28 Chia sẻ Viết bình luận 1
Không hữu ích

Có vẻ như thư mục plugin phải được đặt tên giống như lệnh.

Hữu ích 3 · Không hữu ích · Trả lời 0

5
Phạm Viễn Cảnh
8 năm trước

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'
    });
    }
});
Hữu ích 5 Chia sẻ Viết bình luận 0
Không hữu ích

3
Vũ Huy Vũ
2 năm trước

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:

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

Hữu ích 3 Chia sẻ Viết bình luận 0
Không hữu ích

2
Phạm Vi Quyên
9 năm trước

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 .

Hữu ích 2 Chia sẻ Viết bình luận 0
Không hữu ích

2
Phan Vân Anh
8 năm trước

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ả.

Hữu ích 2 Chia sẻ Viết bình luận 0
Không hữu ích

2
Huỳnh Thanh Huyền
1 năm trước

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)

Hữu ích 2 Chia sẻ Viết bình luận 0
Không hữu ích

0
Dương Hồng Hoa
7 năm trước

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ữu ích 0 Chia sẻ Viết bình luận 0
Không hữu ích

Trả lời của bạn

Xem trước nội dung