現在位置:首頁 / 資訊廣場 / 軟體相關 / 如何改變TinyMCE 3.2.02(3.2.1.1適用)的編輯字體大小
主題:如何改變TinyMCE 3.2.02(3.2.1.1適用)的編輯字體大小
時間:2008-11-02 12:45:48
修改 4 次,瀏覽1587 次

如果你是一個撰寫網頁的程式設計師,那你應該會聽過TinyMCE這套軟體。很多免費的軟體像是wordpress等大型的(免費)部落格平台,也是使用TinyMCE當成文字撰寫的輸入介面,這一套使用Javascript所撰寫而成的輸入介面,可以幫你將From的文字轉成html後再寫入資料庫中,讓很多瀏覽器可以瀏覽,而不會產生不相容的狀況,講了這麼多,來看一下是如何做的吧!

修改前內碼:

修改前輸入頁面:(這樣的文字很小吧!)

修改後內碼:

修改後輸入頁面:(這樣的文字大小很不錯吧!而且行距還是2倍高度喔!看起來就更舒服了。)

 

要改變文字大小必須要更改content.css這個檔案,而且程序非常簡單喔!

  1. content.css 的路徑為  tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css  。
  2. 請將font-size:11px;改為font-size:15px;(字加大)並新增 line-height:2;(行距加大)
    body, td, pre {color:#000; font-size:15px; margin:8px; line-height:2}
    body {background:#FFF;}
    body.mceForceColors {background:#FFF; color:#000;}
    h1 {font-size: 2em}
    h2 {font-size: 1.5em}
    h3 {font-size: 1.17em}
    h4 {font-size: 1em}
    h5 {font-size: .83em}
    h6 {font-size: .75em}
    .mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
    a.mceItemAnchor {width:12px; line-height:6px; overflow:hidden; padding-left:12px; background:url(img/items.gif) no-repeat bottom left;}
    img.mceItemAnchor {width:12px; height:12px; background:url(img/items.gif) no-repeat;}
    img {border:0;}
    table {cursor:default}
    table td, table th {cursor:text}
    ins {border-bottom:1px solid green; text-decoration: none; color:green}
    del {color:red; text-decoration:line-through}
    cite {border-bottom:1px dashed blue}
    acronym {border-bottom:1px dotted #CCC; cursor:help}
    abbr, html\:abbr {border-bottom:1px dashed #CCC; cursor:help}
  3. 儲存後上傳。
  4. 記得清除瀏覽器的cache,然後重新(Refresh)更新頁面。