Tinymce and Domino Integration
I. Introduction to tinymce
Tinymce is a lightweight browser-based WYSIWYG editor written in JavaScript. It has excellent support for IE6 + and firefox1.5 +. It can meet the needs of most websites, and its function configuration is flexible and simple. Another feature is that the loading speed is very fast and can be customized freely. tinymce is a free software released based on lgpl license, which you can use for commercial applications.
2. Integration with Domino
1. decompress the following file and put the tiny_mce file under the server directory, for example (webhtml \ JS \ tiny_mce)
Http://tinymce.moxiecode.com download
2. Create a sub-form in the system you want to use. The HTML content embedded in the sub-form is as follows (the red mark must be changed based on the server)
<HTML>
<Head>
<Title> tinymce and Domino integration </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.doc ument. getelementbyid ("filedia ");
O. Click ();
Win.doc ument. 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 field (customize the style in the field HTML Tag, for example, height: 100%; width: 100% ;)
</Body>
</Html>
3. Insert the child form to the form in the editor.
Iii. Description
1. The tool buttons of the editor can be customized as needed.
2. Here we only use the simplest method, using the RTF domain. here we can use other flexible methods.
3. <: this can be interpreted as HTML before the RTF domain (without the HTML output on the page Code