Context Navigation

Customise Xinha: List of available options

Customise Xinha: List of available options

The examples on this page assume that you have created a Xinha.Config object by the name of xinha_config. For details see the NewbieGuide.

var xinha_config = new Xinha.Config();

xinha_config.showLoading

Set to true if you want the loading panel to show at startup.

default value : false

xinha_config.stripScripts

Set to false if you want to allow JavaScript in the content, otherwise <script> tags are stripped out.

default value : true

xinha_config.convertUrlsToLinks

You can have Xinha look if the text just typed looks like a URL, or email address and link it appropriatly.
Note: Setting this option to false only affects Mozilla based browsers. In InternetExplorer? this is native behaviour and cannot be turned off.

Allowed values are true or false.
true : URLs and email addresses are converted to links while typing.
false : no action is taken.
default value : true

Array of icons to show on the toolbar. Below you see the default toolbar that contains all icons that are part of the Xinha core (Plugins add additional icons to the toolbar). You can sort and strip it down as you wish.

xinha_config.toolbar =
 [
   ["popupeditor"],
   ["separator","formatblock","fontname","fontsize","bold","italic","underline","strikethrough"],
   ["separator","forecolor","hilitecolor","textindicator"],
   ["separator","subscript","superscript"],
   ["linebreak","separator","justifyleft","justifycenter","justifyright","justifyfull"],
   ["separator","insertorderedlist","insertunorderedlist","outdent","indent"],
   ["separator","inserthorizontalrule","createlink","insertimage","inserttable"],
   ["linebreak","separator","undo","redo","selectall","print"], (Xinha.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]),
   ["separator","killword","clearfonts","removeformat","toggleborders","splitblock","lefttoright", "righttoleft"],
   ["separator","htmlmode","showhelp","about"]
 ];

xinha_config.formatblock

Array of the various options listed in format selectbox.

   xinha_config.formatblock =
  {
    "&mdash; format &mdash;": "",
    "Heading 1": "h1",
    "Heading 2": "h2",
    "Heading 3": "h3",
    "Heading 4": "h4",
    "Heading 5": "h5",
    "Heading 6": "h6",
    "Normal"   : "p",
    "Address"  : "address",
    "Formatted": "pre"
  };

xinha_config.fontname

Array of the various options listed in font selectbox.

   xinha_config.fontname =
  {
    "&mdash; font &mdash;": '',
    "Arial":	         'arial,helvetica,sans-serif',
    "Courier New":	   'courier new,courier,monospace',
    "Georgia":	       'georgia,times new roman,times,serif',
    "Tahoma":	         'tahoma,arial,helvetica,sans-serif',
    "Times New Roman": 'times new roman,times,serif',
    "Verdana":	       'verdana,arial,helvetica,sans-serif',
    "impact":	         'impact',
    "WingDings":	     'wingdings'
  };

xinha_config.fontsize

Array of the various options listed in font size selectbox.

   xinha_config.fontsize =
  {
    "&mdash; size &mdash;": "",
    "1 (8 pt)" : "1",
    "2 (10 pt)": "2",
    "3 (12 pt)": "3",
    "4 (14 pt)": "4",
    "5 (18 pt)": "5",
    "6 (24 pt)": "6",
    "7 (36 pt)": "7"
  };

xinha_config.fullPage

Allowed values are true or false.

true : will retrieve the full HTML, starting with the <HTML> tag.
false : retrieve only the body content.
default value : false

xinha_config.height

This property controls the height of the editor.

Allowed values are 'auto' or a numeric value followed by px.
auto : let Xinha choose the height to use.
numeric value : forced height in pixels ('200px').
default value : 'auto'

xinha_config.width

This property controls the width of the editor.

Allowed values are 'auto', 'toolbar' or a numeric value followed by px.
auto : let Xinha choose the width to use.
toolbar : compute the width size from the toolbar width.
numeric value : forced width in pixels ('600px').
default value : 'toolbar'

xinha_config.pageStyleSheets

Array of external stylesheets to load. (Reference these absolutely)

default value : []

xinha_config.pageStyleSheets = ["/css/myPagesStyleSheet.css"];

xinha_config.pageStyle

Style included in the iframe document.

default value :

When a lot of inline style is used, perhaps it is wiser to use one or more external stylesheets. To set tags P in red, H1 in blue en A not underlined, we may do the following

xinha_config.pageStyle =
 'p { color:red; }\n' +
 'h1 { color:bleu; }\n' +
 'a {text-decoration:none; }';

xinha_config.expandRelativeUrl

