zoukankan      html  css  js  c++  java
  • 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%; 100%;)
    </body>
    </html>
    3.在你要使用该编辑器的表单中插入该子表单即可。
    三:说明
    1.编辑器的工具按钮可以根据需要定制。
    2.这里只采用了最简单的方法,使用RTF域,这里可以有其他的灵活方式
    3.<:这个在RTF域前可以解释html(没有这个在页面输出html代码)

    作者:生鱼片
             
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    SpringBoot实战项目(十)--用户修改功能之后台存储
    SpringBoot实战项目(九)--用户修改功能之显示用户对应角色
    SpringBoot实战项目(八)--用户修改功能之显示用户信息
    SpringBoot实战项目(七)--用户新增功能之后台存储
    SpringBoot实战项目(六)--用户新增功能之验证处理
    SpringBoot实战项目(五)--用户新增功能之页面构建
    jQuery 杂项方法大全
    jQuery AJAX方法详谈
    jQuery 遍历方法大全
    PHP 数组函数大全
  • 原文地址:https://www.cnblogs.com/carysun/p/1063439.html
Copyright © 2011-2022 走看看