Import xinha so we can switch from htmlarea and fix a bunch of in-browser issues that htmlarea has
This commit is contained in:
185
xinha/examples/full_example-body.html
Normal file
185
xinha/examples/full_example-body.html
Normal file
@@ -0,0 +1,185 @@
|
||||
<!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: 2005-07-28 02:43:19 +1200 (Thu, 28 Jul 2005) $
|
||||
-- $LastChangedRevision: 287 $
|
||||
-- $LastChangedBy: gocher $
|
||||
--------------------------------------------------------------------------->
|
||||
|
||||
<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\/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 src="full_example.js"></script>
|
||||
|
||||
<!-- ********************************************************************* -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user