| Version 2 (modified by ray, 7 years ago) |
|---|
Customise Xinha: List of available options
The examples on this page assume that you have created a HTMLArea.Config object by the name of xinha_config. For details see the NewbieGuide.
var xinha_config = new HTMLArea.Config();
xinha_config.showLoading
Set to true if you want the loading panel to show at startup.
default value : false
xinha_config.toolbar
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"], (HTMLArea.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 =
{
"— format —": "",
"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 =
{
"— font —": '',
"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 =
{
"— size —": "",
"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.showLoading
Set to true if you want the loading panel to show at startup.
default value : false
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.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.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.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 HTML tags.
Allowed values are null or a regexp.
null : functionality is not desired.
regex : 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
Propriété contrôlant le comportement de Xinha lors de l'appui sur la touche ENTER.
Allowed values are sont 'built-in', 'dirty' ou '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.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.
