Ví dụ CKEditor trong hộp thoại jQuery

Question

Tôi đang sử dụng jQuery để mở một cửa sổ hộp thoại với một vùng văn bản được chuyển thành một thể hiện của CKEditor. Tôi đang sử dụng bộ điều hợp jQuery do nhóm CKEditor cung cấp nhưng khi cửa sổ hộp thoại mở ra, tôi không thể tương tác với trình chỉnh sửa (nó được tạo nhưng "null" được viết trong không gian nội dung và tôi không thể nhấp vào bất kỳ nội dung nào hoặc sửa đổi nội dung).

This bug report dường như để nói rằng bằng cách sử dụng một bản vá được cung cấp vấn đề này là cố định nhưng nó dường như không có tác dụng đối với tôi ...

Dưới đây là mã của tôi (có lẽ tôi đã làm điều gì sai lập trình):

HTML:

<div id="ad_div" title="Analyse documentaire"> 
<textarea id="ad_content" name="ad_content"></textarea> 
</div> 

của tôi bao gồm (Tất cả mọi thứ được bao gồm một cách chính xác nhưng có lẽ nó là một trong đó có vấn đề trật tự?):

<script type="text/javascript" src="includes/ckeditor/ckeditor.js"></script> 
<link rel="stylesheet" type="text/css" href="includes/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" /> 
<script type="text/javascript" src="includes/jquery/js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="includes/jquery/js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript" src="includes/jquery/plugins/dialog-patch.js"></script> 
<script type="text/javascript" src="includes/ckeditor/adapters/jquery.js"></script> 

Javascript:

$('#ad_content').ckeditor(); 

/* snip */ 

$('#ad_div').dialog(
{ 
    modal: true, 
    resizable: false, 
    draggable: false, 
    position: ['center','center'], 
    width: 600, 
    height: 500, 
    hide: 'slide', 
    show: 'slide', 
    closeOnEscape: true, 
    autoOpen: false 
}); 

$('.analyse_cell').click(function(){ 
    $('#ad_div').dialog('open'); 
}); 

Edit: Sau khi một số thử nghiệm hơn nữa tôi nhận thấy rằng cách nhấn vào các nút trên thanh công cụ đã cho tôi lỗi này:

Error: this.document.getWindow().$ is undefined Source File: includes/ckeditor/ckeditor.js Line: 82

Answer 1

Cũng vì một số lý do tôi không thể làm cho nó hoạt động nhưng được quản lý để có được hiệu ứng tương tự bằng cách thực hiện cùng một chức năng bằng tay.

Answer 2

Hãy thử đặt bên dưới adapter. Sửa lỗi sẽ ghi đè bộ điều hợp.

Answer 3

$('.analyse_cell').click(function(){ 
    $('#ad_div').dialog({ 
     modal: true, 
     resizable: false, 
     draggable: false, 
     position: ['center','center'], 
     width: 600, 
     height: 500, 
     hide: 'slide', 
     show: 'slide', 
     closeOnEscape: true, 
     autoOpen: false, 
     open: function(event,ui) { 
      $('#ad_content').ckeditor(); 
     }, 
     close: function(event,ui) { 
      CKEDITOR.remove($("#ad_content").ckeditorGet()); 
     } 
    }); 
}); 

Answer 4

Tôi gặp phải vấn đề tương tự và vì lý do nào đó tôi thấy rằng việc đưa văn bản vào văn bản trước khi mở hộp thoại có thể thực hiện thủ thuật. Không phải là một giải pháp thực sự, nhưng làm việc cho tôi.

$('#ad_content').ckeditor(); 

/* snip */ 

$('#ad_div').dialog(
{ 
    modal: true, 
    /* Your options here. */ 
}); 

$('.analyse_cell').click(function(){ 
    // Add some content into textarea. 
    $('#ad_content').val("Enter content here."); 
    $('#ad_div').dialog('open'); 
}); 

Answer 5

Sử dụng phiên bản mới nhất của CKEditor. Giải quyết nó cho tôi. Phiên bản 3.4.2

Answer 6

Tôi đang sử dụng jQuery để mở cửa sổ hộp thoại có vùng văn bản được chuyển thành phiên bản CKEditor. Tôi đang sử dụng bộ điều hợp jQuery do nhóm CKEditor cung cấp nhưng khi cửa sổ hộp thoại mở ra, tôi không thể tương tác với trình chỉnh sửa (nó được tạo nhưng null được viết trong không gian nội dung và tôi không thể nhấp vào bất kỳ nội dung nào hoặc sửa đổi nội dung).

Error: this.document.getWindow().$ is undefined Source File: includes/ckeditor/ckeditor.js
Line: 129

Tôi đang sử dụng phiên bản 3.6.2

Answer 7

tôi giải quyết điều này bằng cách thêm ZIndex = -1 trong constructor jQuery UI Dialog như vậy

$('#modalWindow').dialog({ autoOpen: false, modal: true, zIndex : -1}); 

Answer 8

Chỉ cần giải quyết vấn đề chính xác cùng bởi vô hiệu hóa hiệu ứng giao diện người dùng jQuery trên hộp thoại bật lên (tùy chọn hiển thị).

Hãy cho tôi như mãi mãi để tìm hiểu điều này. Bây giờ trình soạn thảo hoạt động như mong đợi.

Answer 9

Tôi đã sử dụng chức năng gọi lại với tùy chọn "hiển thị:" để trì hoãn tạo CKEditor cho đến khi hoạt ảnh "hiển thị" hoàn tất. Tôi thấy rằng chỉ cần 50 mili giây sẽ làm được điều đó.

modal: true, 
show: { 
    effect: "drop", 
    complete: function() { 
     setTimeout(function(){ 
      $("#selector").ckeditor(); 
     },50); 
    } 
}, 
hide: "drop", 

Hy vọng điều này sẽ hữu ích.

Answer 10

Chủ nghĩa thần bí, nhưng nó đã giúp ích cho tôi. Trước khi tạo thoại tôi buộc phải thiết lập dữ liệu rỗng

CKEDITOR.instances['email_text_of_message'].setData('') 

và ckeditor ("ckeditor", "~> 3.4") trong hộp thoại hoạt động tốt.

$("#create_email").click(function(event){ 

CKEDITOR.instances['email_text_of_message'].setData('') 

$("#email_body").dialog({ modal: true, 
          minHeight: 720, 
          minWidth: 900, 
          buttons: [ 
          { 
          id: "button_create_email", 
          text: $('#inv_notice16').text(), 
          click: function() { 
            $("#email_body").dialog('close') 
          } 
          }]}); 
    return false;  
}) 

Answer 11

Chỉ cần thêm đoạn mã này vào tài liệu của bạn và vấn đề được giải quyết!

$(document).on('focusin', function(e) { 
    e.stopImmediatePropagation(); 
});