Ckeditor设置默认全屏编辑模式

  • A+
所属分类:网站建设

使用WordPress建站的朋友,应该都很熟悉老牌的FCkeditor文字编辑器,作为新版的CKEditor更是让广大站长爱不释手!最近需要临时调试点代码,在服务器上部署了官方最新版本的CKEditor,随后发现编辑器未预设默认全屏功能的参数选项,每次打开编辑器都要手动设置全屏很是麻烦。百度谷歌了一圈,也没搜到让人满意的答案,经过一番折腾完美解决了默认设置全屏编辑模式。

解决方案

直接修改编辑器主题目录下的index.html文件,参考代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>在线编辑器</title>  
  6. <script src="../ckeditor.js"></script>  
  7. <script src="js/sample.js"></script>  
  8. <link rel="stylesheet" href="css/samples.css">  
  9. <link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">  
  10. <style>  
  11.   
  12. /*外部滚动条*/  
  13. html { overflow-y: hidden  !important; }  
  14.   
  15. html,  
  16. body,  
  17. #cke_editor,  
  18. .cke_inner.cke_reset,  
  19. #cke_1_contents{height:100% !important;}  
  20.   
  21. /*编辑区域滚动条*/  
  22. #cke_1_contents {  
  23. height: 100% !important;  
  24. position: fixed;  
  25. width: 100%;  
  26. top: 108px;  
  27. }  
  28.   
  29. /*编辑工具栏锁定*/  
  30. #cke_1_top{  
  31. position: fixed;  
  32. top: 0;  
  33. width: 100% ;  
  34. z-index: 999 ;  
  35. }  
  36. </style>  
  37. </head>  
  38. <body>  
  39.   
  40. <!--编辑区域默认显示内容-->  
  41. <div id="editor">  
  42. </div>  
  43. <script>  
  44. initSample();  
  45. </script>  
  46. </body>  
  47. </html>  
  • 微信赞助网站
  • weinxin
  • 支付宝赞助网站
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: