tinymce 免費網頁線上編輯器…

如果您和我一樣 網站都是自己寫的
後台也一定很簡陋…
我之前就再煩惱 網站後台 發文的地方 沒有網頁編輯器…
不過 現在不用煩惱了…
tinymce 他可以套用在自己網站上唷 ~
大家可以來試試看~

當然如果你懶得裝那煩人的網頁編輯器
又懶得被那些與法…
把這個架設起來 也很方便唷 ^^

第1步:下載~

載點:tinymce.rar
解壓縮密碼:skybox.pp.ru

第2步:直接上傳試試看~

第3步:開啟網站看看吧~…

出來囉~ 看似功能蠻多的 ~

第4步:如何套用到自己網站上呢?

只要把 下列原始使碼貼到要增加編輯器的頁面
他會自動把那頁的 textarea 附加上編輯器

<style>
body {font-family:Arial,Verdana; font-size: 12px;}
</style>

<!– TinyMCE –>
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : "css/content.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
},

// Enable translation mode
translate_mode : true,
language : "tw"
});
</script>
<!– /TinyMCE –>

第5步:刪減功能…

看到程式碼內... 那四行.. 會對應到 顯示出來的那四列工具
他是用 , 來分開 所以 刪除中間的 就可以把不必要的功能去除囉~


第6步:變成簡單明瞭的~

Categorized: 未分類

2 comments on “tinymce 免費網頁線上編輯器…