ckeditor 3整個頁面預覽的不同身體風格

在ckeditor 3中輸入完整頁面預覽時是否可以更改主體樣式。也許爲整頁設置不同的主體樣式，而不是整個頁面模式。其原因是在使用瀏覽器最大化的大屏幕上查看網頁時使用ckeditor ...在這種情況下，它非常廣泛且很難閱讀內容。所以我想在車身造型加上（但僅限於全頁模式）是這樣的：ckeditor 3整個頁面預覽的不同身體風格

... 
margin: 5%; 
padding: 5%; 
border: 1px dotted #666; 
...

...，這將使更多的文字處理器的外觀的內容。

TNX！

來源

2012-02-11 mmargeta

當CKEditor切換到全屏模式時，它會將「cke_maximized」類添加到容器跨度。

所以，你可以申請像整個容器跨度風格（車身+工具欄）：

.cke_maximized{ 
    margin: 5%; 
    padding: 5%; 
    border: 1px dotted #666; 
}

或只爲內容主體：

.cke_maximized iframe{ 
    margin: 5%; 
    padding: 5%; 
    border: 1px dotted #666; 
}

這些只是例子，你可以嘗試和選擇css選擇器，更適合你。

更新1：

當然，你可以使用JavaScript代碼，如果它不能滿足你的目的。你可以使用像這樣的東西：

var editor = CKEDITOR.instances.editor1; 

editor.on("afterCommandExec", function(e){ 
    if(e.data.name == 'maximize'){ 
     // maximized 
     if(e.data.command.state == CKEDITOR.TRISTATE_ON){ 
      // add special css class to body(e.editor.document.getBody()) 
     } else { 
     // minimized 
     // remove special css from body 
     } 
    } 
});

來源

2012-02-14 23:18:54

Tnx。 @Aleh Zasypkin爲這個技巧 - 我已經嘗試過了，但它仍然不是有用的......關閉，但仍然不適合生產目的。由於iframe被硬編碼爲100％寬度和100％高度（可以在ckeditor.js中更改），主體內容的空間更大。風格cke_maximized被添加，但是這個你不能控制iframe中的內容。最好的方法是在最大化事件中改變或添加iframe內部正文內容的樣式。 – mmargeta 2012-02-16 12:26:40

是的，在這種情況下，您沒有其他選擇，而不是JS代碼。請看看我上面的更新。 – 2012-02-16 16:27:35

感謝Aleh！我在同一時間遇到這種解決方案。像魅力一樣....你幫了很多！ – mmargeta 2012-02-16 16:54:05

ckeditor 3整個頁面預覽的不同身體風格

回答

相關問題