TinyMCE 好用的 HTML 編輯器

這是個不錯的 HTML 編輯器，完全只使用 JavaScript 寫成，可以在沒有 Web server 的狀況下 work，有非常強大的功能，可以自行開發外掛模組，而且有詳細的參數設定，可以根據個人的需求加一改寫，支援多國語言，有官方語言包，而且也支援各種的瀏覽器。

官方網站-下載頁面
中文設定說明

原始碼

1. <script language="javascript" type="text/javascript" 
2.   src="../jscripts/tiny_mce/tiny_mce.js"></script> 
3. <script language="javascript" type="text/javascript"> 
4. tinyMCE.init({ 
5.  mode: "textareas", 
6.  /* (textareas) 將所有 textarea 轉換成編輯器。*/ 
7.  /* (exact) 只轉換特定的元素。 
8.   在 elements 設定中指定那些元素的 ID 或 name 。*/ 
9.  theme: "advanced", 
10.  /* (advanced) 這是TinyMCE的高級主題，*/ 
11.  /* 這個主題允許用戶增加刪除按鈕/面板，並且比簡單或默認主題更加靈活。*/ 
12.  /* (simple) 這是TinyMCE最簡單的主題，只包括最基本的功能。*/ 
13.  
14.  language: "zh_tw_utf8", 
15.  /* 設定多國語言的檔案名稱*/ 
16.  
17.  content_css: "example_full.css", 
18.  /* 用於編輯器內部(可編輯區域)的 CSS文件*/ 
19.  
20.  plugins: "devkit,style,layer,...", 
21.  /* TinyMCE 的外掛插件，也可以載入自己寫的外掛*/ 
22.  
23.  theme_advanced_buttons1_add_before: "save,newdocum...", 
24.  theme_advanced_buttons1_add: "fontselect,fontsizes...", 
25.  theme_advanced_buttons2_add: "separator,insertdate...", 
26.  theme_advanced_buttons2_add_before: "cut,copy,paste...", 
27.  theme_advanced_buttons3_add_before: "tablecontrols...", 
28.  theme_advanced_buttons3_add: "emotions,iespell,...", 
29.  theme_advanced_buttons4: "insertlayer,moveforward,...", 
30.  /*共有三類的方法設定按鈕列的配置，所有按鈕的清單*/ 
31.  /* theme_advanced_buttons<1-n> 直接設置按鈕的清單*/ 
32.  /* theme_advanced_buttons<1-n>_add 在預設的清單後面加入額外的按鈕*/ 
33.  /* theme_advanced_buttons<1-n>_add_before 在預設的清單前面加入額外的按鈕*/ 
34.  
35.  
36.  theme_advanced_toolbar_location: "top", 
37.  /* 按鈕列的位置 "top", "bottom", "none"*/ 
38.  
39.  theme_advanced_toolbar_align: "left", 
40.  /* 按鈕列的對齊方式。left, right, center。*/ 
41.  
42.  theme_advanced_path_location: "bottom", 
43.  /*路徑及調整大小按鈕的狀態列的位置。 
44.   "top", "bottom", "none"*/ 
45.  theme_advanced_resize_horizontal: false, 
46.  theme_advanced_resizing: true, 
47.  nonbreaking_force_tab: true, 
48.  apply_source_formatting: true, 
49.  relat2ive_urls: false, 
50.  rem2ove_script_host: false, 
51. }); 
52. </script> 

<script language="javascript" type="text/javascript"
   src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
  mode: "textareas",
  /* (textareas) 將所有 textarea 轉換成編輯器。*/
  /* (exact) 只轉換特定的元素。
   在 elements 設定中指定那些元素的 ID 或 name 。*/
  theme: "advanced",
  /* (advanced) 這是TinyMCE的高級主題，*/
  /* 這個主題允許用戶增加刪除按鈕/面板，並且比簡單或默認主題更加靈活。*/
  /* (simple) 這是TinyMCE最簡單的主題，只包括最基本的功能。*/

  language: "zh_tw_utf8",
  /* 設定多國語言的檔案名稱*/

  content_css: "example_full.css",
  /* 用於編輯器內部(可編輯區域)的 CSS文件*/

  plugins: "devkit,style,layer,...",
  /* TinyMCE 的外掛插件，也可以載入自己寫的外掛*/

  theme_advanced_buttons1_add_before: "save,newdocum...",
  theme_advanced_buttons1_add: "fontselect,fontsizes...",
  theme_advanced_buttons2_add: "separator,insertdate...",
  theme_advanced_buttons2_add_before: "cut,copy,paste...",
  theme_advanced_buttons3_add_before: "tablecontrols...",
  theme_advanced_buttons3_add: "emotions,iespell,...",
  theme_advanced_buttons4: "insertlayer,moveforward,...",
  /*共有三類的方法設定按鈕列的配置，所有按鈕的清單*/
  /* theme_advanced_buttons<1-n> 直接設置按鈕的清單*/
  /* theme_advanced_buttons<1-n>_add 在預設的清單後面加入額外的按鈕*/
  /* theme_advanced_buttons<1-n>_add_before 在預設的清單前面加入額外的按鈕*/


  theme_advanced_toolbar_location: "top",
  /* 按鈕列的位置 "top", "bottom", "none"*/

  theme_advanced_toolbar_align: "left",
  /* 按鈕列的對齊方式。left, right, center。*/

  theme_advanced_path_location: "bottom",
  /*路徑及調整大小按鈕的狀態列的位置。
   "top", "bottom", "none"*/
  theme_advanced_resize_horizontal: false,
  theme_advanced_resizing: true,
  nonbreaking_force_tab: true,
  apply_source_formatting: true,
  relat2ive_urls: false,
  rem2ove_script_host: false,
});
</script>