HTML code for sharing source code

HTML Copy To Clipboarddone!

<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><div id="lc1">xinha_editors <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">null</span>;
</div><div id="lc2">xinha_init    <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">null</span>;
</div><div id="lc3">xinha_config  <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">null</span>;
</div><div id="lc4">xinha_plugins <span style="color: #666666">=</span> <span style="color: #008000; font-weight: bold">null</span>;
</div><div id="lc5">
</div><div id="lc6"><span style="color: #408080; font-style: italic">// This contains the names of textareas we will make into Xinha editors</span>
</div><div id="lc7">xinha_init <span style="color: #666666">=</span> xinha_init <span style="color: #666666">?</span> xinha_init <span style="color: #666666">:</span> <span style="color: #008000; font-weight: bold">function</span>()
</div><div id="lc8">{
</div><div id="lc9">   <span style="color: #408080; font-style: italic">/** STEP 1 ***************************************************************</span>
</div><div id="lc10"><span style="color: #408080; font-style: italic">   * First, specify the textareas that shall be turned into Xinhas. </span>
</div><div id="lc11"><span style="color: #408080; font-style: italic">   * For each one add the respective id to the xinha_editors array.</span>
</div><div id="lc12"><span style="color: #408080; font-style: italic">   * I you want add more than on textarea, keep in mind that these </span>
</div><div id="lc13"><span style="color: #408080; font-style: italic">   * values are comma seperated BUT there is no comma after the last value.</span>
</div><div id="lc14"><span style="color: #408080; font-style: italic">   * If you are going to use this configuration on several pages with different</span>
</div><div id="lc15"><span style="color: #408080; font-style: italic">   * textarea ids, you can add them all. The ones that are not found on the</span>
</div><div id="lc16"><span style="color: #408080; font-style: italic">   * current page will just be skipped.</span>
</div><div id="lc17"><span style="color: #408080; font-style: italic">   ************************************************************************/</span>
</div><div id="lc18">  
</div><div id="lc19">  xinha_editors <span style="color: #666666">=</span> xinha_editors <span style="color: #666666">?</span> xinha_editors <span style="color: #666666">:</span> [];
</div><div id="lc20">  
</div><div id="lc21">  <span style="color: #408080; font-style: italic">/** STEP 2 ***************************************************************</span>
</div><div id="lc22"><span style="color: #408080; font-style: italic">   * Now, what are the plugins you will be using in the editors on this</span>
</div><div id="lc23"><span style="color: #408080; font-style: italic">   * page.  List all the plugins you will need, even if not all the editors</span>
</div><div id="lc24"><span style="color: #408080; font-style: italic">   * will use all the plugins.</span>
</div><div id="lc25"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc26"><span style="color: #408080; font-style: italic">   * The list of plugins below is a good starting point, but if you prefer</span>
</div><div id="lc27"><span style="color: #408080; font-style: italic">   * a simpler editor to start with then you can use the following </span>
</div><div id="lc28"><span style="color: #408080; font-style: italic">   * </span>
</div><div id="lc29"><span style="color: #408080; font-style: italic">   * xinha_plugins = xinha_plugins ? xinha_plugins : [ ];</span>
</div><div id="lc30"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc31"><span style="color: #408080; font-style: italic">   * which will load no extra plugins at all.</span>
</div><div id="lc32"><span style="color: #408080; font-style: italic">   ************************************************************************/</span>
</div><div id="lc33">
</div><div id="lc34">  xinha_plugins <span style="color: #666666">=</span> xinha_plugins <span style="color: #666666">?</span> xinha_plugins <span style="color: #666666">:</span>
</div><div id="lc35">  [
</div><div id="lc36">   <span style="color: #408080; font-style: italic">//&#39;CharacterMap&#39;,</span>
</div><div id="lc37">   <span style="color: #408080; font-style: italic">//&#39;ContextMenu&#39;,</span>
</div><div id="lc38">   <span style="color: #BA2121">&#39;ListType&#39;</span>,
</div><div id="lc39">   <span style="color: #408080; font-style: italic">//&#39;Stylist&#39;,</span>
</div><div id="lc40">   <span style="color: #408080; font-style: italic">//&#39;Linker&#39;,</span>
</div><div id="lc41">   <span style="color: #408080; font-style: italic">//&#39;SuperClean&#39;,</span>
</div><div id="lc42">   <span style="color: #408080; font-style: italic">//&#39;TableOperations&#39;</span>
</div><div id="lc43">  ];
</div><div id="lc44">  
</div><div id="lc45">         <span style="color: #408080; font-style: italic">// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)</span>
</div><div id="lc46">         <span style="color: #008000; font-weight: bold">if</span>(<span style="color: #666666">!</span>Xinha.loadPlugins(xinha_plugins, xinha_init)) <span style="color: #008000; font-weight: bold">return</span>;
</div><div id="lc47">
</div><div id="lc48">
</div><div id="lc49">  <span style="color: #408080; font-style: italic">/** STEP 3 ***************************************************************</span>
</div><div id="lc50"><span style="color: #408080; font-style: italic">   * We create a default configuration to be used by all the editors.</span>
</div><div id="lc51"><span style="color: #408080; font-style: italic">   * If you wish to configure some of the editors differently this will be</span>
</div><div id="lc52"><span style="color: #408080; font-style: italic">   * done in step 5.</span>
</div><div id="lc53"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc54"><span style="color: #408080; font-style: italic">   * If you want to modify the default config you might do something like this.</span>
</div><div id="lc55"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc56"><span style="color: #408080; font-style: italic">   *   xinha_config = new Xinha.Config();</span>
</div><div id="lc57"><span style="color: #408080; font-style: italic">   *   xinha_config.width  = &#39;640px&#39;;</span>
</div><div id="lc58"><span style="color: #408080; font-style: italic">   *   xinha_config.height = &#39;420px&#39;;</span>
</div><div id="lc59"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc60"><span style="color: #408080; font-style: italic">   *************************************************************************/</span>
</div><div id="lc61">
</div><div id="lc62">   xinha_config <span style="color: #666666">=</span> xinha_config <span style="color: #666666">?</span> xinha_config() <span style="color: #666666">:</span> <span style="color: #008000; font-weight: bold">new</span> Xinha.Config();
</div><div id="lc63">   xinha_config.width <span style="color: #666666">=</span> <span style="color: #BA2121">&#39;950px&#39;</span>;
</div><div id="lc64">   xinha_config.height <span style="color: #666666">=</span> <span style="color: #BA2121">&#39;400px&#39;</span>;
</div><div id="lc65">   xinha_config.toolbar <span style="color: #666666">=</span> [
</div><div id="lc66">       [<span style="color: #BA2121">&quot;popupeditor&quot;</span>],
</div><div id="lc67">       [<span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;forecolor&quot;</span>,<span style="color: #BA2121">&quot;hilitecolor&quot;</span>,<span style="color: #BA2121">&quot;textindicator&quot;</span>],
</div><div id="lc68">       [<span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;subscript&quot;</span>,<span style="color: #BA2121">&quot;superscript&quot;</span>],
</div><div id="lc69">       [<span style="color: #BA2121">&quot;linebreak&quot;</span>,<span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;justifyleft&quot;</span>,<span style="color: #BA2121">&quot;justifycenter&quot;</span>,<span style="color: #BA2121">&quot;justifyright&quot;</span>,<span style="color: #BA2121">&quot;justifyfull&quot;</span>],
</div><div id="lc70">       [<span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;inserthorizontalrule&quot;</span>,<span style="color: #BA2121">&quot;createlink&quot;</span>,<span style="color: #BA2121">&quot;insertimage&quot;</span>,<span style="color: #BA2121">&quot;inserttable&quot;</span>],
</div><div id="lc71">       [<span style="color: #BA2121">&quot;linebreak&quot;</span>,<span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;undo&quot;</span>,<span style="color: #BA2121">&quot;redo&quot;</span>,<span style="color: #BA2121">&quot;selectall&quot;</span>,<span style="color: #BA2121">&quot;print&quot;</span>], (Xinha.is_gecko <span style="color: #666666">?</span> [] <span style="color: #666666">:</span> [<span style="color: #BA2121">&quot;cut&quot;</span>,<span style="color: #BA2121">&quot;copy&quot;</span>,<span style="color: #BA2121">&quot;paste&quot;</span>,<span style="color: #BA2121">&quot;overwrite&quot;</span>,<span style="color: #BA2121">&quot;saveas&quot;</span>]),
</div><div id="lc72">       [<span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;killword&quot;</span>,<span style="color: #BA2121">&quot;clearfonts&quot;</span>,<span style="color: #BA2121">&quot;removeformat&quot;</span>,<span style="color: #BA2121">&quot;toggleborders&quot;</span>,<span style="color: #BA2121">&quot;splitblock&quot;</span>,<span style="color: #BA2121">&quot;lefttoright&quot;</span>, <span style="color: #BA2121">&quot;righttoleft&quot;</span>],
</div><div id="lc73">       [<span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;htmlmode&quot;</span>,<span style="color: #BA2121">&quot;showhelp&quot;</span>,<span style="color: #BA2121">&quot;about&quot;</span>],
</div><div id="lc74">       [<span style="color: #BA2121">&quot;linebreak&quot;</span>, <span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;formatblock&quot;</span>,<span style="color: #BA2121">&quot;fontname&quot;</span>,<span style="color: #BA2121">&quot;fontsize&quot;</span>,<span style="color: #BA2121">&quot;bold&quot;</span>,<span style="color: #BA2121">&quot;italic&quot;</span>,<span style="color: #BA2121">&quot;underline&quot;</span>,<span style="color: #BA2121">&quot;strikethrough&quot;</span>],
</div><div id="lc75">       [<span style="color: #BA2121">&quot;separator&quot;</span>,<span style="color: #BA2121">&quot;insertorderedlist&quot;</span>,<span style="color: #BA2121">&quot;insertunorderedlist&quot;</span>,<span style="color: #BA2121">&quot;outdent&quot;</span>,<span style="color: #BA2121">&quot;indent&quot;</span>]
</div><div id="lc76">    ];
</div><div id="lc77"> 
</div><div id="lc78">        
</div><div id="lc79">   <span style="color: #408080; font-style: italic">// To adjust the styling inside the editor, we can load an external stylesheet like this</span>
</div><div id="lc80">   <span style="color: #408080; font-style: italic">// NOTE : YOU MUST GIVE AN ABSOLUTE URL</span>
</div><div id="lc81">  
</div><div id="lc82">   xinha_config.pageStyleSheets <span style="color: #666666">=</span> [ _editor_url <span style="color: #666666">+</span> <span style="color: #BA2121">&quot;examples/full_example.css&quot;</span> ];
</div><div id="lc83">
</div><div id="lc84">  <span style="color: #408080; font-style: italic">/** STEP 4 ***************************************************************</span>
</div><div id="lc85"><span style="color: #408080; font-style: italic">   * We first create editors for the textareas.</span>
</div><div id="lc86"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc87"><span style="color: #408080; font-style: italic">   * You can do this in two ways, either</span>
</div><div id="lc88"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc89"><span style="color: #408080; font-style: italic">   *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);</span>
</div><div id="lc90"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc91"><span style="color: #408080; font-style: italic">   * if you want all the editor objects to use the same set of plugins, OR;</span>
</div><div id="lc92"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc93"><span style="color: #408080; font-style: italic">   *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);</span>
</div><div id="lc94"><span style="color: #408080; font-style: italic">   *   xinha_editors.myTextArea.registerPlugins([&#39;Stylist&#39;]);</span>
</div><div id="lc95"><span style="color: #408080; font-style: italic">   *   xinha_editors.anotherOne.registerPlugins([&#39;CSS&#39;,&#39;SuperClean&#39;]);</span>
</div><div id="lc96"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc97"><span style="color: #408080; font-style: italic">   * if you want to use a different set of plugins for one or more of the</span>
</div><div id="lc98"><span style="color: #408080; font-style: italic">   * editors.</span>
</div><div id="lc99"><span style="color: #408080; font-style: italic">   ************************************************************************/</span>
</div><div id="lc100">
</div><div id="lc101">  xinha_editors   <span style="color: #666666">=</span> Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
</div><div id="lc102">
</div><div id="lc103">  <span style="color: #408080; font-style: italic">/** STEP 5 ***************************************************************</span>
</div><div id="lc104"><span style="color: #408080; font-style: italic">   * If you want to change the configuration variables of any of the</span>
</div><div id="lc105"><span style="color: #408080; font-style: italic">   * editors,  this is the place to do that, for example you might want to</span>
</div><div id="lc106"><span style="color: #408080; font-style: italic">   * change the width and height of one of the editors, like this...</span>
</div><div id="lc107"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc108"><span style="color: #408080; font-style: italic">   *   xinha_editors.myTextArea.config.width  = &#39;640px&#39;;</span>
</div><div id="lc109"><span style="color: #408080; font-style: italic">   *   xinha_editors.myTextArea.config.height = &#39;480px&#39;;</span>
</div><div id="lc110"><span style="color: #408080; font-style: italic">   *</span>
</div><div id="lc111"><span style="color: #408080; font-style: italic">   ************************************************************************/</span>
</div><div id="lc112">
</div><div id="lc113">
</div><div id="lc114">  <span style="color: #408080; font-style: italic">/** STEP 6 ***************************************************************</span>
</div><div id="lc115"><span style="color: #408080; font-style: italic">   * Finally we &quot;start&quot; the editors, this turns the textareas into</span>
</div><div id="lc116"><span style="color: #408080; font-style: italic">   * Xinha editors.</span>
</div><div id="lc117"><span style="color: #408080; font-style: italic">   ************************************************************************/</span>
</div><div id="lc118">
</div><div id="lc119">  Xinha.startEditors(xinha_editors);
</div><div id="lc120">}
</div><div id="lc121">
</div><div id="lc122">Xinha._addEvent(<span style="color: #008000">window</span>,<span style="color: #BA2121">&#39;load&#39;</span>, xinha_init); <span style="color: #408080; font-style: italic">// this executes the xinha_init function on page load </span>
</div><div id="lc123">                                            <span style="color: #408080; font-style: italic">// and does not interfere with window.onload properties set by other scripts</span>
</div></pre></div>
<p style="padding: 0; margin: 2em 0 1em 0; font-size: 0.8em; color: #666;"><span style="padding: 0 1em; background-color: #f5f5f5;"> Colored with <a style="color: #333" href="http://dumpz.org">dumpz.org</a></span></p>

BBCODE Copy To Clipboarddone!

xinha_editors [color=#666666]=[/color] [color=#008000][b]null[/b][/color];
xinha_init    [color=#666666]=[/color] [color=#008000][b]null[/b][/color];
xinha_config  [color=#666666]=[/color] [color=#008000][b]null[/b][/color];
xinha_plugins [color=#666666]=[/color] [color=#008000][b]null[/b][/color];

[color=#408080][i]// This contains the names of textareas we will make into Xinha editors
[/i][/color]xinha_init [color=#666666]=[/color] xinha_init [color=#666666]?[/color] xinha_init [color=#666666]:[/color] [color=#008000][b]function[/b][/color]()
{
   [color=#408080][i]/** STEP 1 ***************************************************************
   * First, specify the textareas that shall be turned into Xinhas. 
   * For each one add the respective id to the xinha_editors array.
   * I you want add more than on textarea, keep in mind that these 
   * values are comma seperated BUT there is no comma after the last value.
   * If you are going to use this configuration on several pages with different
   * textarea ids, you can add them all. The ones that are not found on the
   * current page will just be skipped.
   ************************************************************************/[/i][/color]
  
  xinha_editors [color=#666666]=[/color] xinha_editors [color=#666666]?[/color] xinha_editors [color=#666666]:[/color] [];
  
  [color=#408080][i]/** STEP 2 ***************************************************************
   * Now, 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.
   *
   * The list of plugins below is a good starting point, but if you prefer
   * a simpler editor to start with then you can use the following 
   * 
   * xinha_plugins = xinha_plugins ? xinha_plugins : [ ];
   *
   * which will load no extra plugins at all.
   ************************************************************************/[/i][/color]

xinha_plugins [color=#666666]=[/color] xinha_plugins [color=#666666]?[/color] xinha_plugins [color=#666666]:[/color]
  [
   [color=#408080][i]//'CharacterMap',
[/i][/color]   [color=#408080][i]//'ContextMenu',
[/i][/color]   [color=#BA2121]'ListType'[/color],
   [color=#408080][i]//'Stylist',
[/i][/color]   [color=#408080][i]//'Linker',
[/i][/color]   [color=#408080][i]//'SuperClean',
[/i][/color]   [color=#408080][i]//'TableOperations'
[/i][/color]  ];
  
         [color=#408080][i]// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
[/i][/color]         [color=#008000][b]if[/b][/color]([color=#666666]![/color]Xinha.loadPlugins(xinha_plugins, xinha_init)) [color=#008000][b]return[/b][/color];

[color=#408080][i]/** 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 Xinha.Config();
   *   xinha_config.width  = '640px';
   *   xinha_config.height = '420px';
   *
   *************************************************************************/[/i][/color]

xinha_config [color=#666666]=[/color] xinha_config [color=#666666]?[/color] xinha_config() [color=#666666]:[/color] [color=#008000][b]new[/b][/color] Xinha.Config();
   xinha_config.width [color=#666666]=[/color] [color=#BA2121]'950px'[/color];
   xinha_config.height [color=#666666]=[/color] [color=#BA2121]'400px'[/color];
   xinha_config.toolbar [color=#666666]=[/color] [
       [[color=#BA2121]"popupeditor"[/color]],
       [[color=#BA2121]"separator"[/color],[color=#BA2121]"forecolor"[/color],[color=#BA2121]"hilitecolor"[/color],[color=#BA2121]"textindicator"[/color]],
       [[color=#BA2121]"separator"[/color],[color=#BA2121]"subscript"[/color],[color=#BA2121]"superscript"[/color]],
       [[color=#BA2121]"linebreak"[/color],[color=#BA2121]"separator"[/color],[color=#BA2121]"justifyleft"[/color],[color=#BA2121]"justifycenter"[/color],[color=#BA2121]"justifyright"[/color],[color=#BA2121]"justifyfull"[/color]],
       [[color=#BA2121]"separator"[/color],[color=#BA2121]"inserthorizontalrule"[/color],[color=#BA2121]"createlink"[/color],[color=#BA2121]"insertimage"[/color],[color=#BA2121]"inserttable"[/color]],
       [[color=#BA2121]"linebreak"[/color],[color=#BA2121]"separator"[/color],[color=#BA2121]"undo"[/color],[color=#BA2121]"redo"[/color],[color=#BA2121]"selectall"[/color],[color=#BA2121]"print"[/color]], (Xinha.is_gecko [color=#666666]?[/color] [] [color=#666666]:[/color] [[color=#BA2121]"cut"[/color],[color=#BA2121]"copy"[/color],[color=#BA2121]"paste"[/color],[color=#BA2121]"overwrite"[/color],[color=#BA2121]"saveas"[/color]]),
       [[color=#BA2121]"separator"[/color],[color=#BA2121]"killword"[/color],[color=#BA2121]"clearfonts"[/color],[color=#BA2121]"removeformat"[/color],[color=#BA2121]"toggleborders"[/color],[color=#BA2121]"splitblock"[/color],[color=#BA2121]"lefttoright"[/color], [color=#BA2121]"righttoleft"[/color]],
       [[color=#BA2121]"separator"[/color],[color=#BA2121]"htmlmode"[/color],[color=#BA2121]"showhelp"[/color],[color=#BA2121]"about"[/color]],
       [[color=#BA2121]"linebreak"[/color], [color=#BA2121]"separator"[/color],[color=#BA2121]"formatblock"[/color],[color=#BA2121]"fontname"[/color],[color=#BA2121]"fontsize"[/color],[color=#BA2121]"bold"[/color],[color=#BA2121]"italic"[/color],[color=#BA2121]"underline"[/color],[color=#BA2121]"strikethrough"[/color]],
       [[color=#BA2121]"separator"[/color],[color=#BA2121]"insertorderedlist"[/color],[color=#BA2121]"insertunorderedlist"[/color],[color=#BA2121]"outdent"[/color],[color=#BA2121]"indent"[/color]]
    ];
 
        
   [color=#408080][i]// To adjust the styling inside the editor, we can load an external stylesheet like this
[/i][/color]   [color=#408080][i]// NOTE : YOU MUST GIVE AN ABSOLUTE URL
[/i][/color]  
   xinha_config.pageStyleSheets [color=#666666]=[/color] [ _editor_url [color=#666666]+[/color] [color=#BA2121]"examples/full_example.css"[/color] ];

[color=#408080][i]/** STEP 4 ***************************************************************
   * 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.
   ************************************************************************/[/i][/color]

xinha_editors   [color=#666666]=[/color] Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);

[color=#408080][i]/** 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';
   *
   ************************************************************************/[/i][/color]

[color=#408080][i]/** STEP 6 ***************************************************************
   * Finally we "start" the editors, this turns the textareas into
   * Xinha editors.
   ************************************************************************/[/i][/color]

Xinha.startEditors(xinha_editors);
}

Xinha._addEvent([color=#008000]window[/color],[color=#BA2121]'load'[/color], xinha_init); [color=#408080][i]// this executes the xinha_init function on page load 
[/i][/color]                                            [color=#408080][i]// and does not interfere with window.onload properties set by other scripts
[/i][/color]

--------------------------------------
Colored with http://dumpz.org

Light HTML Copy To Clipboarddone!

That method generates HTML with CSS classes. Hence you'll need the style sheet file

<div class="highlight"><pre><div id="lc1"><span class="nx">xinha_editors</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
</div><div id="lc2"><span class="nx">xinha_init</span>    <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
</div><div id="lc3"><span class="nx">xinha_config</span>  <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
</div><div id="lc4"><span class="nx">xinha_plugins</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
</div><div id="lc5">
</div><div id="lc6"><span class="c1">// This contains the names of textareas we will make into Xinha editors</span>
</div><div id="lc7"><span class="nx">xinha_init</span> <span class="o">=</span> <span class="nx">xinha_init</span> <span class="o">?</span> <span class="nx">xinha_init</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span>
</div><div id="lc8"><span class="p">{</span>
</div><div id="lc9">   <span class="cm">/** STEP 1 ***************************************************************</span>
</div><div id="lc10"><span class="cm">   * First, specify the textareas that shall be turned into Xinhas. </span>
</div><div id="lc11"><span class="cm">   * For each one add the respective id to the xinha_editors array.</span>
</div><div id="lc12"><span class="cm">   * I you want add more than on textarea, keep in mind that these </span>
</div><div id="lc13"><span class="cm">   * values are comma seperated BUT there is no comma after the last value.</span>
</div><div id="lc14"><span class="cm">   * If you are going to use this configuration on several pages with different</span>
</div><div id="lc15"><span class="cm">   * textarea ids, you can add them all. The ones that are not found on the</span>
</div><div id="lc16"><span class="cm">   * current page will just be skipped.</span>
</div><div id="lc17"><span class="cm">   ************************************************************************/</span>
</div><div id="lc18">  
</div><div id="lc19">  <span class="nx">xinha_editors</span> <span class="o">=</span> <span class="nx">xinha_editors</span> <span class="o">?</span> <span class="nx">xinha_editors</span> <span class="o">:</span> <span class="p">[];</span>
</div><div id="lc20">  
</div><div id="lc21">  <span class="cm">/** STEP 2 ***************************************************************</span>
</div><div id="lc22"><span class="cm">   * Now, what are the plugins you will be using in the editors on this</span>
</div><div id="lc23"><span class="cm">   * page.  List all the plugins you will need, even if not all the editors</span>
</div><div id="lc24"><span class="cm">   * will use all the plugins.</span>
</div><div id="lc25"><span class="cm">   *</span>
</div><div id="lc26"><span class="cm">   * The list of plugins below is a good starting point, but if you prefer</span>
</div><div id="lc27"><span class="cm">   * a simpler editor to start with then you can use the following </span>
</div><div id="lc28"><span class="cm">   * </span>
</div><div id="lc29"><span class="cm">   * xinha_plugins = xinha_plugins ? xinha_plugins : [ ];</span>
</div><div id="lc30"><span class="cm">   *</span>
</div><div id="lc31"><span class="cm">   * which will load no extra plugins at all.</span>
</div><div id="lc32"><span class="cm">   ************************************************************************/</span>
</div><div id="lc33">
</div><div id="lc34">  <span class="nx">xinha_plugins</span> <span class="o">=</span> <span class="nx">xinha_plugins</span> <span class="o">?</span> <span class="nx">xinha_plugins</span> <span class="o">:</span>
</div><div id="lc35">  <span class="p">[</span>
</div><div id="lc36">   <span class="c1">//&#39;CharacterMap&#39;,</span>
</div><div id="lc37">   <span class="c1">//&#39;ContextMenu&#39;,</span>
</div><div id="lc38">   <span class="s1">&#39;ListType&#39;</span><span class="p">,</span>
</div><div id="lc39">   <span class="c1">//&#39;Stylist&#39;,</span>
</div><div id="lc40">   <span class="c1">//&#39;Linker&#39;,</span>
</div><div id="lc41">   <span class="c1">//&#39;SuperClean&#39;,</span>
</div><div id="lc42">   <span class="c1">//&#39;TableOperations&#39;</span>
</div><div id="lc43">  <span class="p">];</span>
</div><div id="lc44">  
</div><div id="lc45">         <span class="c1">// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)</span>
</div><div id="lc46">         <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">Xinha</span><span class="p">.</span><span class="nx">loadPlugins</span><span class="p">(</span><span class="nx">xinha_plugins</span><span class="p">,</span> <span class="nx">xinha_init</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
</div><div id="lc47">
</div><div id="lc48">
</div><div id="lc49">  <span class="cm">/** STEP 3 ***************************************************************</span>
</div><div id="lc50"><span class="cm">   * We create a default configuration to be used by all the editors.</span>
</div><div id="lc51"><span class="cm">   * If you wish to configure some of the editors differently this will be</span>
</div><div id="lc52"><span class="cm">   * done in step 5.</span>
</div><div id="lc53"><span class="cm">   *</span>
</div><div id="lc54"><span class="cm">   * If you want to modify the default config you might do something like this.</span>
</div><div id="lc55"><span class="cm">   *</span>
</div><div id="lc56"><span class="cm">   *   xinha_config = new Xinha.Config();</span>
</div><div id="lc57"><span class="cm">   *   xinha_config.width  = &#39;640px&#39;;</span>
</div><div id="lc58"><span class="cm">   *   xinha_config.height = &#39;420px&#39;;</span>
</div><div id="lc59"><span class="cm">   *</span>
</div><div id="lc60"><span class="cm">   *************************************************************************/</span>
</div><div id="lc61">
</div><div id="lc62">   <span class="nx">xinha_config</span> <span class="o">=</span> <span class="nx">xinha_config</span> <span class="o">?</span> <span class="nx">xinha_config</span><span class="p">()</span> <span class="o">:</span> <span class="k">new</span> <span class="nx">Xinha</span><span class="p">.</span><span class="nx">Config</span><span class="p">();</span>
</div><div id="lc63">   <span class="nx">xinha_config</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">&#39;950px&#39;</span><span class="p">;</span>
</div><div id="lc64">   <span class="nx">xinha_config</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">&#39;400px&#39;</span><span class="p">;</span>
</div><div id="lc65">   <span class="nx">xinha_config</span><span class="p">.</span><span class="nx">toolbar</span> <span class="o">=</span> <span class="p">[</span>
</div><div id="lc66">       <span class="p">[</span><span class="s2">&quot;popupeditor&quot;</span><span class="p">],</span>
</div><div id="lc67">       <span class="p">[</span><span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;forecolor&quot;</span><span class="p">,</span><span class="s2">&quot;hilitecolor&quot;</span><span class="p">,</span><span class="s2">&quot;textindicator&quot;</span><span class="p">],</span>
</div><div id="lc68">       <span class="p">[</span><span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;subscript&quot;</span><span class="p">,</span><span class="s2">&quot;superscript&quot;</span><span class="p">],</span>
</div><div id="lc69">       <span class="p">[</span><span class="s2">&quot;linebreak&quot;</span><span class="p">,</span><span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;justifyleft&quot;</span><span class="p">,</span><span class="s2">&quot;justifycenter&quot;</span><span class="p">,</span><span class="s2">&quot;justifyright&quot;</span><span class="p">,</span><span class="s2">&quot;justifyfull&quot;</span><span class="p">],</span>
</div><div id="lc70">       <span class="p">[</span><span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;inserthorizontalrule&quot;</span><span class="p">,</span><span class="s2">&quot;createlink&quot;</span><span class="p">,</span><span class="s2">&quot;insertimage&quot;</span><span class="p">,</span><span class="s2">&quot;inserttable&quot;</span><span class="p">],</span>
</div><div id="lc71">       <span class="p">[</span><span class="s2">&quot;linebreak&quot;</span><span class="p">,</span><span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;undo&quot;</span><span class="p">,</span><span class="s2">&quot;redo&quot;</span><span class="p">,</span><span class="s2">&quot;selectall&quot;</span><span class="p">,</span><span class="s2">&quot;print&quot;</span><span class="p">],</span> <span class="p">(</span><span class="nx">Xinha</span><span class="p">.</span><span class="nx">is_gecko</span> <span class="o">?</span> <span class="p">[]</span> <span class="o">:</span> <span class="p">[</span><span class="s2">&quot;cut&quot;</span><span class="p">,</span><span class="s2">&quot;copy&quot;</span><span class="p">,</span><span class="s2">&quot;paste&quot;</span><span class="p">,</span><span class="s2">&quot;overwrite&quot;</span><span class="p">,</span><span class="s2">&quot;saveas&quot;</span><span class="p">]),</span>
</div><div id="lc72">       <span class="p">[</span><span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;killword&quot;</span><span class="p">,</span><span class="s2">&quot;clearfonts&quot;</span><span class="p">,</span><span class="s2">&quot;removeformat&quot;</span><span class="p">,</span><span class="s2">&quot;toggleborders&quot;</span><span class="p">,</span><span class="s2">&quot;splitblock&quot;</span><span class="p">,</span><span class="s2">&quot;lefttoright&quot;</span><span class="p">,</span> <span class="s2">&quot;righttoleft&quot;</span><span class="p">],</span>
</div><div id="lc73">       <span class="p">[</span><span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;htmlmode&quot;</span><span class="p">,</span><span class="s2">&quot;showhelp&quot;</span><span class="p">,</span><span class="s2">&quot;about&quot;</span><span class="p">],</span>
</div><div id="lc74">       <span class="p">[</span><span class="s2">&quot;linebreak&quot;</span><span class="p">,</span> <span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;formatblock&quot;</span><span class="p">,</span><span class="s2">&quot;fontname&quot;</span><span class="p">,</span><span class="s2">&quot;fontsize&quot;</span><span class="p">,</span><span class="s2">&quot;bold&quot;</span><span class="p">,</span><span class="s2">&quot;italic&quot;</span><span class="p">,</span><span class="s2">&quot;underline&quot;</span><span class="p">,</span><span class="s2">&quot;strikethrough&quot;</span><span class="p">],</span>
</div><div id="lc75">       <span class="p">[</span><span class="s2">&quot;separator&quot;</span><span class="p">,</span><span class="s2">&quot;insertorderedlist&quot;</span><span class="p">,</span><span class="s2">&quot;insertunorderedlist&quot;</span><span class="p">,</span><span class="s2">&quot;outdent&quot;</span><span class="p">,</span><span class="s2">&quot;indent&quot;</span><span class="p">]</span>
</div><div id="lc76">    <span class="p">];</span>
</div><div id="lc77"> 
</div><div id="lc78">        
</div><div id="lc79">   <span class="c1">// To adjust the styling inside the editor, we can load an external stylesheet like this</span>
</div><div id="lc80">   <span class="c1">// NOTE : YOU MUST GIVE AN ABSOLUTE URL</span>
</div><div id="lc81">  
</div><div id="lc82">   <span class="nx">xinha_config</span><span class="p">.</span><span class="nx">pageStyleSheets</span> <span class="o">=</span> <span class="p">[</span> <span class="nx">_editor_url</span> <span class="o">+</span> <span class="s2">&quot;examples/full_example.css&quot;</span> <span class="p">];</span>
</div><div id="lc83">
</div><div id="lc84">  <span class="cm">/** STEP 4 ***************************************************************</span>
</div><div id="lc85"><span class="cm">   * We first create editors for the textareas.</span>
</div><div id="lc86"><span class="cm">   *</span>
</div><div id="lc87"><span class="cm">   * You can do this in two ways, either</span>
</div><div id="lc88"><span class="cm">   *</span>
</div><div id="lc89"><span class="cm">   *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);</span>
</div><div id="lc90"><span class="cm">   *</span>
</div><div id="lc91"><span class="cm">   * if you want all the editor objects to use the same set of plugins, OR;</span>
</div><div id="lc92"><span class="cm">   *</span>
</div><div id="lc93"><span class="cm">   *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);</span>
</div><div id="lc94"><span class="cm">   *   xinha_editors.myTextArea.registerPlugins([&#39;Stylist&#39;]);</span>
</div><div id="lc95"><span class="cm">   *   xinha_editors.anotherOne.registerPlugins([&#39;CSS&#39;,&#39;SuperClean&#39;]);</span>
</div><div id="lc96"><span class="cm">   *</span>
</div><div id="lc97"><span class="cm">   * if you want to use a different set of plugins for one or more of the</span>
</div><div id="lc98"><span class="cm">   * editors.</span>
</div><div id="lc99"><span class="cm">   ************************************************************************/</span>
</div><div id="lc100">
</div><div id="lc101">  <span class="nx">xinha_editors</span>   <span class="o">=</span> <span class="nx">Xinha</span><span class="p">.</span><span class="nx">makeEditors</span><span class="p">(</span><span class="nx">xinha_editors</span><span class="p">,</span> <span class="nx">xinha_config</span><span class="p">,</span> <span class="nx">xinha_plugins</span><span class="p">);</span>
</div><div id="lc102">
</div><div id="lc103">  <span class="cm">/** STEP 5 ***************************************************************</span>
</div><div id="lc104"><span class="cm">   * If you want to change the configuration variables of any of the</span>
</div><div id="lc105"><span class="cm">   * editors,  this is the place to do that, for example you might want to</span>
</div><div id="lc106"><span class="cm">   * change the width and height of one of the editors, like this...</span>
</div><div id="lc107"><span class="cm">   *</span>
</div><div id="lc108"><span class="cm">   *   xinha_editors.myTextArea.config.width  = &#39;640px&#39;;</span>
</div><div id="lc109"><span class="cm">   *   xinha_editors.myTextArea.config.height = &#39;480px&#39;;</span>
</div><div id="lc110"><span class="cm">   *</span>
</div><div id="lc111"><span class="cm">   ************************************************************************/</span>
</div><div id="lc112">
</div><div id="lc113">
</div><div id="lc114">  <span class="cm">/** STEP 6 ***************************************************************</span>
</div><div id="lc115"><span class="cm">   * Finally we &quot;start&quot; the editors, this turns the textareas into</span>
</div><div id="lc116"><span class="cm">   * Xinha editors.</span>
</div><div id="lc117"><span class="cm">   ************************************************************************/</span>
</div><div id="lc118">
</div><div id="lc119">  <span class="nx">Xinha</span><span class="p">.</span><span class="nx">startEditors</span><span class="p">(</span><span class="nx">xinha_editors</span><span class="p">);</span>
</div><div id="lc120"><span class="p">}</span>
</div><div id="lc121">
</div><div id="lc122"><span class="nx">Xinha</span><span class="p">.</span><span class="nx">_addEvent</span><span class="p">(</span><span class="nb">window</span><span class="p">,</span><span class="s1">&#39;load&#39;</span><span class="p">,</span> <span class="nx">xinha_init</span><span class="p">);</span> <span class="c1">// this executes the xinha_init function on page load </span>
</div><div id="lc123">                                            <span class="c1">// and does not interfere with window.onload properties set by other scripts</span>
</div></pre></div>
<p style="padding: 0; margin: 2em 0 1em 0; font-size: 0.8em; color: #666;"><span style="padding: 0 1em; background-color: #f5f5f5;"> Colored with <a style="color: #333" href="http://dumpz.org">dumpz.org</a></span></p>

Habrahabr.ru HTML Copy To Clipboarddone!

Use that HTML for publications on habrahabr.ru

<blockquote><code>xinha_editors&nbsp;<font color="#666666">=</font>&nbsp;<font color="#008000"><strong>null</strong></font>;
xinha_init&nbsp;&nbsp;&nbsp;&nbsp;<font color="#666666">=</font>&nbsp;<font color="#008000"><strong>null</strong></font>;
xinha_config&nbsp;&nbsp;<font color="#666666">=</font>&nbsp;<font color="#008000"><strong>null</strong></font>;
xinha_plugins&nbsp;<font color="#666666">=</font>&nbsp;<font color="#008000"><strong>null</strong></font>;

<font color="#408080"><em>//&nbsp;This&nbsp;contains&nbsp;the&nbsp;names&nbsp;of&nbsp;textareas&nbsp;we&nbsp;will&nbsp;make&nbsp;into&nbsp;Xinha&nbsp;editors
</em></font>xinha_init&nbsp;<font color="#666666">=</font>&nbsp;xinha_init&nbsp;<font color="#666666">?</font>&nbsp;xinha_init&nbsp;<font color="#666666">:</font>&nbsp;<font color="#008000"><strong>function</strong></font>()
{
&nbsp;&nbsp;&nbsp;<font color="#408080"><em>/**&nbsp;STEP&nbsp;1&nbsp;***************************************************************
&nbsp;&nbsp;&nbsp;*&nbsp;First,&nbsp;specify&nbsp;the&nbsp;textareas&nbsp;that&nbsp;shall&nbsp;be&nbsp;turned&nbsp;into&nbsp;Xinhas.&nbsp;
&nbsp;&nbsp;&nbsp;*&nbsp;For&nbsp;each&nbsp;one&nbsp;add&nbsp;the&nbsp;respective&nbsp;id&nbsp;to&nbsp;the&nbsp;xinha_editors&nbsp;array.
&nbsp;&nbsp;&nbsp;*&nbsp;I&nbsp;you&nbsp;want&nbsp;add&nbsp;more&nbsp;than&nbsp;on&nbsp;textarea,&nbsp;keep&nbsp;in&nbsp;mind&nbsp;that&nbsp;these&nbsp;
&nbsp;&nbsp;&nbsp;*&nbsp;values&nbsp;are&nbsp;comma&nbsp;seperated&nbsp;BUT&nbsp;there&nbsp;is&nbsp;no&nbsp;comma&nbsp;after&nbsp;the&nbsp;last&nbsp;value.
&nbsp;&nbsp;&nbsp;*&nbsp;If&nbsp;you&nbsp;are&nbsp;going&nbsp;to&nbsp;use&nbsp;this&nbsp;configuration&nbsp;on&nbsp;several&nbsp;pages&nbsp;with&nbsp;different
&nbsp;&nbsp;&nbsp;*&nbsp;textarea&nbsp;ids,&nbsp;you&nbsp;can&nbsp;add&nbsp;them&nbsp;all.&nbsp;The&nbsp;ones&nbsp;that&nbsp;are&nbsp;not&nbsp;found&nbsp;on&nbsp;the
&nbsp;&nbsp;&nbsp;*&nbsp;current&nbsp;page&nbsp;will&nbsp;just&nbsp;be&nbsp;skipped.
&nbsp;&nbsp;&nbsp;************************************************************************/</em></font>
&nbsp;&nbsp;
&nbsp;&nbsp;xinha_editors&nbsp;<font color="#666666">=</font>&nbsp;xinha_editors&nbsp;<font color="#666666">?</font>&nbsp;xinha_editors&nbsp;<font color="#666666">:</font>&nbsp;[];
&nbsp;&nbsp;
&nbsp;&nbsp;<font color="#408080"><em>/**&nbsp;STEP&nbsp;2&nbsp;***************************************************************
&nbsp;&nbsp;&nbsp;*&nbsp;Now,&nbsp;what&nbsp;are&nbsp;the&nbsp;plugins&nbsp;you&nbsp;will&nbsp;be&nbsp;using&nbsp;in&nbsp;the&nbsp;editors&nbsp;on&nbsp;this
&nbsp;&nbsp;&nbsp;*&nbsp;page.&nbsp;&nbsp;List&nbsp;all&nbsp;the&nbsp;plugins&nbsp;you&nbsp;will&nbsp;need,&nbsp;even&nbsp;if&nbsp;not&nbsp;all&nbsp;the&nbsp;editors
&nbsp;&nbsp;&nbsp;*&nbsp;will&nbsp;use&nbsp;all&nbsp;the&nbsp;plugins.
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;The&nbsp;list&nbsp;of&nbsp;plugins&nbsp;below&nbsp;is&nbsp;a&nbsp;good&nbsp;starting&nbsp;point,&nbsp;but&nbsp;if&nbsp;you&nbsp;prefer
&nbsp;&nbsp;&nbsp;*&nbsp;a&nbsp;simpler&nbsp;editor&nbsp;to&nbsp;start&nbsp;with&nbsp;then&nbsp;you&nbsp;can&nbsp;use&nbsp;the&nbsp;following&nbsp;
&nbsp;&nbsp;&nbsp;*&nbsp;
&nbsp;&nbsp;&nbsp;*&nbsp;xinha_plugins&nbsp;=&nbsp;xinha_plugins&nbsp;?&nbsp;xinha_plugins&nbsp;:&nbsp;[&nbsp;];
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;which&nbsp;will&nbsp;load&nbsp;no&nbsp;extra&nbsp;plugins&nbsp;at&nbsp;all.
&nbsp;&nbsp;&nbsp;************************************************************************/</em></font>

&nbsp;&nbsp;xinha_plugins&nbsp;<font color="#666666">=</font>&nbsp;xinha_plugins&nbsp;<font color="#666666">?</font>&nbsp;xinha_plugins&nbsp;<font color="#666666">:</font>
&nbsp;&nbsp;[
&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&#39;CharacterMap&#39;,
</em></font>&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&#39;ContextMenu&#39;,
</em></font>&nbsp;&nbsp;&nbsp;<font color="#BA2121">&#39;ListType&#39;</font>,
&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&#39;Stylist&#39;,
</em></font>&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&#39;Linker&#39;,
</em></font>&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&#39;SuperClean&#39;,
</em></font>&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&#39;TableOperations&#39;
</em></font>&nbsp;&nbsp;];
&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&nbsp;THIS&nbsp;BIT&nbsp;OF&nbsp;JAVASCRIPT&nbsp;LOADS&nbsp;THE&nbsp;PLUGINS,&nbsp;NO&nbsp;TOUCHING&nbsp;&nbsp;:)
</em></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#008000"><strong>if</strong></font>(<font color="#666666">!</font>Xinha.loadPlugins(xinha_plugins,&nbsp;xinha_init))&nbsp;<font color="#008000"><strong>return</strong></font>;

&nbsp;&nbsp;<font color="#408080"><em>/**&nbsp;STEP&nbsp;3&nbsp;***************************************************************
&nbsp;&nbsp;&nbsp;*&nbsp;We&nbsp;create&nbsp;a&nbsp;default&nbsp;configuration&nbsp;to&nbsp;be&nbsp;used&nbsp;by&nbsp;all&nbsp;the&nbsp;editors.
&nbsp;&nbsp;&nbsp;*&nbsp;If&nbsp;you&nbsp;wish&nbsp;to&nbsp;configure&nbsp;some&nbsp;of&nbsp;the&nbsp;editors&nbsp;differently&nbsp;this&nbsp;will&nbsp;be
&nbsp;&nbsp;&nbsp;*&nbsp;done&nbsp;in&nbsp;step&nbsp;5.
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;If&nbsp;you&nbsp;want&nbsp;to&nbsp;modify&nbsp;the&nbsp;default&nbsp;config&nbsp;you&nbsp;might&nbsp;do&nbsp;something&nbsp;like&nbsp;this.
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_config&nbsp;=&nbsp;new&nbsp;Xinha.Config();
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_config.width&nbsp;&nbsp;=&nbsp;&#39;640px&#39;;
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_config.height&nbsp;=&nbsp;&#39;420px&#39;;
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*************************************************************************/</em></font>

&nbsp;&nbsp;&nbsp;xinha_config&nbsp;<font color="#666666">=</font>&nbsp;xinha_config&nbsp;<font color="#666666">?</font>&nbsp;xinha_config()&nbsp;<font color="#666666">:</font>&nbsp;<font color="#008000"><strong>new</strong></font>&nbsp;Xinha.Config();
&nbsp;&nbsp;&nbsp;xinha_config.width&nbsp;<font color="#666666">=</font>&nbsp;<font color="#BA2121">&#39;950px&#39;</font>;
&nbsp;&nbsp;&nbsp;xinha_config.height&nbsp;<font color="#666666">=</font>&nbsp;<font color="#BA2121">&#39;400px&#39;</font>;
&nbsp;&nbsp;&nbsp;xinha_config.toolbar&nbsp;<font color="#666666">=</font>&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;popupeditor&quot;</font>],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;forecolor&quot;</font>,<font color="#BA2121">&quot;hilitecolor&quot;</font>,<font color="#BA2121">&quot;textindicator&quot;</font>],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;subscript&quot;</font>,<font color="#BA2121">&quot;superscript&quot;</font>],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;linebreak&quot;</font>,<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;justifyleft&quot;</font>,<font color="#BA2121">&quot;justifycenter&quot;</font>,<font color="#BA2121">&quot;justifyright&quot;</font>,<font color="#BA2121">&quot;justifyfull&quot;</font>],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;inserthorizontalrule&quot;</font>,<font color="#BA2121">&quot;createlink&quot;</font>,<font color="#BA2121">&quot;insertimage&quot;</font>,<font color="#BA2121">&quot;inserttable&quot;</font>],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;linebreak&quot;</font>,<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;undo&quot;</font>,<font color="#BA2121">&quot;redo&quot;</font>,<font color="#BA2121">&quot;selectall&quot;</font>,<font color="#BA2121">&quot;print&quot;</font>],&nbsp;(Xinha.is_gecko&nbsp;<font color="#666666">?</font>&nbsp;[]&nbsp;<font color="#666666">:</font>&nbsp;[<font color="#BA2121">&quot;cut&quot;</font>,<font color="#BA2121">&quot;copy&quot;</font>,<font color="#BA2121">&quot;paste&quot;</font>,<font color="#BA2121">&quot;overwrite&quot;</font>,<font color="#BA2121">&quot;saveas&quot;</font>]),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;killword&quot;</font>,<font color="#BA2121">&quot;clearfonts&quot;</font>,<font color="#BA2121">&quot;removeformat&quot;</font>,<font color="#BA2121">&quot;toggleborders&quot;</font>,<font color="#BA2121">&quot;splitblock&quot;</font>,<font color="#BA2121">&quot;lefttoright&quot;</font>,&nbsp;<font color="#BA2121">&quot;righttoleft&quot;</font>],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;htmlmode&quot;</font>,<font color="#BA2121">&quot;showhelp&quot;</font>,<font color="#BA2121">&quot;about&quot;</font>],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;linebreak&quot;</font>,&nbsp;<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;formatblock&quot;</font>,<font color="#BA2121">&quot;fontname&quot;</font>,<font color="#BA2121">&quot;fontsize&quot;</font>,<font color="#BA2121">&quot;bold&quot;</font>,<font color="#BA2121">&quot;italic&quot;</font>,<font color="#BA2121">&quot;underline&quot;</font>,<font color="#BA2121">&quot;strikethrough&quot;</font>],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<font color="#BA2121">&quot;separator&quot;</font>,<font color="#BA2121">&quot;insertorderedlist&quot;</font>,<font color="#BA2121">&quot;insertunorderedlist&quot;</font>,<font color="#BA2121">&quot;outdent&quot;</font>,<font color="#BA2121">&quot;indent&quot;</font>]
&nbsp;&nbsp;&nbsp;&nbsp;];
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&nbsp;To&nbsp;adjust&nbsp;the&nbsp;styling&nbsp;inside&nbsp;the&nbsp;editor,&nbsp;we&nbsp;can&nbsp;load&nbsp;an&nbsp;external&nbsp;stylesheet&nbsp;like&nbsp;this
</em></font>&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&nbsp;NOTE&nbsp;:&nbsp;YOU&nbsp;MUST&nbsp;GIVE&nbsp;AN&nbsp;ABSOLUTE&nbsp;URL
</em></font>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;xinha_config.pageStyleSheets&nbsp;<font color="#666666">=</font>&nbsp;[&nbsp;_editor_url&nbsp;<font color="#666666">+</font>&nbsp;<font color="#BA2121">&quot;examples/full_example.css&quot;</font>&nbsp;];

&nbsp;&nbsp;<font color="#408080"><em>/**&nbsp;STEP&nbsp;4&nbsp;***************************************************************
&nbsp;&nbsp;&nbsp;*&nbsp;We&nbsp;first&nbsp;create&nbsp;editors&nbsp;for&nbsp;the&nbsp;textareas.
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;You&nbsp;can&nbsp;do&nbsp;this&nbsp;in&nbsp;two&nbsp;ways,&nbsp;either
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_editors&nbsp;&nbsp;&nbsp;=&nbsp;Xinha.makeEditors(xinha_editors,&nbsp;xinha_config,&nbsp;xinha_plugins);
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;if&nbsp;you&nbsp;want&nbsp;all&nbsp;the&nbsp;editor&nbsp;objects&nbsp;to&nbsp;use&nbsp;the&nbsp;same&nbsp;set&nbsp;of&nbsp;plugins,&nbsp;OR;
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_editors&nbsp;=&nbsp;Xinha.makeEditors(xinha_editors,&nbsp;xinha_config);
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_editors.myTextArea.registerPlugins([&#39;Stylist&#39;]);
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_editors.anotherOne.registerPlugins([&#39;CSS&#39;,&#39;SuperClean&#39;]);
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;if&nbsp;you&nbsp;want&nbsp;to&nbsp;use&nbsp;a&nbsp;different&nbsp;set&nbsp;of&nbsp;plugins&nbsp;for&nbsp;one&nbsp;or&nbsp;more&nbsp;of&nbsp;the
&nbsp;&nbsp;&nbsp;*&nbsp;editors.
&nbsp;&nbsp;&nbsp;************************************************************************/</em></font>

&nbsp;&nbsp;xinha_editors&nbsp;&nbsp;&nbsp;<font color="#666666">=</font>&nbsp;Xinha.makeEditors(xinha_editors,&nbsp;xinha_config,&nbsp;xinha_plugins);

&nbsp;&nbsp;<font color="#408080"><em>/**&nbsp;STEP&nbsp;5&nbsp;***************************************************************
&nbsp;&nbsp;&nbsp;*&nbsp;If&nbsp;you&nbsp;want&nbsp;to&nbsp;change&nbsp;the&nbsp;configuration&nbsp;variables&nbsp;of&nbsp;any&nbsp;of&nbsp;the
&nbsp;&nbsp;&nbsp;*&nbsp;editors,&nbsp;&nbsp;this&nbsp;is&nbsp;the&nbsp;place&nbsp;to&nbsp;do&nbsp;that,&nbsp;for&nbsp;example&nbsp;you&nbsp;might&nbsp;want&nbsp;to
&nbsp;&nbsp;&nbsp;*&nbsp;change&nbsp;the&nbsp;width&nbsp;and&nbsp;height&nbsp;of&nbsp;one&nbsp;of&nbsp;the&nbsp;editors,&nbsp;like&nbsp;this...
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_editors.myTextArea.config.width&nbsp;&nbsp;=&nbsp;&#39;640px&#39;;
&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;xinha_editors.myTextArea.config.height&nbsp;=&nbsp;&#39;480px&#39;;
&nbsp;&nbsp;&nbsp;*
&nbsp;&nbsp;&nbsp;************************************************************************/</em></font>

&nbsp;&nbsp;<font color="#408080"><em>/**&nbsp;STEP&nbsp;6&nbsp;***************************************************************
&nbsp;&nbsp;&nbsp;*&nbsp;Finally&nbsp;we&nbsp;&quot;start&quot;&nbsp;the&nbsp;editors,&nbsp;this&nbsp;turns&nbsp;the&nbsp;textareas&nbsp;into
&nbsp;&nbsp;&nbsp;*&nbsp;Xinha&nbsp;editors.
&nbsp;&nbsp;&nbsp;************************************************************************/</em></font>

&nbsp;&nbsp;Xinha.startEditors(xinha_editors);
}

Xinha._addEvent(<font color="#008000">window</font>,<font color="#BA2121">&#39;load&#39;</font>,&nbsp;xinha_init);&nbsp;<font color="#408080"><em>//&nbsp;this&nbsp;executes&nbsp;the&nbsp;xinha_init&nbsp;function&nbsp;on&nbsp;page&nbsp;load&nbsp;
</em></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#408080"><em>//&nbsp;and&nbsp;does&nbsp;not&nbsp;interfere&nbsp;with&nbsp;window.onload&nbsp;properties&nbsp;set&nbsp;by&nbsp;other&nbsp;scripts
</em></font></code></blockquote><p><font color="gray">Colored with <a href="http://dumpz.org">dumpz.org</a></p>