如果你是一個撰寫網頁的程式設計師,那你應該會聽過TinyMCE這套軟體。很多免費的軟體像是wordpress等大型的(免費)部落格平台,也是使用TinyMCE當成文字撰寫的輸入介面,這一套使用Javascript所撰寫而成的輸入介面,可以幫你將From的文字轉成html後再寫入資料庫中,讓很多瀏覽器可以瀏覽,而不會產生不相容的狀況,講了這麼多,來看一下是如何做的吧!
修改前內碼:
修改前輸入頁面:(這樣的文字很小吧!)
修改後內碼:
修改後輸入頁面:(這樣的文字大小很不錯吧!而且行距還是2倍高度喔!看起來就更舒服了。)
要改變文字大小必須要更改content.css這個檔案,而且程序非常簡單喔!
- content.css 的路徑為 tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css 。
- 請將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}
- 儲存後上傳。
- 記得清除瀏覽器的cache,然後重新(Refresh)更新頁面。
|