ckeditor autogrow cắm dọc cuộn nhấp nháy vấn đề

Question

Tôi đang gặp một vấn đề với các plugin ckeditor autogrow:

Sau khi nhấn trở lại (sau khi tự động phát triển quá khứ chiều cao tối thiểu), run nội dung văn bản (nhảy lên một dòng và trở xuống), và một thanh cuộn dọc nhấp nháy và tắt. Autogrow hoạt động, nhưng trải nghiệm người dùng rất khó khăn.

Tôi có thể ẩn thanh cuộn dọc bằng cách chỉ định cuộn = "no" và overflow = "hidden", nhưng nội dung văn bản vẫn rung.

Tôi đang vô hiệu hóa di chuyển trong ckeditor.js:

<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frameBorder="0" title="'+E+'"'+' src="'+W+'"'+' tabIndex="'+(b.webkit?-1:C.tabIndex)+'"'+' allowTransparency="true"'+'></iframe> 

ckeditor mã khởi tạo:

 CKEDITOR.replace('Description', 
     { 
      sharedSpaces: 
      { 
       top: 'topSpace', 
       bottom: 'bottomSpace' 

      }, 
      extraPlugins: 'autogrow,tableresize', 
      removePlugins: 'maximize,resize,elementspath', 
      skin: 'kama', 
      toolbar: [['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'], ['TextColor', 'BGColor'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['NumberedList', 'BulletedList'], ['Outdent', 'Indent'], 
      '/', ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], ['PasteText', 'PasteFromWord'],['Cut','Copy','Paste'], ['Undo', 'Redo'], ['Find', 'Replace'], ['SpellChecker']], 
      toolbarCanCollapse: false, 
      pasteFromWordRemoveFontStyles: false, 
      enterMode: CKEDITOR.ENTER_BR, 
      shiftEnterMode: CKEDITOR.ENTER_P, 
      autoGrow_minHeight: 300 

     }) 

Có cách nào để tránh nhảy nội dung text/chuyển khi nhấn phím Enter (sau khi autogrowing qua chiều cao min)?

Answer 1

AFAIK cách duy nhất để giải quyết vấn đề này là thay đổi mã CKEDitor. (Tôi khuyên bạn nên xử lý sự kiện 'nhập khóa' khi sự kiện diễn ra và không hết thời gian chờ).

Answer 2

Tôi đã thử nghiệm bản sửa lỗi hôm nay và tôi nghĩ rằng mình có giải pháp làm việc cho tất cả các trình duyệt chính. Ngoài ra, tôi cũng đã sửa chữa cho vấn đề kích thước thanh cuộn ngang (thanh cuộn ngang không tăng kích thước của trình chỉnh sửa). Điều đó đã kết thúc được bit của một kludge mặc dù (vì lợi ích của chiều cao scrollbar đơn giản là hardcoded 17 pixel) vì vậy tôi sẽ cung cấp cho bạn với cả hai phiên bản, có và không có sửa chữa thanh cuộn ngang.

Tôi biết cách thích hợp là tạo bản vá và đề xuất nó sẽ được triển khai trong bản phát hành tiếp theo của CKEditor, nhưng phải mất một lúc để bạn có thể làm được. Bạn có thể tải về sửa đổi tập tin plugin.js nén từ liên kết dưới đây và đặt nó vào ckeditor của bạn trong con đường /plugins/autogrow/plugin.js

• Without ngang sửa chữa cuộn: http://www.filedropper.com/plugin_3
• Với sửa chữa thanh cuộn ngang: http://www.filedropper.com/plugin_1

Vậy điều gì đã thay đổi?

Tôi sẽ giải thích những sửa đổi này thông qua các tệp (thư mục _source) không nén được có thể đọc được trong khi các tệp nén khá khó đọc và dễ hiểu.

Tôi đã thực hiện các sửa đổi nhỏ để tự động đánh dấu điểm đánh dấu tạm thời được sử dụng để tính toán chiều cao mới của trình chỉnh sửa. Dưới đây là phiên bản mới của mã đánh dấu trong _source (không nén) autogrow/plugin.js dòng 19.

var marker = CKEDITOR.dom.element.createFromHtml('<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:0px;font-size:0;display:block;">&nbsp;</span>', doc); 

Vì vậy, chiều cao được thay đổi từ 1 pixel để zero pixel, một không gian không bị phá hủy luôn in bên trong phần tử đánh dấu và kích thước phông chữ buộc phải bằng không. Sau khi những sửa đổi này thực sự đã khắc phục vấn đề - thay vì xóa điểm đánh dấu khỏi DOM ngay lập tức, tôi đã thay đổi nó để được xóa qua thời gian chờ 1 mili giây (dòng 24 trong tệp plugin.js không nén).

setTimeout(function() { 
    marker.remove(); 
},1); 

ngang sửa chữa cuộn

Đây là chút ngu si đần độn. Tôi chỉ cần thêm một kiểm tra cho dù trình soạn thảo scrollWidth là lớn hơn clientWidth và nếu như vậy sau đó thêm 17 pixel vào newHeight và currentHeight biến trước khi kiểm tra newHeight tối thiểu và tối đa cho phép giá trị.

// TODO: calculate horizontal scrollbar height instead of using static 17 pixels 
if (scrollable.$.scrollWidth > scrollable.$.clientWidth) { 
    newHeight += 17; 
    currentHeight += 17; 
} 

newHeight = Math.max(newHeight, min); 
newHeight = Math.min(newHeight, max); 

Thay vì sử dụng giá trị mã hóa cứng 17 pixel, phương pháp descibed trong How can I get the browser's scrollbar sizes? (hoặc một cái gì đó tương tự) có thể được sử dụng để tính toán kích thước thanh cuộn để thực hiện sửa chữa này thích hợp hơn.

Answer 3

1. contents.css add:

   body {overflow: hidden;/Ẩn Autogrow nhấp nháy /}

   (Cần để xóa bộ nhớ cache để kiểm tra)

2. plugin.js (resizeEditor) Thiết lập "bổ sung không gian được xác định bởi người sử dụng" = 20:

newHeight + = 20; // Fix Autogrow flicker //(editor.config.autoGrow_bottomSpace || 0);

1. plugin.js (resizeEditor) thay thế:

if (cuộn $ scrollHeight> scrollable.clientHeight ...

Với:..

//Fix Autogrow flicker: 
    //contents.css change (test: clear css cache): body {overflow:hidden; /*Hide Autogrow flicker*/} 
    var editorBody = $(editor.editable().$); 
    if (newHeight >= max) 
     editorBody.css('overflow-y', 'visible'); 
    else 
     editorBody.css('overflow-y', 'hidden');