Tải trước tài sản CKEditor

Question

Tôi đang sử dụng tính năng nội tuyến CKEditor. Tôi khởi tạo phiên bản trình chỉnh sửa mới mỗi khi người dùng di chuột qua vùng văn bản. Vấn đề là khi người dùng di chuyển và tập trung vào một vùng văn bản lần đầu tiên, thanh công cụ trình soạn thảo mất một vài giây để xuất hiện vì trình chỉnh sửa đang tải tất cả các nội dung cần thiết.

Câu hỏi của tôi là: Làm thế nào tôi có thể tải trước tất cả nội dung CKEditor cần thiết trong sự kiện onclick thay vì khi người dùng di chuyển một vùng văn bản?

Tôi đã thử thêm tất cả nội dung trong tệp HTML và trình chỉnh sửa xuất hiện ngay lập tức, tuy nhiên khi tôi nhìn vào DOM, nội dung tệp có nguồn gốc hai lần. Có nghĩa là ngay cả khi các tệp đã có, CKEditor vẫn tải chúng.

Answer 1

Bạn có thể khởi tạo trình chỉnh sửa giả trên trang onload hoặc onclick. Giữ trình chỉnh sửa giả được ẩn bằng cách sử dụng display: none. Khi trình soạn thảo giả của bạn được nạp, nó sẽ tải tất cả các tài sản và lần sau khi bạn hiển thị trình soạn thảo, nó sẽ không tải lại các tài sản. Đơn giản!

Answer 2

Bạn có thể đi trước và khởi tạo các instance của biên tập viên bình thường, nhưng thiết visibility của tiêu đề trên thanh công cụ và footer để ẩn và giảm của họ height đến 0. Sau đó trên di chuột bạn sẽ đặt height tự động, và visibility để có thể nhìn thấy.

CKE Editor Javascript thêm kiểu nội tuyến cho chiều cao trên thanh công cụ, vì vậy bạn sẽ cần khai báo !important trên chiều cao.

https://jsfiddle.net/ucytmjj5/4/

span.cke_top, 
span.cke_bottom { 
    visibility: hidden; 
    height: 0px !important; 
} 

div.cke:hover span.cke_top, 
div.cke:hover span.cke_bottom { 
    visibility: visible; 
    height: auto !important; 
} 

Answer 3

Bạn có thể thử cho thấy vùng văn bản sau CKEDITOR dụ đã được tạo. Ví dụ.

CKEDITOR.on('instanceCreated', function(evt) { 
 
    evt.editor.element.setStyle("display", "block"); 
 
}); 
 
CKEDITOR.replace('editor1');

#editor1 { 
 
    display: none; 
 
}

<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script> 
 
<textarea id="editor1"></textarea>

Answer 4

Bạn có thể tái sử dụng cùng một ví dụ của các biên tập viên mỗi lần, nhưng thay thế văn bản của trình soạn thảo với giá trị của textarea rằng dùng di chuột qua. Bằng cách đó, trình chỉnh sửa sẽ chỉ tải một lần và được sử dụng lại.

Answer 5

Hãy thử sử dụng phiên bản CDN của nội dung, nếu nó khắc phục được sự cố của bạn thì đó có thể là sự cố máy chủ.

Nếu bạn đang sử dụng nội dung từ máy chủ không có chính sách hoặc chính sách bộ nhớ cache không cho phép bộ nhớ cache của trình duyệt, trình duyệt có thể tải xuống các tệp này nhiều lần.