Cách thiết lập CKEditor cho nhiều phiên bản với các độ cao khác nhau?

Question

Tôi muốn có nhiều phiên bản của CKEditor dựa trên cùng các cài đặt cấu hình, nhưng có chiều cao khác nhau. Tôi đã cố gắng thiết lập cấu hình với chiều cao mặc định, thiết lập các ví dụ 1, sau đó trọng chiều cao & lập Ví dụ 2:

var config = { 
    ..... 
    height:'400' 
}; 

$('#editor1').ckeditor(config); 
config.height = '100'; 
$('#editor2').ckeditor(config); 

... nhưng tôi nhận được hai trường hợp ckeditor rằng cả hai đều có chiều cao 100px .

Tôi cũng đã cố gắng này:

CKEDITOR.replace('editor2',{ 
    height: '100' 
}); 

.. Tôi đã thông báo lỗi mà trường hợp đã tồn tại. Tôi tìm kiếm xung quanh một chút & tìm thấy ai đó trong tình huống tương tự đã nhận được lời khuyên rằng bạn phải hủy() dụ trước khi thay thế(), nhưng điều đó có vẻ quá phức tạp để chỉ thiết lập chiều cao ban đầu mới.

Cuối cùng tôi thành lập hai configs khác nhau & sao chép trên các tài sản toolbar_Full:

var config1 = { 
    height:'400', 
    startupOutlineBlocks:true, 
    scayt_autoStartup:true, 
    toolbar_Full:[ 
     { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
     { name: 'editing', items : [ 'Find','Replace','-' ] }, 
     { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, 
     { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, 
     '/', 
     { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, 
     { name: 'insert', items : [ 'Image','HorizontalRule' ] }, 
     { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, 
     { name: 'colors', items : [ 'TextColor','BGColor' ] }, 
     { name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] }, 
     { name: 'document', items : [ 'Source' ] } 
    ] 
} 

var config2 = { 
    height:'100', 
    startupOutlineBlocks:true, 
    scayt_autoStartup:true 
}; 
config2.toolbar_Full = config1.toolbar_Full; 

$('#editor1').ckeditor(config1); 
$('#editor2').ckeditor(config2); 

Có cách nào tốt hơn? Bất cứ điều gì tôi đang mất tích? Có this question nhưng họ không đăng khá đủ để hữu ích, & this very similar question chưa được trả lời. Cảm ơn!

Cập nhật:

Đây dường như là một điều không minh bạch xử lý thời gian/config của ckeditor - cấu hình được đọc & áp dụng sau đó (tôi đoán sau khung DOM của trình soạn thảo đã được thiết lập) chứ không phải là khi trình soạn thảo được khởi tạo lần đầu tiên.

Vì vậy, bất kỳ thay đổi các thiết lập cấu hình làm ngay sau khi trình biên tập 1 được khởi tạo với .ckeditor() là thực sự áp dụng bởi các biên tập viên tại một số điểm trong vài mili giây sau. Tôi cho rằng đây không phải là hành vi bình thường, hay logic. Ví dụ, bạn có thể nhận được hành vi mong đợi trong ví dụ đầu tiên của tôi (ghi đè thuộc tính config.height sau khi trình soạn thảo đầu tiên được khởi tạo) để làm việc bằng cách trì hoãn thể hiện CKEditor thứ 2 với setTimeout(). Firefox cần ~ 100ms, IE cần 1ms. Wacky & sai.

CKEditor nên đọc cài đặt cấu hình khi mỗi trình chỉnh sửa được khởi tạo lần đầu tiên. Bây giờ, tất cả mọi người phải làm việc xung quanh quirk đó.

Answer 1

Cách dễ nhất để khởi tạo hai biên tập viên với chiều cao tùy chỉnh là:

$('#editor1').ckeditor({ height: 100 }); 
$('#editor2').ckeditor({ height: 200 }); 

hoặc không có jQuery:

CKEDITOR.replace('editor1', { height: 100 }); 
CKEDITOR.replace('editor2', { height: 200 }); 

AFAIK nó không thể thay đổi chiều cao biên tập viên của một cách nhanh chóng.

Nếu các phương pháp này không hoạt động cho bạn, thì bạn đã làm sai sai.

Cập nhật:

trả lời để bình luận của bạn - câu hỏi của bạn trên thực tế là không phải về ckeditor, mà là về việc chia sẻ một đối tượng chỉ với hai thuộc tính khác nhau. Vì vậy, bạn có thể thử như sau:

var configShared = { 
     startupOutlineBlocks:true, 
     scayt_autoStartup:true, 
     // etc. 
    }, 
    config1 = CKEDITOR.tools.prototypedCopy(configShared), 
    config2 = CKEDITOR.tools.prototypedCopy(configShared); 
config1.height = 100; 
config2.height = 200; 

CKEDITOR.replace('editor1', config1); 
CKEDITOR.replace('editor2', config2); 

CKEDITOR.tools.prototypedCopy là công cụ tạo đối tượng mới với nguyên mẫu được đặt thành đường đã qua. Vì vậy, họ chia sẻ tất cả các thuộc tính ngoại trừ những thuộc tính này bạn ghi đè sau.

Cập nhật 2:

Đây là bản cập nhật cho phần "Update" trong câu hỏi :).

Không có sự gian lận trong thời gian hoặc lỗi của CKEditor hoặc bất kỳ thứ gì - JavaScript thuần túy và cách BOM/DOM và trình duyệt hoạt động cộng với một số cách tiếp cận thực tế.

Điều đầu tiên - 90% BOM/DOM là đồng bộ, nhưng có một vài điều không có. Vì toàn bộ trình chỉnh sửa này phải có bản chất không đồng bộ. Đó là lý do tại sao nó cung cấp rất nhiều sự kiện. Điều thứ hai - trong đối tượng JS được chuyển qua tham chiếu và khi chúng ta muốn CKEditor khởi tạo rất nhanh, chúng ta nên tránh các nhiệm vụ không cần thiết. Một trong số đó là sao chép đối tượng cấu hình (không có lý do chính đáng). Vì vậy, để tiết kiệm một số msecs (và vì các plugin async tải quá) CKEditor mở rộng thông qua đối tượng cấu hình chỉ bằng cách thiết lập nguyên mẫu của nó cho đối tượng có chứa các tùy chọn mặc định.

Tóm tắt - Tôi biết rằng điều này có thể trông giống như một lỗi, nhưng đó là cách hoạt động của JS/BOM/DOM. Tôi khá chắc chắn rằng nhiều phương pháp async libs khác bị ảnh hưởng bởi cùng một vấn đề.

Answer 2

Giải pháp ở trên từ Reinmar đang làm việc cho tôi, tuy nhiên tôi quyết định đưa ra thêm 1 giải pháp mà tôi đã sử dụng trước đây. Nó thực sự đơn giản, tất cả những gì bạn cần biết là ckeditor tạo phần tử div nội dung cho mọi cá thể với cùng một id, khác biệt duy nhất là giá trị gia tăng. Vì vậy, nếu bạn có 2,3,4 .. trường hợp chỉ khác biệt sẽ là số thứ tự. Đang ở đây:

CKEDITOR.on('instanceReady', function(){ 
    $('#cke_1_contents').css('height','200px'); 
}); 

Sự kiện này sẽ được kích hoạt cho mỗi trường hợp mà bạn có, vì vậy nếu bạn muốn thiết lập chiều cao cho tất cả các trường bạn có thể tạo biến toàn cầu và sử dụng nó như x trong #cke_"+x+"contents, mỗi sự kiện thời gian được kích hoạt tăng x cho 1, kiểm tra xem thể hiện trong hàng là đơn giản nếu và sau đó thiết lập chiều cao.

var x=1; 
CKEDITOR.on('instanceReady', function(){ 
    if(x==1) h='200px'; 
    else if(x==2)h='400px'; 
    else if(x==3)h='700px'; 
    $('#cke_'+x+'_contents').css('height',h); 
    x++; 
}); 

Đây không phải là giải pháp tốt nhất nhưng nó đang hoạt động, vấn đề là bạn thực sự thấy thay đổi kích thước div nội dung.

Answer 3

Thêm này, bạn sẽ nhận được thanh công cụ khác nhau cho cả ckeditor trong single trang

<script> 

    CKEDITOR.on('instanceCreated', function (event) { 
     var editor = event.editor, 
      element = editor.element; 

     if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'editorTitle') { 
      editor.on('configLoaded', function() { 
       // Remove unnecessary plugins to make the editor simpler. 
       editor.config.removePlugins = 'find,flash,' + 
        'forms,iframe,image,newpage,removeformat,' + 
        'smiley,specialchar,stylescombo,templates'; 

       // Rearrange the layout of the toolbar. 
       editor.config.toolbarGroups = [ 
        { name: 'editing', groups: ['basicstyles'] }, 
        { name: 'undo' }, 
        //{ name: 'clipboard', groups: ['selection', 'clipboard'] }, 
        { name: 'styles' }, 
        { name: 'colors' }, 
        { name: 'tools' } 
        // { name: 'about' } 
       ]; 
      }); 
     } 
    }); 

</script> 

Answer 4

Nếu bạn thêm ckeditor.js trang nhiều hơn một lần nữa, nó có thể gây ra vấn đề đó. Mã script phải được xác định một lần trong mỗi trang. <script type="text/javascript" src="Fck342/ckeditor.js"></script>

Answer 5

chỉ cần sử dụng CKEDITOR.replaceAll();