mbirth/LuckyCoinkydink
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

(Experimental) Replace htmlarea with XINHA. Thanks to abdussamad!

Browse Source
This commit is contained in:
Garvin Hicking
2008-09-09 07:52:18 +00:00
parent 862abd0a90
commit 94fd5e4e8c
903 changed files with 50035 additions and 10204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
htmlarea/examples/testbed.html Executable file
View File

@@ -0,0 +1,195 @@
<?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.webfactional.com/trunk/examples/testbed.html $
-- $LastChangedDate:2008-04-12 14:39:04 +0200 (Sa, 12 Apr 2008) $
-- $LastChangedRevision:987 $
-- $LastChangedBy:ray $
--------------------------------------------------------------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of Xinha</title>
<link rel="stylesheet" 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\/.*/, '')
_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/, '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>