Chỉnh sửa hộp thoại liên kết CKEditor để thêm thuộc tính tùy chỉnh vào liên kết

Question

Tôi đang sử dụng CKEditor trên trang web và tôi cần có thể đặt thuộc tính dữ liệu đặc biệt trên một số liên kết được tạo thông qua trình chỉnh sửa. Người dùng sẽ chỉ ra rằng họ cần thuộc tính đặc biệt được đặt trên liên kết bằng cách chọn hộp kiểm trong hộp thoại liên kết. Tôi đã quản lý để thêm hộp kiểm vào hộp thoại liên kết với mã sau:

CKEDITOR.on('dialogDefinition', function(ev) { 
    if (ev.data.name == "link") { 
     var info = dialog.getContents("info"); 
     info.elements.push({ 
      type: "vbox", 
      id: "urlOptions", 
      children: [{ 
       type: "hbox", 
       children: [{ 
        id: "button", 
        type: "checkbox", 
        label: "Button", 
        commit: function(data) { 
         data.button = this.getValue() 
         console.log("commit", data.button, data); 
        }, 
        setup: function(data) { 
         this.setValue(data.button); 
         console.log("setup", data.button, data); 
        } 
       }] 
      }] 
     }); 
    } 
}); 

Bây giờ tôi có hai vấn đề. Điều đầu tiên là mặc dù tôi thêm mã vào các hàm commit và setup sẽ lưu trạng thái của hộp kiểm, nó không hoạt động. Nó giống như là data không thể giữ bất kỳ thông số nào khác nhưng thông số ở đó theo mặc định.

Vấn đề thứ hai là tôi không biết cách thêm/xóa thuộc tính dữ liệu trên các liên kết của mình. Dường như với tôi rằng tôi nên làm điều đó trong gọi lại onOk của tôi trên hộp thoại, tuy nhiên, hộp thoại liên kết đã có một cuộc gọi lại onOk, vì vậy tôi không chắc chắn làm thế nào tôi nên được tiến hành. Tôi, tất nhiên, không muốn sửa đổi bất kỳ tập tin của CKEditor trực tiếp.

Làm cách nào để tôi có thể thực hiện những việc này?

Answer 1

Tùy chọn tốt nhất của bạn là sửa đổi plugin. Vì vậy, bạn cần mở mã nguồn và tìm tệp links.js trong c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\

Mã nguồn khá lớn (40k) nhưng tại đây bạn có thể sửa đổi hộp thoại theo ý muốn. Khi bạn hoàn thành, chỉ cần sao chép nó vào thư mục plugin của bạn và nén nó: http://jscompress.com/

Tôi đã làm những gì bạn cần. Toàn bộ tập tin nén là ở đây: https://gist.github.com/3940239

Những gì bạn cần làm:

Đầu tiên thêm dòng này ngay trước khi vào nút hộp thoại "duyệt" được nối. Xấp xỉ. trong dòng: 547:

     { 
          id: "button", 
          type: "checkbox", 
          label: "Button", 
          setup: function (data) { 
           this.allowOnChange = false; 

           if (data.button) 
            this.setValue(data.button); 

           this.allowOnChange = true; 
          }, 
          commit: function (data) { 
           data.button = this.getValue() 
           this.allowOnChange = false; 
          } 
         }, 

Phần này thực sự là mã của bạn. Tôi chỉ sao chép và dán nó.

Sau đó, chuyển đến hàm onOk, xấp xỉ. trong dòng 1211: và sau commitContent thêm mã này:

this.commitContent(data); 

//My custom attribute 
if (data.button) 
    attributes["custom-attribute"] = "button"; 
else 
    attributes["custom-attribute"] = ""; 

này sẽ sửa đổi liên kết của bạn thêm thuộc tính vào yếu tố như <a href="#" custom-attribute="button">text</a>

Vậy là xong. Mặc dù, bạn cũng có thể tải trạng thái hiện tại của hộp kiểm. Sau đó, chuyển đến hàm parseLink. Xấp xỉ. dòng 179 để tải các thuộc tính:

... 
if (element) 
{ 
    retval.button = element.getAttribute('custom-attribute'); 

    var target = element.getAttribute('target'); 
... 

Answer 2

Tôi đang khám phá cùng một điều ngay bây giờ. Những gì tôi đã quyết định làm vào thời điểm này là:

1. Nhận một ckeditor cơ sở cài đặt mà không cần plugin liên kết
2. tạo nĩa riêng của tôi về các plugin liên kết, và thêm những thay đổi của tôi với nó, sau đó kích hoạt và sử dụng plugin này trong nhóm liên kết thường hiển thị.

...làm việc với nó như là một plugin tùy chỉnh (mặc dù một bản sao của bản gốc) nên làm giảm bớt vấn đề nâng cấp. Bạn chỉ đơn giản là không sử dụng plugin liên kết ban đầu chút nào. Sao chép và đổi tên và thay vào đó hãy sử dụng bản sao tùy chỉnh của bạn.