天天看點

TinyMCE與Domino內建

TinyMCE與Domino內建

一:TinyMCE簡介

 TinyMCE是一個輕量級的基于浏覽器的所見即所得編輯器,由JavaScript寫成。它對IE6+和Firefox1.5+都有着非常良好的支援。能夠滿足大部分網站的需求,并且功能配置靈活簡單。另一特點是加載速度非常快,而且可以讓使用者自由的定制,TinyMCE是一個根據LGPL license釋出的自由軟體,你可以把它用于商業應用。

二:與domino內建

1. 将下面檔案解壓縮後,将tiny_mce檔案放在伺服器目錄下,例如(webhtml\js\tiny_mce)

2. 在你要使用的系統中建立子表單,子表單内嵌HTML内容如下(紅色标記需根據伺服器做相應更改)

<html>

<head>

<title> TinyMCE與Domino內建</title>

<!-- TinyMCE -->

<script language="javascript" type="text/javascript" src="/webhtml/js/tiny_mce/tiny_mce.js" temp_src="/webhtml/js/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">

tinyMCE.init({

  mode : "textareas",

  theme : "advanced",

  elements:"elm1",

  plugins : "table,save,advhr,advimage,advlink,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,-emotions,fullpage",

  theme_advanced_buttons1_add_before : "save,newdocument,separator",

  theme_advanced_buttons1_add : "fontselect,fontsizeselect",

  theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",

  theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",

  theme_advanced_buttons3_add_before : "tablecontrols,separator",

  theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen,fullpage",

  theme_advanced_toolbar_location : "top",

  theme_advanced_toolbar_align : "left",

  theme_advanced_path_location : "bottom",

  content_css : "example_full.css",

     plugin_insertdate_dateFormat : "%Y-%m-%d",

     plugin_insertdate_timeFormat : "%H:%M:%S",

  extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",

  external_link_list_url : "example_link_list.js",

  external_image_list_url : "example_image_list.js",

  flash_external_list_url : "example_flash_list.js",

  file_browser_callback : "fileBrowserCallBack",

  theme_advanced_resize_horizontal : false,

  theme_advanced_resizing : true,

  apply_source_formatting : true

 });

 function fileBrowserCallBack(field_name, url, type, win)

  {

  // This is where you insert your custom filebrowser logic

  var o=win.document.getElementById("filedia"); 

         o.click(); 

  win.document.getElementById(field_name).value=o.value;

           }

</script>

<script language="javascript" type="text/javascript" src="/webhtml/js/tiny_mce/plugins/emotions/editor_plugin.js" temp_src="/webhtml/js/tiny_mce/plugins/emotions/editor_plugin.js"></script>

<script language="javascript" type="text/javascript">tinyMCE.setPluginBaseURL('emotions','/webhtml/js/tiny_mce/plugins/emotions');</script>

</head>

<body topmargin="0">

 [< RTF域(将域HTML标記中樣式進行定制例如 height: 100%; width:100%;)

</body>

</html>

3.在你要使用該編輯器的表單中插入該子表單即可。

三:說明

1.編輯器的工具按鈕可以根據需要定制。

2.這裡隻采用了最簡單的方法,使用RTF域,這裡可以有其他的靈活方式

3.<:這個在RTF域前可以解釋html(沒有這個在頁面輸出html代碼)

本文轉自生魚片部落格園部落格,原文連結:http://www.cnblogs.com/carysun/archive/2008/02/03/1063439.html,如需轉載請自行聯系原作者

繼續閱讀