Commit 802558d5 authored by Frank Bergmann's avatar Frank Bergmann

- OpenACS 5.6

parent 7c70893e
body {
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #880000;
scrollbar-3dlight-color: #F0F0EE;
scrollbar-arrow-color: #676662;
scrollbar-base-color: #F0F0EE;
scrollbar-darkshadow-color: #DDDDDD;
scrollbar-face-color: #E0E0DD;
scrollbar-highlight-color: #F0F0EE;
scrollbar-shadow-color: #F0F0EE;
scrollbar-track-color: #F5F5F5;
}
.header1 {
font-weight: bold;
font-size: 14px
}
.header2 {
font-weight: bold;
font-size: 12px;
color: #FF0000
}
.header3 {
font-weight: normal;
font-size: 12px;
color: #0000FF
}
.tablerow1 {
background-color: #BBBBBB;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Advanced example</title>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "elm1,elm2",
save_callback : "customSave",
content_css : "example_advanced.css",
extended_valid_elements : "a[href|target|name]",
plugins : "table",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
//invalid_elements : "a",
theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
//execcommand_callback : "myCustomExecCommandHandler",
debug : false
});
// Custom event handler
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
var linkElm, imageElm, inst;
switch (command) {
case "mceLink":
inst = tinyMCE.getInstanceById(editor_id);
linkElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");
if (linkElm)
alert("Link dialog has been overriden. Found link href: " + tinyMCE.getAttrib(linkElm, "href"));
else
alert("Link dialog has been overriden.");
return true;
case "mceImage":
inst = tinyMCE.getInstanceById(editor_id);
imageElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");
if (imageElm)
alert("Image dialog has been overriden. Found image src: " + tinyMCE.getAttrib(imageElm, "src"));
else
alert("Image dialog has been overriden.");
return true;
}
return false; // Pass to next handler in chain
}
// Custom save callback, gets called when the contents is to be submitted
function customSave(id, content) {
alert(id + "=" + content);
}
</script>
<!-- /tinyMCE -->
</head>
<body>
<a href="example_full.htm">[Full featured example]</a> [Advanced example] <a href="example_simple.htm">[Simple example]</a> <a href="example_word.htm">[Word example]</a>
<h3>Advanced example</h3>
This page shows a more complex usage of TinyMCE. On this page the mode is set to convert specific elements in this case a DIV element and a TEXTAREA into editor instances. The example below uses a custom CSS, thats why the text is red and it allso uses the &quot;advanced&quot; theme that includes more options than the default one. The code allso includes examples of custom call back functions and much more. Notice the submit button at the end of the page, this button triggers a save action. Read more about the features and possible settings of TinyMCE in the <a href="../docs/index.html">manual</a>.<br />
<br />
<!-- Form with textare element with width: 100% -->
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<textarea name="elm1" style="width:100%" rows="15">
Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1. &lt;br /&gt; This editor instance has a 100% width to it.
&lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
&lt;img src=&quot;logo.jpg&quot;&gt;
</textarea>
<br />
<input type="button" name="save" value="save" onclick="tinyMCE.triggerSave();" />
</form>
<!-- Div elements that gets to be a editor instance aswell -->
<div id="elm2" style="width:450px; height:250px">
Some <b>element</b>, this is to be editor 2. <br /> This editor instance is a DIV element instead of a textarea.
<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>
<img src="logo.jpg" />
</div>
<br />
Some custom actions:
<a href="javascript:tinyMCE.execCommand('Bold');">[Bold]</a> |
<a href="javascript:tinyMCE.execCommand('Italic');">[Italic]</a>
<a href="javascript:void(0);" onclick="tinyMCE.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert some HTML]</a>
<a href="javascript:void(0);" onclick="tinyMCE.execCommand('mceReplaceContent',false,'<!-- comment --><b>{$selection}</b>');">[Replace selection]</a>
<br />
</body>
</html>
// This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system.
// There flash movies will be displayed as a dropdown in all flash dialogs if the "flash_external_list_url"
// option is defined in TinyMCE init.
var tinyMCEFlashList = new Array(
// Name, URL
["Some Flash 1", "test1.swf"],
["Some Flash 2", "test2.swf"]
);
body {
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
scrollbar-3dlight-color: #F0F0EE;
scrollbar-arrow-color: #676662;
scrollbar-base-color: #F0F0EE;
scrollbar-darkshadow-color: #DDDDDD;
scrollbar-face-color: #E0E0DD;
scrollbar-highlight-color: #F0F0EE;
scrollbar-shadow-color: #F0F0EE;
scrollbar-track-color: #F5F5F5;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
pre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.example1 {
font-weight: bold;
font-size: 14px
}
.example2 {
font-weight: bold;
font-size: 12px;
color: #FF0000
}
.tablerow1 {
background-color: #BBBBBB;
}
thead {
background-color: #FFBBBB;
}
tfoot {
background-color: #BBBBFF;
}
th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full featured example</title>
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
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,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,|,code",
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",
media_external_list_url : "example_media_list.js",
template_external_list_url : "example_template_list.js",
file_browser_callback : "fileBrowserCallBack",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
nonbreaking_force_tab : true,
apply_source_formatting : true,
template_replace_values : {
username : "Jack Black",
staffid : "991234"
},
relat2ive_urls : false,
rem2ove_script_host : false
});
function fileBrowserCallBack(field_name, url, type, win) {
// This is where you insert your custom filebrowser logic
alert("Example of filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);
// Insert new URL, this would normaly be done in a popup
win.document.forms[0].elements[field_name].value = "someurl.htm";
}
</script>
<!-- /TinyMCE -->
</head>
<body>
[Full featured example] <a href="example_advanced.htm">[Advanced example]</a> <a href="example_simple.htm">[Simple example]</a> <a href="example_word.htm">[Word example]</a>
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<h3>Full featured example</h3>
This page shows all available plugins that are included in the TinyMCE distribution. Some of these plugins will only be visible on MSIE due to the lack of some support in FF. For more details on the various options on TinyMCE check the <a href="../docs/index.html">manual</a> or for more third party plugins check the plugin section.<br /><br />
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
&lt;span class=&quot;example1&quot;&gt;Test header 1&lt;/span&gt;&lt;br /&gt;
&lt;span class=&quot;example2&quot;&gt;Test header 2&lt;/span&gt;&lt;br /&gt;
&lt;span class=&quot;example3&quot;&gt;Test header 3&lt;/span&gt;&lt;br /&gt;
Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1. &lt;br /&gt; This editor instance has a 100% width to it.
&lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
&lt;img src=&quot;logo.jpg&quot;&gt;
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
// This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system.
// There images will be displayed as a dropdown in all image dialogs if the "external_link_image_url"
// option is defined in TinyMCE init.
var tinyMCEImageList = new Array(
// Name, URL
["Logo 1", "logo.jpg"],
["Logo 2 Over", "logo_over.jpg"]
);
// This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system.
// There links will be displayed as a dropdown in all link dialogs if the "external_link_list_url"
// option is defined in TinyMCE init.
var tinyMCELinkList = new Array(
// Name, URL
["Moxiecode", "http://www.moxiecode.com"],
["Freshmeat", "http://www.freshmeat.com"],
["Sourceforge", "http://www.sourceforge.com"]
);
// This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system.
// There flash movies will be displayed as a dropdown in all media dialog if the "media_external_list_url"
// option is defined in TinyMCE init.
var tinyMCEMediaList = new Array(
// Name, URL
["Some Flash 1", "test1.swf"],
["Some Flash 2", "test2.swf"]
);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Simple example</title>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
<!-- /tinyMCE -->
</head>
<body>
<a href="example_full.htm">[Full featured example]</a> <a href="example_advanced.htm">[Advanced example]</a> [Simple example] <a href="example_word.htm">[Word example]</a>
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<h3>Simple example</h3>
This page shows how to use TinyMCE on a HTML page in the most common and simple way. On this page each TEXTAREA
element gets converted to a editor instance on page load. Notice how TinyMCE tries to match the width and height of the old text area elements. Read more about the features and settings of TinyMCE in the <a href="../docs/index.html">manual</a>.<br /><br />
<textarea id="elm1" name="elm1" rows="10" cols="40">
Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1.
&lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
&lt;img src=&quot;logo.jpg&quot;&gt;
</textarea>
<br />
<textarea id="elm2" name="elm2" rows="15" cols="32">
Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 2.
&lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
&lt;img src=&quot;logo.jpg&quot;&gt;
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Template plugin example</title>
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce_dev.js"></script>
<script language="javascript" type="text/javascript">
function exampleTemplateFunction(elm) {
elm.innerHTML = prompt("Please enter your favourite colour.", "Color");
}
var Invoice = {
calculate : function(table) {
var _n = function(s) {
var n = parseFloat(s.replace(/[^-\d\.]/g,''));
return isNaN(n) ? 0 : n;
}
var total = 0;
var r = table.tBodies[0].rows;
for(var x = 0; x < r.length; x++) {
var c = r[x].cells;
var t = _n(c[1].innerHTML)*_n(c[2].innerHTML);
total += t;
c[3].innerHTML = '$' + t;
}
table.tFoot.rows[0].cells[1].innerHTML = '$' + total;
}
}
var WordCount = {
getText : function() {
var inst = tinyMCE.selectedInstance;
var na = [];
tinyMCE.getNodeTree(inst.getBody(), na, 3);
for(var x = 0; x < na.length; x++) {
if(na[x].nodeValue && na[x].nodeValue.length > 3) {
na[x] = na[x].nodeValue;
} else {
na[x] = '';
}
}
return na.join('');
},
count : function(elm) {
var s = WordCount.getText();
elm.innerHTML = '' + s.split(' ').length;
},
charCount : function(elm) {
var s = WordCount.getText();
elm.innerHTML = '' + s.length;
}
}
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
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,advsearchreplace",
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,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking,|,template,|,code",
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|title|tsrc],*[mcetmpldtesrc]",
external_link_list_url : "example_link_list.js",
external_image_list_url : "example_image_list.js",
flash_external_list_url : "example_flash_list.js",
media_external_list_url : "example_media_list.js",
file_browser_callback : "fileBrowserCallBack",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
nonbreaking_force_tab : true,
apply_source_formatting : true,
template_cdate_classes : "cdate creationdate",
template_mdate_classes : "mdate somedate",
template_selected_content_classes : "selcontent",
template_cdate_format : "%m/%d/%Y : %H:%M:%S",
template_mdate_format : "%m/%d/%Y : %H:%M:%S",
template_replace_values : {
username : "Andrew Tetlaw",
"invoice-items" : Invoice.calculate,
"word-count" : WordCount.count,
"char-count" : WordCount.charCount
},
template_templates : [
{
title : 'Editing Details',
src : 'templates/editing_details.htm',
description : "Timestamps, editor's name and a comment area"
},
{
title : 'Invoice Template',
src : 'templates/invoice.htm',
description : 'Fill in the rows and the totals are calculated automatically'
},
{
title : 'Word Count',
src : 'templates/count.htm',
description : 'Word count for editor content'
},
{
title : 'Editors Comment',
src : 'templates/editors_comment.htm',
description : 'Add a comment about the selected text'
}
]
});
</script>
<!-- /TinyMCE -->
</head>
<body>
<a href="example_full.htm">[Full featured example]</a> <a href="example_advanced.htm">[Advanced example]</a> <a href="example_simple.htm">[Simple example]</a> <a href="example_word.htm">[Word example]</a>
<form method="get" action="">
<h3>Template example</h3>
This example shows how to make more advanced templates that execute logic.<br /><br />
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
&lt;span class=&quot;example1&quot;&gt;Test header 1&lt;/span&gt;&lt;br /&gt;
&lt;span class=&quot;example2&quot;&gt;Test header 2&lt;/span&gt;&lt;br /&gt;
&lt;span class=&quot;example3&quot;&gt;Test header 3&lt;/span&gt;&lt;br /&gt;
Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1. &lt;br /&gt; This editor instance has a 100% width to it.
&lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
&lt;img src=&quot;logo.jpg&quot;&gt;
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
// This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system.
// There templates will be displayed as a dropdown in all media dialog if the "template_external_list_url"
// option is defined in TinyMCE init.
var tinyMCETemplateList = [
// Name, URL, Description
["Simple snippet", "templates/snippet1.htm", "Simple HTML snippet."],
["Layout", "templates/layout1.htm", "HTML Layout."]
];
\ No newline at end of file
body {
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
scrollbar-3dlight-color: #F0F0EE;
scrollbar-arrow-color: #676662;
scrollbar-base-color: #F0F0EE;
scrollbar-darkshadow-color: #DDDDDD;
scrollbar-face-color: #E0E0DD;
scrollbar-highlight-color: #F0F0EE;
scrollbar-shadow-color: #F0F0EE;
scrollbar-track-color: #F5F5F5;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
pre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.example1 {
font-weight: bold;
font-size: 14px
}
.example2 {
font-weight: bold;
font-size: 12px;
color: #FF0000
}
.tablerow1 {
background-color: #BBBBBB;
}
/* Fix for MS Office style paragraphs (MsoNormal) */
p {
margin: 0;
padding: 0;
}
/* Fix for MS Office unindeted lists */
.unIndentedList {
margin: 0;
padding: 0;
list-style-position: inside;
}
.unIndentedList li {
padding: 0;
}
/* Fix for MS Office UL lists */
ul {
margin-top: 0;
margin-bottom: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Word example</title>
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,paste,directionality,fullscreen",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,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,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
content_css : "example_word.css",
plugi2n_insertdate_dateFormat : "%Y-%m-%d",
plugi2n_insertdate_timeFormat : "%H:%M:%S",
external_link_list_url : "example_link_list.js",
external_image_list_url : "example_image_list.js",
media_external_list_url : "example_media_list.js",
file_browser_callback : "fileBrowserCallBack",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : false,
paste_remove_styles : false
});
function fileBrowserCallBack(field_name, url, type, win) {
// This is where you insert your custom filebrowser logic
alert("Filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);
// Insert new URL, this would normaly be done in a popup
win.document.forms[0].elements[field_name].value = "someurl.htm";
}
</script>
<!-- /TinyMCE -->
</head>
<body>
<a href="example_full.htm">[Full featured example]</a> <a href="example_advanced.htm">[Advanced example]</a> <a href="example_simple.htm">[Simple example]</a> [Word example]
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<h3>Word example</h3>
This example shows you how TinyMCE can be configurated to function with Word content in the best possible way. TinyMCE is configured to auto convert/cleanup pasted Word content in this example. It's has also a custom CSS that makes paragraphs marginless as in Word.<br /><br />
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
&lt;p&gt;Some paragraph&lt;/p&gt;
&lt;p&gt;Some other paragraph&lt;/p&gt;
&lt;p&gt;Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1. &lt;br /&gt; This editor instance has a 100% width to it.
&lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
&lt;img src=&quot;logo.jpg&quot;&gt;</p>
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
\ No newline at end of file
<!-- Template contents HTML outside the DIV will not be inserted -->
<div class="mceTmpl">
<p><em>Word Count: <span class="word-count">0</span>, Character count: <span class="char-count">0</span></em></p>
</div>
<!-- Template contents HTML outside the DIV will not be inserted -->
<div class="mceTmpl">
<table>
<thead>
<tr><th>Created</th><th>Modified</th><th>By</th>
</thead>
<tbody>
<tr><td class="cdate">Creation Date</td><td class="mdate">Last Modified</td><td class="username">UserName</td></tr>
<tr><td class="comment" colspan="3">Please insert editors comment here</td></tr>
</tbody>
</table>
</div>
<!-- Template contents HTML outside the DIV will not be inserted -->
<div class="mceTmpl">
<p class="selcontent" style="background-color: yellow">Selected Content</p>
<p style="padding: 3px;color:#666;border:1px solid #CCC;">
<strong>Editors Comment</strong> (<span class="cdate"></span>)<br />
[Insert your comment here]
</p>
</div>
<!-- Template contents HTML outside the DIV will not be inserted -->
<div class="mceTmpl">
<h1>Invoice # [invoice number] </h1>
<p>
[Client details]
</p>
<h2>Invoice Items</h2>
<table class="invoice-items">
<thead>
<tr><th class="col1">Item</th><th class="col2">Qty</th><th class="col3">Unit Cost</th><th class="col4">Total</th></tr>
</thead>
<tbody>
<tr><td>Item Description</td><td>1</td><td>$0.00</td><td>$0.00</td></tr>
<tr><td>Item Description</td><td>1</td><td>$0.00</td><td>$0.00</td></tr>
<tr><td>Item Description</td><td>1</td><td>$0.00</td><td>$0.00</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">Invoice Total</td><td id="invoice-total"></td></tr>
</tfoot>
</table>
</div>
<table border="1">
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Username: {$username}</td>
<td>Staffid: {$staffid}</td>
</tr>
</tbody>
</table>
This is just some <strong>code</strong>.
@echo off
FOR %%V IN (%*) DO copy %%V %%V_uncompressed.js
FOR %%V IN (%*) DO java -jar %~p0dojo_js_compressor.jar -c %%V_uncompressed.js > %%V 2>&1
FOR %%V IN (%*) DO del %%V_uncompressed.js
# pause
\ No newline at end of file
You can use the compress.php to batch-convert the current Xinha snapshot.
You can use the compress.bat to compress JavaScript files by drag&drop in Windows.
Please be aware that the language files cannot be compressed.
If you want the original files to be kept, open compress.bat and remvove the # in the line
# FOR %%V IN (%*) DO del %%V_uncompressed.js
\ No newline at end of file
This diff is collapsed.
<?php
/** Write the appropriate xinha_config directives to pass data to a PHP (Plugin) backend file.
*
* ImageManager Example:
* The following would be placed in step 3 of your configuration (see the NewbieGuide
* (http://xinha.python-hosting.com/wiki/NewbieGuide)
*
* <script language="javascript">
* with (xinha_config.ImageManager)
* {
* <?php
* xinha_pass_to_php_backend
* (
* array
* (
* 'images_dir' => '/home/your/directory',
* 'images_url' => '/directory'
* )
* )
* ?>
* }
* </script>
*
*/
function xinha_pass_to_php_backend($Data, $KeyLocation = 'Xinha:BackendKey', $ReturnPHP = FALSE)
{
$bk = array();
$bk['data'] = serialize($Data);
@session_start();
if(!isset($_SESSION[$KeyLocation]))
{
$_SESSION[$KeyLocation] = uniqid('Key_');
}
$bk['session_name'] = session_name();
$bk['key_location'] = $KeyLocation;
$bk['hash'] =
function_exists('sha1') ?
sha1($_SESSION[$KeyLocation] . $bk['data'])
: md5($_SESSION[$KeyLocation] . $bk['data']);
// The data will be passed via a postback to the
// backend, we want to make sure these are going to come
// out from the PHP as an array like $bk above, so
// we need to adjust the keys.
$backend_data = array();
foreach($bk as $k => $v)
{
$backend_data["backend_data[$k]"] = $v;
}
// The session_start() above may have been after data was sent, so cookies
// wouldn't have worked.
$backend_data[session_name()] = session_id();
if($ReturnPHP)
{
return array('backend_data' => $backend_data);
}
else
{
echo 'backend_data = ' . xinha_to_js($backend_data) . "; \n";
}
}
/** Convert PHP data structure to Javascript */
function xinha_to_js($var, $tabs = 0)
{
if(is_numeric($var))
{
return $var;
}
if(is_string($var))
{
return "'" . xinha_js_encode($var) . "'";
}
if(is_array($var))
{
$useObject = false;
foreach(array_keys($var) as $k) {
if(!is_numeric($k)) $useObject = true;
}
$js = array();
foreach($var as $k => $v)
{
$i = "";
if($useObject) {
if(preg_match('#^[a-zA-Z]+[a-zA-Z0-9]*$#', $k)) {
$i .= "$k: ";
} else {
$i .= "'$k': ";
}
}
$i .= xinha_to_js($v, $tabs + 1);
$js[] = $i;
}
if($useObject) {
$ret = "{\n" . xinha_tabify(implode(",\n", $js), $tabs) . "\n}";
} else {
$ret = "[\n" . xinha_tabify(implode(",\n", $js), $tabs) . "\n]";
}
return $ret;
}
return 'null';
}
/** Like htmlspecialchars() except for javascript strings. */
function xinha_js_encode($string)
{
static $strings = "\\,\",',%,&,<,>,{,},@,\n,\r";
if(!is_array($strings))
{
$tr = array();
foreach(explode(',', $strings) as $chr)
{
$tr[$chr] = sprintf('\x%02X', ord($chr));
}
$strings = $tr;
}
return strtr($string, $strings);
}
/** Used by plugins to get the config passed via
* xinha_pass_to_backend()
* returns either the structure given, or NULL
* if none was passed or a security error was encountered.
*/
function xinha_read_passed_data()
{
if(isset($_REQUEST['backend_data']) && is_array($_REQUEST['backend_data']))
{
$bk = $_REQUEST['backend_data'];
session_name($bk['session_name']);
@session_start();
if(!isset($_SESSION[$bk['key_location']])) return NULL;
if($bk['hash'] ===
function_exists('sha1') ?
sha1($_SESSION[$bk['key_location']] . $bk['data'])
: md5($_SESSION[$bk['key_location']] . $bk['data']))
{
return unserialize(ini_get('magic_quotes_gpc') ? stripslashes($bk['data']) : $bk['data']);
}
}
return NULL;
}
/** Used by plugins to get a query string that can be sent to the backend
* (or another part of the backend) to send the same data.
*/
function xinha_passed_data_querystring()
{
$qs = array();
if(isset($_REQUEST['backend_data']) && is_array($_REQUEST['backend_data']))
{
foreach($_REQUEST['backend_data'] as $k => $v)
{
$v = ini_get('magic_quotes_gpc') ? stripslashes($v) : $v;
$qs[] = "backend_data[" . rawurlencode($k) . "]=" . rawurlencode($v);
}
}
$qs[] = session_name() . '=' . session_id();
return implode('&', $qs);
}
/** Just space-tab indent some text */
function xinha_tabify($text, $tabs)
{
if($text)
{
return str_repeat(" ", $tabs) . preg_replace('/\n(.)/', "\n" . str_repeat(" ", $tabs) . "\$1", $text);
}
}
/** Return upload_max_filesize value from php.ini in kilobytes (function adapted from php.net)**/
function upload_max_filesize_kb()
{
$val = ini_get('upload_max_filesize');
$val = trim($val);
$last = strtolower($val{strlen($val)-1});
switch($last)
{
// The 'G' modifier is available since PHP 5.1.0
case 'g':
$val *= 1024;
case 'm':
$val *= 1024;
}
return $val;
}
?>
This diff is collapsed.
<html>
<head><title>Xinha Extended Example</title></head>
<!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha example frameset.
--
-- $HeadURL: http://svn.xinha.org/trunk/examples/ExtendedDemo.html $
-- $LastChangedDate: 2008-10-12 19:42:42 +0200 (So, 12. Okt 2008) $
-- $LastChangedRevision: 1084 $
-- $LastChangedBy: ray $
--------------------------------------------------------------------------->
<frameset cols="240,*">
<frame src="files/ext_example-menu.php" name="menu" id="menu">
<frame src="about:blank" name="body" id="body">
</frameset>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Xinha Newbie Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../XinhaLoader.js?lang=en&skin=silva"></script>
<script type="text/javascript">
_editor_icons = "Tango" // You can pass arguments via the script URL or embed them here.
</script>
<script type="text/javascript" src="XinhaConfig.js"></script>
</head>
<body>
<form action="">
<div>
<textarea id="myTextArea" name="myTextArea" rows="25" cols="50" style="width: 100%"></textarea>
</div>
</form>
</body>
</html>
/* This compressed file is part of Xinha. For uncompressed sources, forum, and bug reports, go to xinha.org */
/* This file is part of version 0.96beta2 released Fri, 20 Mar 2009 11:01:14 +0100 */
xinha_editors=null;xinha_init=null;xinha_config=null;xinha_plugins=null;xinha_init=xinha_init?xinha_init:function(){xinha_editors=xinha_editors?xinha_editors:["myTextArea","anotherOne"];xinha_plugins=xinha_plugins?xinha_plugins:["CharacterMap","ContextMenu","SmartReplace","Stylist","PersistentStorage","PSLocal","Linker","SuperClean","TableOperations"];if(!Xinha.loadPlugins(xinha_plugins,xinha_init)){return}xinha_config=xinha_config?xinha_config():new Xinha.Config();xinha_config.pageStyleSheets=[_editor_url+"examples/files/full_example.css"];xinha_config.stylistLoadStylesheet(_editor_url+"examples/files/stylist.css");xinha_editors=Xinha.makeEditors(xinha_editors,xinha_config,xinha_plugins);Xinha.startEditors(xinha_editors)};Xinha.addOnloadHandler(xinha_init);
\ No newline at end of file
/*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- CSS plugin example CSS file. This file is used by full_example.js
-- when the CSS plugin is included in an auto-generated example.
-- @TODO Make this CSS more useful.
--
-- $HeadURL: http://svn.xinha.webfactional.com/trunk/examples/custom.css $
-- $LastChangedDate: 2007-01-20 11:24:36 +1300 (Sat, 20 Jan 2007) $
-- $LastChangedRevision: 677 $
-- $LastChangedBy: ray $
--------------------------------------------------------------------------*/
body { background-color: #234; color: #dd8; font-family: tahoma; font-size: 12px; }
a:link, a:visited { color: #8cf; }
a:hover { color: #ff8; }
h1 { background-color: #456; color: #ff8; padding: 2px 5px; border: 1px solid; border-color: #678 #012 #012 #678; }
/* syntax highlighting (used by the first combo defined for the CSS plugin) */
pre { margin: 0px 1em; padding: 5px 1em; background-color: #000; border: 1px dotted #02d; border-left: 2px solid #04f; }
.code { color: #f5deb3; }
.string { color: #00ffff; }
.comment { color: #8fbc8f; }
.variable-name { color: #fa8072; }
.type { color: #90ee90; font-weight: bold; }
.reference { color: #ee82ee; }
.preprocessor { color: #faf; }
.keyword { color: #ffffff; font-weight: bold; }
.function-name { color: #ace; }
.html-tag { font-weight: bold; }
.html-helper-italic { font-style: italic; }
.warning { color: #ffa500; font-weight: bold; }
.html-helper-bold { font-weight: bold; }
/* info combo */
.quote { font-style: italic; color: #ee9; }
.highlight { background-color: yellow; color: #000; }
.deprecated { text-decoration: line-through; color: #aaa; }
/*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- DynamicCSS plugin example CSS file. Used by full_example.js
-- when the DynamicCSS plugin is included in an auto-generated example.
-- @TODO Make this CSS more useful.
--
-- $HeadURL: http://svn.xinha.webfactional.com/trunk/examples/dynamic.css $
-- $LastChangedDate: 2007-01-20 11:24:36 +1300 (Sat, 20 Jan 2007) $
-- $LastChangedRevision: 677 $
-- $LastChangedBy: ray $
--------------------------------------------------------------------------*/
p {
FONT-FAMILY: Arial, Helvetica;
FONT-SIZE: 9pt;
FONT-WEIGHT: normal;
COLOR: #000000;
}
p.p1 {
FONT-FAMILY: Arial, Helvetica;
FONT-SIZE: 11pt;
FONT-WEIGHT: normal;
COLOR: #000000;
}
p.p2 {
FONT-FAMILY: Arial, Helvetica;
FONT-SIZE: 13pt;
FONT-WEIGHT: normal;
COLOR: #000000;
}
div {
FONT-FAMILY: Arial, Helvetica;
FONT-SIZE: 9pt;
FONT-WEIGHT: bold;
COLOR: #000000;
}
div.div1 {
FONT-FAMILY: Arial, Helvetica;
FONT-SIZE: 11pt;
FONT-WEIGHT: bold;
COLOR: #000000;
}
div.div2 {
FONT-FAMILY: Arial, Helvetica;
FONT-SIZE: 13pt;
FONT-WEIGHT: bold;
COLOR: #000000;
}
.quote { font-style: italic; color: #ee9; }
.highlight { background-color: yellow; color: #000; }
.deprecated { text-decoration: line-through; color: #aaa; }
<!DOCTYPE BHTML PUBLIC "-//BC//DTD BHTML 3.2 Final//EN">
<html>
<head>
<!-- ---------------------------------------------------------------------
-- $HeadURL: http://svn.xinha.webfactional.com/trunk/examples/ext_example-body.html $
-- $LastChangedDate: 2007-06-24 04:16:09 +1200 (Sun, 24 Jun 2007) $
-- $LastChangedRevision: 858 $
-- $LastChangedBy: ray $
------------------------------------------------------------------------ -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of Xinha</title>
<link rel="stylesheet" type="text/css" href="full_example.css" />
<script type="text/javascript">
function showError( sMsg, sUrl, sLine){
document.getElementById('errors').value += 'Error: ' + sMsg + '\n' +
'Source File: ' + sUrl + '\n' +
'Line: ' + sLine + '\n';
return false;
}
// You must set _editor_url to the URL (including trailing slash) where
// where xinha is installed, it's highly recommended to use an absolute URL
// eg: _editor_url = "/path/to/xinha/";
// You may try a relative URL if you wish]
// eg: _editor_url = "../";
// in this example we do a little regular expression to find the absolute path.
_editor_url = document.location.href.replace(/examples\/ext_example-body\.html.*/, '')
//moved _editor_lang & _editor_skin to init function because of error thrown when frame document not ready
</script>
<!-- Load up the actual editor core -->
<script type="text/javascript" src="../XinhaCore.js"></script>
<script type="text/javascript">
xinha_editors = null;
xinha_init = null;
xinha_config = null;
xinha_plugins = null;
xinha_init = xinha_init ? xinha_init : function() {
window.onerror = showError;
document.onerror = showError;
var f = top.frames["menu"].document.forms["fsettings"];
_editor_lang = f.lang[f.lang.selectedIndex].value; // the language we need to use in the editor.
_editor_skin = f.skin[f.skin.selectedIndex].value; // the skin we use in the editor
// What are the plugins you will be using in the editors on this page.
// List all the plugins you will need, even if not all the editors will use all the plugins.
xinha_plugins = [ ];
for(var x = 0; x < f.plugins.length; x++) {
if(f.plugins[x].checked) xinha_plugins.push(f.plugins[x].value);
}
// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING :)
if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
// What are the names of the textareas you will be turning into editors?
var num = 1;
num = parseInt(f.num.value);
if(isNaN(num)) {
num = 1;
f.num.value = 1;
}
var dest = document.getElementById("editors_here");
var lipsum = window.parent.menu.document.getElementById('myTextarea0').value;
xinha_editors = [ ]
for(var x = 0; x < num; x++) {
var ta = 'myTextarea' + x;
xinha_editors.push(ta);
var div = document.createElement('div');
div.className = 'area_holder';
var txta = document.createElement('textarea');
txta.id = ta;
txta.name = ta;
txta.value = lipsum;
txta.style.width="100%";
txta.style.height="420px";
div.appendChild(txta);
dest.appendChild(div);
}
// Create a default configuration to be used by all the editors.
settings = top.frames["menu"].settings;
xinha_config = new Xinha.Config();
xinha_config.width = settings.width;
xinha_config.height = settings.height;
xinha_config.sizeIncludesBars = settings.sizeIncludesBars;
xinha_config.sizeIncludesPanels = settings.sizeIncludesPanels;
xinha_config.statusBar = settings.statusBar;
xinha_config.htmlareaPaste = settings.htmlareaPaste;
xinha_config.mozParaHandler = settings.mozParaHandler;
xinha_config.getHtmlMethod = settings.getHtmlMethod;
xinha_config.undoSteps = settings.undoSteps;
xinha_config.undoTimeout = settings.undoTimeout;
xinha_config.changeJustifyWithDirection = settings.changeJustifyWithDirection;
xinha_config.fullPage = settings.fullPage;
xinha_config.pageStyle = settings.pageStyle;
xinha_config.baseHref = settings.baseHref;
xinha_config.expandRelativeUrl = settings.expandRelativeUrl;
xinha_config.stripBaseHref = settings.stripBaseHref;
xinha_config.stripSelfNamedAnchors = settings.stripSelfNamedAnchors;
xinha_config.only7BitPrintablesInURLs = settings.only7BitPrintablesInURLs;
xinha_config.sevenBitClean = settings.sevenBitClean;
xinha_config.killWordOnPaste = settings.killWordOnPaste;
xinha_config.makeLinkShowsTarget = settings.makeLinkShowsTarget;
xinha_config.flowToolbars = settings.flowToolbars;
xinha_config.stripScripts = settings.stripScripts;
xinha_config.flowToolbars = settings.flowToolbars;
xinha_config.showLoading = settings.showLoading;
xinha_config.pageStyleSheets = ["own.css"];
// Create a default configuration for the plugins
if (typeof CharCounter != 'undefined') {
xinha_config.CharCounter.showChar = settings.showChar;
xinha_config.CharCounter.showWord = settings.showWord;
xinha_config.CharCounter.showHtml = settings.showHtml;
}
if(typeof CharacterMap != 'undefined') xinha_config.CharacterMap.mode = settings.CharacterMapMode;
if(typeof ListType != 'undefined') xinha_config.ListType.mode = settings.ListTypeMode;
if(typeof CSS != 'undefined') xinha_config.pageStyle = xinha_config.pageStyle + "\n" + "@import url(custom.css);";
if(typeof DynamicCSS != 'undefined') xinha_config.pageStyle = "@import url(dynamic.css);";
if(typeof Filter != 'undefined') xinha_config.Filters = ["Word", "Paragraph"];
if(typeof Stylist != 'undefined') {
// We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
// otherwise it won't work!
xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
// Or we can load styles directly
xinha_config.stylistLoadStyles('p.red_text { color:red }');
// If you want to provide "friendly" names you can do so like
// (you can do this for stylistLoadStylesheet as well)
xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
}
if(typeof InsertWords != 'undefined') {
// Register the keyword/replacement list
var keywrds1 = new Object();
var keywrds2 = new Object();
keywrds1['-- Dropdown Label --'] = '';
keywrds1['onekey'] = 'onevalue';
keywrds1['twokey'] = 'twovalue';
keywrds1['threekey'] = 'threevalue';
keywrds2['-- Insert Keyword --'] = '';
keywrds2['Username'] = '%user%';
keywrds2['Last login date'] = '%last_login%';
xinha_config.InsertWords = {
combos : [ { options: keywrds1, context: "body" },
{ options: keywrds2, context: "li" } ]
}
}
// First create editors for the textareas.
// You can do this in two ways, either
// xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
// if you want all the editor objects to use the same set of plugins, OR;
// xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
// xinha_editors['myTextarea0'].registerPlugins(['Stylist']);
// xinha_editors['myTextarea1'].registerPlugins(['CSS','SuperClean']);
// if you want to use a different set of plugins for one or more of the editors.
xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
// If you want to change the configuration variables of any of the editors,
// this is the place to do that, for example you might want to
// change the width and height of one of the editors, like this...
// xinha_editors['myTextarea0'].config.width = '640px';
// xinha_editors['myTextarea0'].config.height = '480px';
// Finally we "start" the editors, this turns the textareas into Xinha editors.
Xinha.startEditors(xinha_editors);
}
// javascript submit handler
// this shows how to create a javascript submit button that works with the htmleditor.
submitHandler = function(formname) {
var form = document.getElementById(formname);
// in order for the submit to work both of these methods have to be called.
form.onsubmit();
window.parent.menu.document.getElementById('myTextarea0').value = document.getElementById('myTextarea0').value;
form.submit();
return true;
}
window.onload = xinha_init;
// window.onunload = Xinha.collectGarbageForIE;
</script>
</head>
<body>
<form id="to_submit" name="to_submit" method="post" action="ext_example-dest.php">
<div id="editors_here"></div>
<button type="button" onclick="submitHandler('to_submit');">Submit</button>
<textarea id="errors" name="errors" style="width:100%; height:100px; background:silver;"></textarea><!-- style="display:none;" -->
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of Xinha</title>
<link rel="stylesheet" href="full_example.css" />
</head>
</body>
<?php
if (get_magic_quotes_gpc()) {
$_REQUEST = array_map('stripslashes',$_REQUEST);
}
// or in php.ini
//; Magic quotes for incoming GET/POST/Cookie data.
//magic_quotes_gpc = Off
foreach($_REQUEST as $key=>$value){
if(substr($key,0,10) == 'myTextarea') {
echo '<h3 style="border-bottom:1px solid black;">'.$key.'(source):</h3><xmp style="border:1px solid black; width: 100%; height: 200px; overflow: auto;">'.$value.'</xmp><br/>';
echo '<h3 style="border-bottom:1px solid black;">'.$key.'(preview):</h3>'.$value;
}
}
?>
</body>
</html>
This diff is collapsed.
<html>
<head><title>Xinha Extended Example</title></head>
<!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha example frameset.
--
-- $HeadURL: http://svn.xinha.webfactional.com/trunk/examples/ext_example.html $
-- $LastChangedDate: 2007-06-04 00:11:44 +1200 (Mon, 04 Jun 2007) $
-- $LastChangedRevision: 845 $
-- $LastChangedBy: gocher $
--------------------------------------------------------------------------->
<frameset cols="240,*">
<frame src="ext_example-menu.php" name="menu" id="menu">
<frame src="about:blank" name="body" id="body">
</frameset>
</html>
/*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha example logic. This javascript is used to auto-generate examples
-- as controlled by the options set in full_example-menu.html. it's called
-- from full_example-body.html.
--
-- $HeadURL$
-- $LastChangedDate$
-- $LastChangedRevision$
-- $LastChangedBy$
--------------------------------------------------------------------------*/
var num = 1;
if(window.parent && window.parent != window)
{
var f = window.parent.menu.document.forms[0];
_editor_lang = f.lang.value;
_editor_skin = f.skin.value;
num = parseInt(f.num.value);
if(isNaN(num))
{
num = 1;
f.num.value = 1;
}
xinha_plugins = [ ];
for(var x = 0; x < f.plugins.length; x++)
{
if(f.plugins[x].checked) xinha_plugins.push(f.plugins[x].value);
}
}
xinha_editors = [ ]
for(var x = 0; x < num; x++)
{
var ta = 'myTextarea' + x;
xinha_editors.push(ta);
}
xinha_config = function()
{
var config = new HTMLArea.Config();
if(window.parent && window.parent != window) {
var f = window.parent.menu.document.forms[0];
if (f.width) config.width = f.width.value;
if (f.height) config.height = f.height.value;
if (f.sizeIncludesBars) config.sizeIncludesBars = f.sizeIncludesBars.value;
if (f.statusBar) config.statusBar = f.statusBar.value;
if (f.mozParaHandler) config.mozParaHandler = f.mozParaHandler.value;
if (f.undoSteps) config.undoSteps = f.undoSteps.value;
if (f.baseHref) config.baseHref = f.baseHref.value;
if (f.stripBaseHref) config.stripBaseHref = f.stripBaseHref.value;
if (f.stripSelfNamedAnchors) config.stripSelfNamedAnchors = f.stripSelfNamedAnchors.value;
if (f.only7BitPrintablesInURLs) config.only7BitPrintablesInURLs = f.only7BitPrintablesInURLs.value;
if (f.sevenBitClean) config.sevenBitClean = f.sevenBitClean.value;
if (f.killWordOnPaste) config.killWordOnPaste = f.killWordOnPaste.value;
if (f.flowToolbars) config.flowToolbars = f.flowToolbars.value;
if ((typeof CharacterMap != 'undefined') && (f.CharacterMapMode)) config.CharacterMap.mode = f.CharacterMapMode.value;
if ((typeof ListType != 'undefined') && (f.ListTypeMode)) config.ListType.mode = f.ListTypeMode.value;
}
if(typeof CSS != 'undefined')
{
config.pageStyle = "@import url(custom.css);";
}
if(typeof Stylist != 'undefined')
{
// We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
// otherwise it won't work!
config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
// Or we can load styles directly
config.stylistLoadStyles('p.red_text { color:red }');
// If you want to provide "friendly" names you can do so like
// (you can do this for stylistLoadStylesheet as well)
config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
}
if(typeof DynamicCSS != 'undefined')
{
config.pageStyle = "@import url(dynamic.css);";
}
if(typeof InsertWords != 'undefined')
{
// Register the keyword/replacement list
var keywrds1 = new Object();
var keywrds2 = new Object();
keywrds1['-- Dropdown Label --'] = '';
keywrds1['onekey'] = 'onevalue';
keywrds1['twokey'] = 'twovalue';
keywrds1['threekey'] = 'threevalue';
keywrds2['-- Insert Keyword --'] = '';
keywrds2['Username'] = '%user%';
keywrds2['Last login date'] = '%last_login%';
config.InsertWords = {
combos : [ { options: keywrds1, context: "body" },
{ options: keywrds2, context: "li" } ]
}
}
// Path for InsertPicture plugin
if(typeof InsertPicture != 'undefined') {
InsertPicture.PicturePath = '/schmal/pictures/';
}
return config;
}
var f = document.forms[0];
f.method = 'post';
f.action = 'ext_example-dest.php';
f.innerHTML = '';
var lipsum = document.getElementById('lipsum').innerHTML;
for(var x = 0; x < num; x++)
{
var ta = 'myTextarea' + x;
var div = document.createElement('div');
div.className = 'area_holder';
var txta = document.createElement('textarea');
txta.id = ta;
txta.name = ta;
txta.value = lipsum;
txta.style.width="100%";
txta.style.height="420px";
div.appendChild(txta);
f.appendChild(div);
}
//check submitted values
var submit = document.createElement('input');
submit.type = "submit";
submit.value = "Submit";
f.appendChild(submit);
var _oldSubmitHandler = null;
if (document.forms[0].onsubmit != null) {
_oldSubmitHandler = document.forms[0].onsubmit;
}
function frame_onSubmit(){
if (_oldSubmitHandler != null) {
_oldSubmitHandler();
}
}
document.forms[0].onsubmit = frame_onSubmit;
<!DOCTYPE BHTML PUBLIC "-//BC//DTD BHTML 3.2 Final//EN">
<html>
<head>
<!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha example usage. This file shows how a developer might make use of
-- Xinha, it forms the primary example file for the entire Xinha project.
-- This file can be copied and used as a template for development by the
-- end developer who should simply removed the area indicated at the bottom
-- of the file to remove the auto-example-generating code and allow for the
-- use of the file as a boilerplate.
--
-- $HeadURL: http://svn.xinha.python-hosting.com/trunk/examples/full_example-body.html $
-- $LastChangedDate: 2006-09-26 07:14:02 +1200 (Tue, 26 Sep 2006) $
-- $LastChangedRevision: 592 $
-- $LastChangedBy: koto $
--------------------------------------------------------------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of Xinha</title>
<link rel="stylesheet" type="text/css" href="full_example.css" />
<script type="text/javascript">
// You must set _editor_url to the URL (including trailing slash) where
// where xinha is installed, it's highly recommended to use an absolute URL
// eg: _editor_url = "/path/to/xinha/";
// You may try a relative URL if you wish]
// eg: _editor_url = "../";
// in this example we do a little regular expression to find the absolute path.
_editor_url = document.location.href.replace(/examples\/full_example-body\.html.*/, '')
_editor_lang = "en"; // And the language we need to use in the editor.
</script>
<!-- Load up the actual editor core -->
<script type="text/javascript" src="../htmlarea.js"></script>
<script type="text/javascript">
xinha_editors = null;
xinha_init = null;
xinha_config = null;
xinha_plugins = null;
// This contains the names of textareas we will make into Xinha editors
xinha_init = xinha_init ? xinha_init : function()
{
/** STEP 1 ***************************************************************
* First, what are the plugins you will be using in the editors on this
* page. List all the plugins you will need, even if not all the editors
* will use all the plugins.
************************************************************************/
xinha_plugins = xinha_plugins ? xinha_plugins :
[
'CharacterMap',
'ContextMenu',
'FullScreen',
'ListType',
'SpellChecker',
'Stylist',
'SuperClean',
'TableOperations'
];
// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING :)
if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;
/** STEP 2 ***************************************************************
* Now, what are the names of the textareas you will be turning into
* editors?
************************************************************************/
xinha_editors = xinha_editors ? xinha_editors :
[
'myTextArea',
'anotherOne'
];
/** STEP 3 ***************************************************************
* We create a default configuration to be used by all the editors.
* If you wish to configure some of the editors differently this will be
* done in step 5.
*
* If you want to modify the default config you might do something like this.
*
* xinha_config = new HTMLArea.Config();
* xinha_config.width = '640px';
* xinha_config.height = '420px';
*
*************************************************************************/
xinha_config = xinha_config ? xinha_config() : new HTMLArea.Config();
/** STEP 4 ***************************************************************
* We first create editors for the textareas.
*
* You can do this in two ways, either
*
* xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
*
* if you want all the editor objects to use the same set of plugins, OR;
*
* xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
* xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
* xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
*
* if you want to use a different set of plugins for one or more of the
* editors.
************************************************************************/
xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
/** STEP 5 ***************************************************************
* If you want to change the configuration variables of any of the
* editors, this is the place to do that, for example you might want to
* change the width and height of one of the editors, like this...
*
* xinha_editors.myTextArea.config.width = '640px';
* xinha_editors.myTextArea.config.height = '480px';
*
************************************************************************/
/** STEP 6 ***************************************************************
* Finally we "start" the editors, this turns the textareas into
* Xinha editors.
************************************************************************/
HTMLArea.startEditors(xinha_editors);
}
window.onload = xinha_init;
</script>
<!--link type="text/css" rel="alternate stylesheet" title="blue-look" href="../skins/blue-look/skin.css" />
<link type="text/css" rel="alternate stylesheet" title="green-look" href="../skins/green-look/skin.css" />
<link type="text/css" rel="alternate stylesheet" title="xp-blue" href="../skins/xp-blue/skin.css" />
<link type="text/css" rel="alternate stylesheet" title="xp-green" href="../skins/xp-green/skin.css" />
<link type="text/css" rel="alternate stylesheet" title="inditreuse" href="../skins/inditreuse/skin.css" />
<link type="text/css" rel="alternate stylesheet" title="blue-metallic" href="../skins/blue-metallic/skin.css" /-->
</head>
<body>
<form id="editors_here">
<textarea id="myTextArea" name="myTextArea" rows="10" cols="80" style="width:100%"></textarea>
<textarea id="anotherOne" name="anotherOne" rows="10" cols="80" style="width:100%"></textarea>
</form>
<!-- *************************************************************************
- !! IMPORTANT !!
- The html and javascript below is the code used to create the example page.
- It renders a lot of the above unused because it pre-fills xinha_editors,
- xinha_config and xinha_plugins for you, and creates new textareas in place
- of the ones above. The items above are not used while the example is being
- used!
-
- If you are going to take the code in this file to form the basis of your
- own, then leave out this marked area.
- ********************************************************************* -->
<div id="lipsum" style="display:none">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
ante elementum turpis. Aliquam nisl. Nulla posuere neque non
tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
Curabitur pharetra bibendum lectus.</p>
<ul>
<li> Phasellus et massa sed diam viverra semper. </li>
<li> Mauris tincidunt felis in odio. </li>
<li> Nulla placerat nunc ut pede. </li>
<li> Vivamus ultrices mi sit amet urna. </li>
<li> Quisque sed augue quis nunc laoreet volutpat.</li>
<li> Nunc sit amet metus in tortor semper mattis. </li>
</ul>
</div>
<script type="text/javascript" src="full_example.js"></script>
<!-- ********************************************************************* -->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--
:noTabs=true:tabSize=2:indentSize=2:
Xinha example menu. This file is used by full_example.html within a
frame to provide a menu for generating example editors using
full_example-body.html, and full_example.js.
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of Xinha</title>
<link rel="stylesheet" href="full_example.css" type="text/css">
<style type="text/css">
form, p {margin:0; padding:0;}
label {display:block;}
#numeditor {width:25px;}
.options {display:none;}
</style>
<script type="text/javascript">
function checkPluginsOptions()
{
var plugins = document.forms[0].elements['plugins'];
for(var x = 0; x < plugins.length; x++)
if (document.getElementById(plugins[x].value + 'Options'))
document.getElementById(plugins[x].value + 'Options').style.display = (plugins[x].checked)? 'block':'none';
}
function toggleOnChange(elt) {
document.getElementById(elt.value + 'Options').style.display = (elt.checked)? 'block':'none';
}
</script>
</head>
<body onload="checkPluginsOptions();">
<form action="full_example-body.html" target="body">
<p>
Select from the options below and <input type="submit" value="click to show Example">
</p>
<fieldset>
<legend>Settings</legend>
<label>
Number of Editors: <input type="text" name="num" value="1" id="numeditor" maxlength="2">
</label>
<label>
Language:
<select name="lang">
<option value="en">English</option>
<option value="de">German</option>
<option value="fr">French</option>
<option value="it">Italian</option>
<option value="no">Norwegian</option>
</select>
</label>
<label>
Skin:
<select name="skin">
<option value="blue-look">blue-look</option>
<option value="green-look">green-look</option>
<option value="xp-blue">xp-blue</option>
<option value="xp-green">xp-green</option>
<option value="inditreuse">inditreuse</option>
<option value="blue-metallic">blue-metallic</option>
<option value="titan">titan</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Plugins</legend>
<label>
<input type="checkbox" name="plugins" value="Abbreviation"> Abbreviation
</label>
<label>
<input type="checkbox" name="plugins" value="BackgroundImage"> BackgroundImage
</label>
<label>
<input type="checkbox" name="plugins" value="CharacterMap" checked="checked" onchange="toggleOnChange(this);"> CharacterMap
</label>
<div id="CharacterMapOptions" class="options">
mode : <select name="CharacterMapMode">
<option value="popup">popup</option>
<option value="panel">panel</option>
</select>
</div>
<label>
<input type="checkbox" name="plugins" value="CharCounter"> CharCounter
</label>
<label>
<input type="checkbox" name="plugins" value="ClientsideSpellcheck" checked="checked"> ClientsideSpellcheck
</label>
<label>
<input type="checkbox" name="plugins" value="ContextMenu" checked="checked"> ContextMenu
</label>
<label>
<input type="checkbox" name="plugins" value="CSS" > CSS
</label>
<label>
<input type="checkbox" name="plugins" value="DoubleClick"> DoubleClick
</label>
<label>
<input type="checkbox" name="plugins" value="DynamicCSS" > DynamicCSS
</label>
<label>
<input type="checkbox" name="plugins" value="EditTag"> EditTag
</label>
<label>
<input type="checkbox" name="plugins" value="EnterParagraphs"> EnterParagraphs
</label>
<label>
<input type="checkbox" name="plugins" value="Equation"> Equation
</label>
<label>
<input type="checkbox" name="plugins" value="FindReplace" checked="checked"> FindReplace
</label>
<label>
<input type="checkbox" name="plugins" value="FormOperations"> FormOperations
</label>
<label>
<input type="checkbox" name="plugins" value="Forms"> Forms
</label>
<label>
<input type="checkbox" name="plugins" value="FullPage" > FullPage
</label>
<label>
<input type="checkbox" name="plugins" value="FullScreen" checked="checked"> FullScreen
</label>
<label>
<input type="checkbox" name="plugins" value="GetHtml" checked="checked"> GetHtml
</label>
<label>
<input type="checkbox" name="plugins" value="HorizontalRule"> HorizontalRule
</label>
<label>
<input type="checkbox" name="plugins" value="InsertAnchor" checked="checked"> InsertAnchor
</label>
<label>
<input type="checkbox" name="plugins" value="InsertMarquee"> InsertMarquee
</label>
<label>
<input type="checkbox" name="plugins" value="InsertPagebreak"> InsertPagebreak
</label>
<label>
<input type="checkbox" name="plugins" value="InsertSmiley"> InsertSmiley
</label>
<label>
<input type="checkbox" name="plugins" value="InsertWords"> InsertWords
</label>
<label>
<input type="checkbox" name="plugins" value="LangMarks"> LangMarks
</label>
<label>
<input type="checkbox" name="plugins" value="ListType" checked="checked" onchange="toggleOnChange(this);"> ListType
</label>
<div id="ListTypeOptions" class="options">
mode : <select name="ListTypeMode">
<option value="toolbar">toolbar</option>
<option value="panel">panel</option>
</select>
</div>
<label>
<input type="checkbox" name="plugins" value="NoteServer"> NoteServer
</label>
<label>
<input type="checkbox" name="plugins" value="PasteText" checked="checked"> PasteText
</label>
<label>
<input type="checkbox" name="plugins" value="QuickTag"> QuickTag
</label>
<label>
<input type="checkbox" name="plugins" value="Stylist" checked="checked"> Stylist
</label>
<label>
<input type="checkbox" name="plugins" value="TableOperations" checked="checked"> TableOperations
</label>
<label>
<input type="checkbox" name="plugins" value="Template"> Template
</label>
<label>
<input type="checkbox" name="plugins" value="UnFormat"> UnFormat
</label>
</fieldset>
<fieldset>
<legend>PHP Plugins</legend>
<p>
<small>These plugins require PHP in order to run.</small>
</p>
<label>
<input type="checkbox" name="plugins" value="HtmlTidy"> HtmlTidy
</label>
<label>
<input type="checkbox" name="plugins" value="ImageManager"> ImageManager
</label>
<label>
<input type="checkbox" name="plugins" value="ExtendedFileManager"> ExtendedFileManager
</label>
<label>
<input type="checkbox" name="plugins" value="InsertPicture"> InsertPicture
</label>
<label>
<input type="checkbox" name="plugins" value="Linker"> Linker
</label>
<label>
<input type="checkbox" name="plugins" value="SpellChecker"> SpellChecker
</label>
<label>
<input type="checkbox" name="plugins" value="SuperClean"> SuperClean
</label>
</fieldset>
</form>
<script type="text/javascript">
top.frames["body"].location.href = document.location.href.replace(/full_example-menu\.html.*/, 'full_example-body.html')
</script>
</body>
</html>
/*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha example CSS file. This is ripped from Trac ;)
--
-- $HeadURL: http://svn.xinha.webfactional.com/trunk/examples/full_example.css $
-- $LastChangedDate: 2007-01-20 11:24:36 +1300 (Sat, 20 Jan 2007) $
-- $LastChangedRevision: 677 $
-- $LastChangedBy: ray $
--------------------------------------------------------------------------*/
body {
background: #fff;
color: #000;
margin: 10px;
}
body, th, td {
font: normal 13px verdana,arial,'Bitstream Vera Sans',helvetica,sans-serif;
}
h1, h2, h3, h4 {
font-family: arial,verdana,'Bitstream Vera Sans',helvetica,sans-serif;
font-weight: bold;
letter-spacing: -0.018em;
}
h1 { font-size: 21px; margin: .15em 1em 0 0 }
h2 { font-size: 16px; margin: 2em 0 .5em; }
h3 { font-size: 14px; margin: 1.5em 0 .5em; }
hr { border: none; border-top: 1px solid #ccb; margin: 2em 0; }
address { font-style: normal }
img { border: none }
:link, :visited {
text-decoration: none;
color: #b00;
border-bottom: 1px dotted #bbb;
}
:link:hover, :visited:hover {
background-color: #eee;
color: #555;
}
h1 :link, h1 :visited ,h2 :link, h2 :visited, h3 :link, h3 :visited,
h4 :link, h4 :visited, h5 :link, h5 :visited, h6 :link, h6 :visited {
color: inherit;
}
.area_holder
{
margin:10px;
}
label {font-size: 11px;}
\ No newline at end of file
<html>
<!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha example frameset.
--
-- $HeadURL: http://svn.xinha.python-hosting.com/trunk/examples/full_example.html $
-- $LastChangedDate: 2005-09-08 01:12:14 +1200 (Thu, 08 Sep 2005) $
-- $LastChangedRevision: 312 $
-- $LastChangedBy: gocher $
--------------------------------------------------------------------------->
<frameset cols="220,*">
<frame src="full_example-menu.html" name="menu">
<frame src="about:blank" name="body">
</frameset>
</html>
/*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha example logic. This javascript is used to auto-generate examples
-- as controlled by the options set in full_example-menu.html. it's called
-- from full_example-body.html.
--
-- $HeadURL: http://svn.xinha.webfactional.com/trunk/examples/full_example.js $
-- $LastChangedDate: 2007-06-14 06:34:34 +1200 (Thu, 14 Jun 2007) $
-- $LastChangedRevision: 856 $
-- $LastChangedBy: wymsy $
--------------------------------------------------------------------------*/
var num = 1;
if(window.parent && window.parent != window)
{
var f = window.parent.menu.document.forms[0];
_editor_lang = f.lang[f.lang.selectedIndex].value;
_editor_skin = f.skin[f.skin.selectedIndex].value;
num = parseInt(f.num.value);
if(isNaN(num))
{
num = 1;
f.num.value = 1;
}
xinha_plugins = [ ];
for(var x = 0; x < f.plugins.length; x++)
{
if(f.plugins[x].checked) xinha_plugins.push(f.plugins[x].value);
}
}
xinha_editors = [ ]
for(var x = 0; x < num; x++)
{
var ta = 'myTextarea' + x;
xinha_editors.push(ta);
}
xinha_config = function()
{
var config = new Xinha.Config();
if(typeof CSS != 'undefined')
{
config.pageStyle = "@import url(custom.css);";
}
if(typeof Stylist != 'undefined')
{
// We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
// otherwise it won't work!
config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
// Or we can load styles directly
config.stylistLoadStyles('p.red_text { color:red }');
// If you want to provide "friendly" names you can do so like
// (you can do this for stylistLoadStylesheet as well)
config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
}
if(typeof DynamicCSS != 'undefined')
{
config.pageStyle = "@import url(dynamic.css);";
}
if(typeof InsertWords != 'undefined')
{
// Register the keyword/replacement list
var keywrds1 = new Object();
var keywrds2 = new Object();
keywrds1['-- Dropdown Label --'] = '';
keywrds1['onekey'] = 'onevalue';
keywrds1['twokey'] = 'twovalue';
keywrds1['threekey'] = 'threevalue';
keywrds2['-- Insert Keyword --'] = '';
keywrds2['Username'] = '%user%';
keywrds2['Last login date'] = '%last_login%';
config.InsertWords = {
combos : [ { options: keywrds1, context: "body" },
{ options: keywrds2, context: "li" } ]
}
}
if (typeof ListType != 'undefined')
{
if(window.parent && window.parent != window)
{
var f = window.parent.menu.document.forms[0];
config.ListType.mode = f.elements['ListTypeMode'].options[f.elements['ListTypeMode'].selectedIndex].value;
}
}
if (typeof CharacterMap != 'undefined')
{
if(window.parent && window.parent != window)
{
var f = window.parent.menu.document.forms[0];
config.CharacterMap.mode = f.elements['CharacterMapMode'].options[f.elements['CharacterMapMode'].selectedIndex].value;
}
}
if(typeof Filter != 'undefined') {
xinha_config.Filters = ["Word", "Paragraph"]
}
return config;
}
var f = document.forms[0];
f.innerHTML = '';
var lipsum = document.getElementById('lipsum').innerHTML;
for(var x = 0; x < num; x++)
{
var ta = 'myTextarea' + x;
var div = document.createElement('div');
div.className = 'area_holder';
var txta = document.createElement('textarea');
txta.id = ta;
txta.name = ta;
txta.value = lipsum;
txta.style.width="100%";
txta.style.height="420px";
div.appendChild(txta);
f.appendChild(div);
}
//check submitted values
var submit = document.createElement('input');
submit.type = "submit";
submit.id = "submit";
submit.value = "submit";
f.appendChild(submit);
var _oldSubmitHandler = null;
if (document.forms[0].onsubmit != null) {
_oldSubmitHandler = document.forms[0].onsubmit;
}
function frame_onSubmit(){
alert(document.getElementById("myTextarea0").value);
if (_oldSubmitHandler != null) {
_oldSubmitHandler();
}
}
document.forms[0].onsubmit = frame_onSubmit;
\ No newline at end of file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple example of Xinha</title>
<script type="text/javascript">
var _editor_url = document.location.href.replace(/examples\/simple_example\.html.*/, '')
var _editor_lang = "en";
</script>
<!-- Load up the actual editor core -->
<script type="text/javascript" src="../XinhaCore.js"></script>
<script type="text/javascript">
var xinha_plugins =
[
'Linker'
];
var xinha_editors =
[
'myTextArea',
'anotherOne'
];
function xinha_init()
{
if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
var xinha_config = new Xinha.Config();
xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
Xinha.startEditors(xinha_editors);
}
Xinha.addOnloadHandler(xinha_init);
</script>
</head>
<body>
<form onsubmit="alert(this.myTextArea.value); return false;">
<textarea id="myTextArea" name="myTextArea" rows="25" cols="80">
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
ante elementum turpis. Aliquam nisl. Nulla posuere neque non
tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
Curabitur pharetra bibendum lectus.&lt;/p&gt;
</textarea>
</form>
</body>
</html>
\ No newline at end of file
/*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Stylist plugin example CSS file. Used by full_example.js
-- when the Stylist plugin is included in an auto-generated example.
--
-- $HeadURL: http://svn.xinha.webfactional.com/trunk/examples/stylist.css $
-- $LastChangedDate: 2007-01-20 11:24:36 +1300 (Sat, 20 Jan 2007) $
-- $LastChangedRevision: 677 $
-- $LastChangedBy: ray $
--------------------------------------------------------------------------*/
.bluetext
{
color:blue;
}
p.blue_paragraph
{
color:darkblue;
}
li.green_list_item
{
color:green;
}
h1.webdings_lvl_1
{
font-family:webdings;
}
img.polaroid { border:1px solid black; background-color:white; padding:10px; padding-bottom:30px; }
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha example usage. This file shows how a developer might make use of
-- Xinha, it forms the primary example file for the entire Xinha project.
-- This file can be copied and used as a template for development by the
-- end developer who should simply removed the area indicated at the bottom
-- of the file to remove the auto-example-generating code and allow for the
-- use of the file as a boilerplate.
--
-- $HeadURL: http://svn.xinha.org/trunk/examples/testbed.html $
-- $LastChangedDate: 2008-10-12 19:42:42 +0200 (So, 12. Okt 2008) $
-- $LastChangedRevision: 1084 $
-- $LastChangedBy: ray $
--------------------------------------------------------------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of Xinha</title>
<link rel="stylesheet" href="files/full_example.css" />
<script type="text/javascript">
// You must set _editor_url to the URL (including trailing slash) where
// where xinha is installed, it's highly recommended to use an absolute URL
// eg: _editor_url = "/path/to/xinha/";
// You may try a relative URL if you wish]
// eg: _editor_url = "../";
// in this example we do a little regular expression to find the absolute path.
_editor_url = document.location.href.replace(/examples\/.*/, '')
_editor_lang = "en"; // And the language we need to use in the editor.
</script>
<!-- Load up the actual editor core -->
<script type="text/javascript" src="../XinhaCore.js"></script>
<script type="text/javascript">
xinha_editors = null;
xinha_init = null;
xinha_config = null;
xinha_plugins = null;
// This contains the names of textareas we will make into Xinha editors
xinha_init = xinha_init ? xinha_init : function()
{
/** STEP 1 ***************************************************************
* First, what are the plugins you will be using in the editors on this
* page. List all the plugins you will need, even if not all the editors
* will use all the plugins.
************************************************************************/
xinha_plugins = xinha_plugins ? xinha_plugins :
[
'CharacterMap', 'SpellChecker', 'Linker'
];
// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING :)
if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
/** STEP 2 ***************************************************************
* Now, what are the names of the textareas you will be turning into
* editors?
************************************************************************/
xinha_editors = xinha_editors ? xinha_editors :
[
'myTextArea'
];
/** STEP 3 ***************************************************************
* We create a default configuration to be used by all the editors.
* If you wish to configure some of the editors differently this will be
* done in step 4.
*
* If you want to modify the default config you might do something like this.
*
* xinha_config = new Xinha.Config();
* xinha_config.width = 640;
* xinha_config.height = 420;
*
*************************************************************************/
xinha_config = xinha_config ? xinha_config : new Xinha.Config();
xinha_config.fullPage = true;
xinha_config.CharacterMap.mode = 'panel';
/*
// We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
// otherwise it won't work!
xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'files/stylist.css'));
// Or we can load styles directly
xinha_config.stylistLoadStyles('p.red_text { color:red }');
// If you want to provide "friendly" names you can do so like
// (you can do this for stylistLoadStylesheet as well)
xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
*/
/** STEP 3 ***************************************************************
* We first create editors for the textareas.
*
* You can do this in two ways, either
*
* xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
*
* if you want all the editor objects to use the same set of plugins, OR;
*
* xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
* xinha_editors['myTextArea'].registerPlugins(['Stylist']);
* xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
*
* if you want to use a different set of plugins for one or more of the
* editors.
************************************************************************/
xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
/** STEP 4 ***************************************************************
* If you want to change the configuration variables of any of the
* editors, this is the place to do that, for example you might want to
* change the width and height of one of the editors, like this...
*
* xinha_editors.myTextArea.config.width = 640;
* xinha_editors.myTextArea.config.height = 480;
*
************************************************************************/
/** STEP 5 ***************************************************************
* Finally we "start" the editors, this turns the textareas into
* Xinha editors.
************************************************************************/
Xinha.startEditors(xinha_editors);
window.onload = null;
}
window.onload = xinha_init;
</script>
</head>
<body>
<form action="javascript:void(0);" id="editors_here" onsubmit="alert(this.myTextArea.value);">
<div>
<textarea id="myTextArea" name="myTextArea" style="width:100%;height:320px;">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello&lt;/title&gt;
&lt;style type="text/css"&gt;
li { color:red; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;&lt;span style="color:purple"&gt;
&lt;img src="../images/xinha_logo.gif" usemap="#m1"&gt;
&lt;map name="m1"&gt;
&lt;area shape="rect" coords="137,101,255,124" href="http://www.mydomain.com"&gt;
&lt;/map&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
ante elementum turpis. &lt;span style="color:green"&gt;Aliquam &lt;/span&gt; nisl. Nulla posuere neque non
tellus. Morbi vel nibh. &lt;font face="Arial"&gt;&lt;font color="#009933"&gt;Cum sociis natoque&lt;/font&gt;&lt;/font&gt; penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
Curabitur pharetra bibendum lectus.
&lt;/p&gt;
&lt;ul&gt;
&lt;li style="color:green"&gt; Phasellus et massa sed diam viverra semper. &lt;/li&gt;
&lt;li&gt; Mauris tincidunt felis in odio. &lt;/li&gt;
&lt;li&gt; Nulla placerat nunc ut pede. &lt;/li&gt;
&lt;li&gt; Vivamus ultrices mi sit amet urna. &lt;/li&gt;
&lt;li&gt; Quisque sed augue quis nunc laoreet volutpat.&lt;/li&gt;
&lt;li&gt; Nunc sit amet metus in tortor semper mattis. &lt;/li&gt;
&lt;/ul&gt;
&lt;/span&gt;&lt;/body&gt;
&lt;/html&gt;
</textarea>
<input type="submit" /> <input type="reset" />
</div>
</form>
<script type="text/javascript">
document.write(document.compatMode);
</script>
<div>
<a href="#" onclick="xinha_editors.myTextArea.hidePanels();">Hide</a>
<a href="#" onclick="xinha_editors.myTextArea.showPanels();">Show</a>
</div>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment