TinyMCE与Domino集成-阿里云开发者社区

开发者社区> 开发与运维> 正文

TinyMCE与Domino集成

简介:

TinyMCE与Domino集成
一:TinyMCE简介
 TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。能够满足大部分网站的需求,并且功能配置灵活简单。另一特点是加载速度非常快,而且可以让用户自由的定制,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。

二:与domino集成
1. 将下面文件解压缩后,将tiny_mce文件放在服务器目录下,例如(webhtml\js\tiny_mce)
    http://tinymce.moxiecode.com处下载
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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章