`
阅读更多

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代码)

分享到:
评论

相关推荐

    tinymce本地引入集成demo以及使用版本是5+版本兼容低版本谷歌

    这个"tinymce本地引入集成demo"显然是一份指导如何在本地环境中集成和使用TinyMCE的示例代码,特别强调了其与版本5+的兼容性,同时也考虑到了对较低版本谷歌浏览器的支持。下面我们将深入探讨TinyMCE的关键特性、...

    tinymce-rails, 集成TinyMCE与 Rails 资产管道.zip

    tinymce-rails, 集成TinyMCE与 Rails 资产管道 用于TinyMCE的 Rails 集成tinymce-rails gem 将 TinyMCE 编辑器与 Rails 资产管道集成在一起。这里 gem 与 Rails 3.1.1和更高的( 包括 Rails 4 ) 兼容。这是 Tiny

    PHP版符合W3C的在线文本编辑器tinymce中文版集成上传图片功能

    **PHP集成与上传图片功能** 在PHP环境中集成TinyMCE,可以实现在线文本编辑的同时,提供上传图片的功能。这通常涉及到以下几个步骤: 1. **安装tinymce**:首先,你需要将压缩包中的`tiny_mce`目录上传到服务器的...

    在线文本编辑器tinymce中文版集成上传图片功能

    图片集成ajax是老外弄的,解压后放在网站根目录下,访问tinymce_test.php就可以了看到效果了。js比较庞大,有点慢,测试的话要关闭服务器,清除缓存。自己集成的话要严格按照tinymce_test.php,我出现的3点错误,供...

    layui的富文本编辑器插件(tinymce)封装

    在这个场景下,我们讨论的是Layui与tinymce的集成,tinymce是一款功能强大的富文本编辑器,被广泛应用于各种项目中。 tinymce的封装主要是为了在Layui框架内无缝使用,提供一个与Layui风格一致的编辑体验。以下是对...

    tinymce富文本编辑器集成demo,添加powerpaste插件,支持word、excel带格式粘贴

    在本示例中,我们关注的是如何将Tinymce与PowerPaste插件集成,以支持从Word和Excel中粘贴带格式的内容。 1. **Tinymce简介** Tinymce是一款强大的WYSIWYG(所见即所得)富文本编辑器,支持多种浏览器,包括Chrome...

    tinymce-highcharts-editor

    【tinymce-highcharts-editor】是一个将流行的富文本编辑器TinyMCE与强大的数据可视化库Highcharts相结合的项目。这个项目的主要目标是使用户能够在TinyMCE编辑器内部创建和编辑Highcharts图表,从而提供一种直观且...

    TinyMCE最终集成源代码

    在“TinyMCE最终集成源代码”中,我们可以预见到这是一套完整的TinyMCE编辑器集成方案,可能包含了与Vue.js框架结合的示例。 首先,我们来看“tinymce-vue2-demo”这个文件名。这表明压缩包内包含了一个基于Vue 2.x...

    tinymce 3.3.5 集成了中文语言包

    在你提供的资料中,我们关注的是TinyMCE的3.3.5.1版本,它已经集成了中文语言包。 TinyMCE 3.3.5.1 版本是一个重要的里程碑,因为它不仅提供了基础的文本编辑功能,如字体选择、字号调整、颜色设置等,还支持更...

    tinymce富文本编辑器集成demo,添加powerpaste插件,支持word、excel带格式粘贴.rar

    4. **兼容性**:Powerpaste插件与Tinymce的多个版本兼容,使得老版本的Tinymce也能享受到这一便利的功能。 ** 集成与使用 ** 集成Tinymce和Powerpaste插件通常涉及以下步骤: 1. **下载与安装**:首先,你需要从...

    grav-plugin-tinymce-editor:用于Grav的TinyMCE编辑器集成插件

    TinyMCE编辑器集成是一个最先进的插件,将企业级所见即所得HTML编辑器与现代CMS 集成在一起。 撇开这句话,这是您在使用Markdown从内创作页面时感到厌倦,害怕或不满意时应使用的。 它具有广泛的可配置性,因此您...

    tinymce 汉化语言包

    汉化语言包的维护非常重要,因为随着TinyMCE的新版本发布,可能会添加新的功能或者修改现有功能的界面元素,这就需要保持汉化包的更新,以确保与最新版本的兼容。开发者可以通过参与开源项目或者联系TinyMCE官方获取...

    tinymce4.7.5

    将TinyMCE与Vue.js结合,可以方便地在Vue组件中嵌入富文本编辑功能,使开发者能够在Vue应用中无缝集成文本编辑功能。这使得UI交互更加直观,同时保持Vue应用的可维护性和可扩展性。 在TinyMCE 4.7.5中,我们可能会...

    tinymce简体中文版

    5. **API支持**:通过其JavaScript API,开发者可以与TinyMCE进行深度集成,实现如事件监听、内容获取与设置、以及自定义行为等功能。 6. **WYSIWYG(所见即所得)**:TinyMCE的工作方式类似于常见的办公软件,用户...

    vue3中使用tinyMCE

    在Vue3中,TinyMCE的使用既可以直接与TinyMCE库结合,也可以通过Vue插件实现。无论是哪种方式,关键在于理解Vue3的Composition API和生命周期钩子,以及TinyMCE的配置和API,这样才能有效地集成和管理编辑器实例。...

    在vue3项目中使用tinymce编辑器

    6. **数据绑定**:如果需要将TinyMCE中的内容与Vue数据模型绑定,可以监听编辑器的`change`事件,并在事件处理函数中更新数据。同时,初始化时也需要将Vue的数据注入到编辑器中: ```javascript data() { return ...

    tinymce插件powerpaste支持4、5版本.zip

    通过解压并研究这些文件,开发者可以学习如何在自己的TinyMCE项目中集成和配置PowerPaste,或者根据需要进行自定义。 总的来说,TinyMCE的PowerPaste插件是一个至关重要的工具,它提升了用户在Web内容编辑中的效率...

    tinymce粘贴word插件powerpaste

    ** 集成与使用步骤** 1. 下载并解压 "tinymce_powerpaste-master" 压缩包。 2. 将 Powerpaste 相关的 JavaScript 和 CSS 文件添加到你的项目中。 3. 初始化 Tinymce 编辑器时,将 Powerpaste 作为插件引入。 4. ...

    TinyMce For Extjs

    集成TinyMCE到ExtJS的过程中,`Ext.ux.TinyMCE.js`和`Ext.ux.TinyMCE.min.js`是关键文件,它们是ExtJS的一个扩展(ux组件),实现了TinyMCE与ExtJS组件的交互。`Ext.ux.TinyMCE.js`是未压缩的源代码,方便调试和理解...

Global site tag (gtag.js) - Google Analytics