When the editor is in different directory depth as the edited page relative image sources will break the display of your images.
This fixes an issue where Mozilla converts the urls of images and links that are on the same server to relative ones (../) when dragging them around in the editor (Ticket #448) Allowed values are true or false.

true : if you want to have relative URLs in links an images converted to absolute ones.
false : no update done to the baseHref (absolute links).
default value : true

xinha_config.baseURL

This specifies what will be stripped out of the URL when xinha_config.stripBaseHref is true.

xinha_config.baseURL = "http://www.myserver.com";

xinha_config.stripBaseHref

If true the baseHref will be removed from links. that means you will get relative links, not absolute-links.

Allowed values are true or false.
true : if you want the baseHref to be removed from links (relative links).
false : no update done to the baseHref (absolute links).
default value : true

xinha_config.stripSelfNamedAnchors

If true the baseHref will be removed from named anchors.

Allowed values are true or false.
true : if you want the baseHref to be removed from named anchors (#anchor).
false : no update done to the baseHref (http://Xinha_editor_url#anchor).
default value : true

xinha_config.getHtmlMethod

This controls the method that is used to retrieve the actual HTML from the editor.
At the moment there are two alternative methods ( = possible values) available:

"DOMwalk" : traverses through the document structure to extract tags, attributes, text nodes, etc.
"TransformInnerHTML" : grabs the innerHTML value and transforms it with Regular Expressions to get well formed XHTML. See here for details

xinha_config.htmlareaPaste

This property control the behaviour when user press the keys CTRL and V.

Allowed values are true or false.
true : intercept ^{V and use the internal paste command.

false : passes}V through to browser editor widget
default value : false

xinha_config.killWordOnPaste

Control the behaviour of the paste command with Word code.

Allowed values are true or false.
true : if you want Word code to be cleaned upon paste. (This works only in MS Internet Explorer, as in Mozilla there is no access to clipboard actions allowed)
false : the paste command will not remove any invalid and superfluous Word code.
default value : true

xinha_config.htmlRemoveTags

RegExp? allowing to remove certain HTML tags when rendering the HTML.
Example: remove span and font tags

   xinha_config.htmlRemoveTags = /span|font/;

Allowed values are null or a Regular Expression.

null : functionality is not desired.
RegExp? : RegExp? to remove tags.
default value : null

xinha_config.specialReplacements

Sometimes we want to be able to replace some string in the html coming in and going out, so that in the editor we use the "internal" string, and outside and in the source view we use the "external" string this is useful for say making special codes for your absolute links, your external string might be some special code, say "{server_url}" an you say that the internal representation of that should be http://your.server/

xinha_config.specialReplacements = { 'http://www.myserver.com/' : '{server_url}' };

xinha_config.makeLinkShowsTarget

Enable the 'Target' field in the Make Link dialog. The TARGET property is invalid with XHTML document.

Allowed values are true or false.
true : enable the 'Target' field in the Make Link dialog.
false : disable the 'Target' field in the Make Link dialog.
default value : true

xinha_config.sevenBitClean

If you are putting the HTML written in Xinha into an email you might want it to be 7-bit characters only. This config option will convert all characters consuming more than 7bits into UNICODE decimal entity references (actually it will convert anything below <space> (chr 20) except cr, lf and tab and above <tilde> (~, chr 7E))

default value : false

xinha_config.changeJustifyWithDirection

Set this to true if you want to explicitly right-justify when setting the text direction to right-to-left.

default value : false;

xinha_config.mozParaHandler

Controls what happens if you press ENTER (in Mozilla).
Allowed values are 'built-in', 'dirty' or'best'.

built-in : will (may) use 'br' instead of 'p' tags.
dirty: will use p and work good enough for the majority of cases.
best: works the best, but will probably be slower than 'dirty'
default value : 'best'

xinha_config.colorPickerCellSize

Size of color picker cells

default value : '6px'

xinha_config.colorPickerGranularity

Granularity of color picker cells (number per column/row)

default value : 18

xinha_config.colorPickerPosition

Position of color picker from toolbar button

default value : 'bottom,right'

xinha_config.panel_dimensions

Width of the each panel, when present.

default value : { left:'200px', right:'200px', top:'100px', bottom: '100px' }

xinha_config.URIs

Array of the various URIs of the popup files. 7 URIs are available.

xinha_config.URIs =
  {
   "blank": "popups/blank.html",
   "link": "link.html",
   "insert_image": "insert_image.html",
   "insert_table": "insert_table.html",
   "select_color": "select_color.html", //deprecated, not used anymore
   "about": "about.html",
   "help": "editor_help.html"
  };

NOTE:
The latter six are also located inside the popups folder

To update the url to insert an image and the one to insert a link to PHP file without creating new plugins, we will do :

xinha_config.URIs['insert_image'] = 'my_insert_image.php';
xinha_config.URIs['link'] = 'my_insert_link.php';

Or you can provide a custom help page:

xinha_config.URIs['help'] = 'my_own_help_page.html';

xinha_config.imgURL

URL of image directory which contains the toolbar icons, relative url to _editor_url.

default value : "images/"

xinha_config.popupURL

URL of popups directory, relative url to _editor_url.

default value : "popups/"

xinha_config.sizeIncludesBars

Specifies whether the toolbar should be included in the size or not.

If false then it's recommended to have explicit pixel sizes above (or on your textarea and have auto above) Allowed values are true or false.
true : the toolbar height is included in the editor height.
false : the toolbar height is not included in the editor height.
default value : true

xinha_config.sizeIncludesPanels

Specifies whether the panels should be included in the size or not.

If false then it's recommended to have explicit pixel sizes above (or on your textarea and have auto above) Allowed values are true or false.
true : the panel dimensions are included in the editor size.
false : the panel dimensions are not included in the editor size.
default value : true

xinha_config.statusBar

This property enable creation of a status bar.

Allowed values are true or false.
true : enable the status bar.
false : disable the status bar.
default value : true

xinha_config.undoSteps

Maximum size of the undo queue.

Allowed values are numeric values.
default value : 20

xinha_config.undoTimeout

The time interval at which undo samples are taken, expressed in milliseconds.

Allowed values are numeric values.
default value : 500

xinha_config.charSet

This defines the charset used in the iframe. Normally this is the one used in the page in which the editor is embedded. You can change it if your edited document uses a different charset.

Download in other formats:

Plain Text