Class Xinha.Config

Object
   |
   +--Xinha.Config

class Xinha.Config

Defined in XinhaCore.js

Version: $Rev: 819 $ $LastChangedDate: 2007-04-20 01:20:22 +0200 (Fr, 20 Apr 2007) $

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 =
{
  "— 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.formatblock =
{
  "— 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.pageStyle =
  'p { color:red; }\n' +
  'h1 { color:bleu; }\n' +
  'a {text-decoration:none; }';

Field Detail

baseHref

String|null baseHref

Specify a base href for relative links
ATTENTION: this does not work as expected and needs t be changed, see Ticket #961
Default: null

browserQuirksMode

Boolean|null browserQuirksMode

Whether the edited document should be rendered in Quirksmode or Standard Compliant (Strict) Mode.
This is commonly known as the "doctype switch"
for details read here http://www.quirksmode.org/css/quirksmode.html Possible values:
true : Quirksmode is used
false : Strict mode is used
null (default): the mode of the document Xinha is in is used

btn

<private> Object btn

btnList

Object btnList

The button list conains the definitions of the toolbar button. Normally, there's nothing to change here :)
ADDING CUSTOM BUTTONS: please read below! format of the btnList elements is "ID: [ ToolTip, Icon, Enabled in text mode?, ACTION ]" - ID: unique ID for the button. If the button calls document.execCommand it's wise to give it the same name as the called command. - ACTION: function that gets called when the button is clicked. it has the following prototype: function(editor, buttonName) - editor is the Xinha object that triggered the call - buttonName is the ID of the clicked button These 2 parameters makes it possible for you to use the same handler for more Xinha objects or for more different buttons. - ToolTip: tooltip, will be translated below - Icon: path to an icon image file for the button OR; you can use an 18x18 block of a larger image by supllying an array that has three elemtents, the first is the larger image, the second is the column the third is the row. The ros and columns numbering starts at 0 but there is a header row and header column which have numbering to make life easier. See images/buttons_main.gif to see how it's done. - Enabled in text mode: if false the button gets disabled for text-only mode; otherwise enabled all the time.

cfg

<private> Object cfg

changeJustifyWithDirection

Boolean changeJustifyWithDirection

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

charSet

String charSet

CharSet of the iframe, default is the charset of the document

colorPickerCellSize

String colorPickerCellSize

Size of color picker cells
Use number + "px"
Default: "6px"

colorPickerGranularity

Integer colorPickerGranularity

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

colorPickerPosition

String colorPickerPosition

Position of color picker from toolbar button
Default: "bottom,right"

colorPickerSaveColors

Integer colorPickerSaveColors

Number of recent colors to remember
Default: 20

colorPickerWebSafe

Boolean colorPickerWebSafe

Set to true to show only websafe checkbox in picker
Default: false

convertUrlsToLinks

Boolean convertUrlsToLinks

See 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.
Default: true

customSelects

Object customSelects

?? Default: {}

debug

Boolean debug

Switches on some debugging (only in execCommand() as far as I see at the moment)
Default: true

expandRelativeUrl

Boolean expandRelativeUrl

If true, relative URLs (../) will be made absolute. 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)
Default: true

flowToolbars

Boolean flowToolbars

Turning this on will turn all "linebreak" and "separator" items in your toolbar into soft-breaks, this means that if the items between that item and the next linebreak/separator can fit on the same line as that which came before then they will, otherwise they will float down to the next line. If you put a linebreak and separator next to each other, only the separator will take effect, this allows you to have one toolbar that works for both flowToolbars = true and false infact the toolbar below has been designed in this way, if flowToolbars is false then it will create explictly two lines (plus any others made by plugins) breaking at justifyleft, however if flowToolbars is false and your window is narrow enough then it will create more than one line even neater, if you resize the window the toolbars will reflow.
Default: true

fontname

Object fontname

The fontnames listed in the fontname dropdown Default value:

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'
};

fontsize

Object fontsize

The fontsizes listed in the fontsize dropdown Default value:

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"
};

formatblock

Object formatblock

The tags listed in the formatblock dropdown Default value:

xinha_config.formatblock =
{
  "— 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"
};

fullPage

Boolean fullPage

If true then Xinha will retrieve the full HTML, starting with the <HTML> tag.
Default: false

fullScreen

Boolean fullScreen

Start up the editor in fullscreen mode
Default: false

fullScreenMargins

Array fullScreenMargins

You can tell the fullscreen mode to leave certain margins on each side.
The value is an array with the values for [top,right,bottom,left] in that order
Default: [0,0,0,0]

getHtmlMethod

String getHtmlMethod

This determines the method how the HTML output is generated. There are two choices:

DOMwalk	This is the classic and proven method. It recusively traverses the DOM tree and builds the HTML string "from scratch". Tends to be a bit slow, especially in IE.
TransformInnerHTML	This method uses the JavaScript innerHTML property and relies on Regular Expressions to produce clean XHTML output. This method is much faster than the other one.

Default: "DOMwalk"

height

String 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: "auto"

htmlareaPaste

Boolean htmlareaPaste

Intercept ^V and use the Xinha paste command If false, then passes ^V through to browser editor widget, which is the only way it works without problems in Mozilla
Default: false

htmlRemoveTags

RegExp|null htmlRemoveTags

Remove given tags when rendering the HTML (these have to be a regexp, or null if this functionality is not desired)
Default: null

iframeWidth

Integer|null iframeWidth

To make the iframe width narrower than the toolbar width, e.g. to maintain the layout when editing a narrow column of text, set the next parameter (in pixels).
Default: true

imgURL

Object imgURL

killWordOnPaste

Boolean killWordOnPaste

Set to true if you want Word code to be cleaned upon Paste. This only works if you use the toolbr button to paste, not ^V. This means that due to the restrictions regarding pasting, this actually has no real effect in Mozilla
Default: true

makeLinkShowsTarget

Boolean makeLinkShowsTarget

Enable the 'Target' field in the Make Link dialog. Note that the target attribute is invalid in (X)HTML strict
Default: true

mozParaHandler

String mozParaHandler

Gecko only: Let the built-in routine for handling the return key decide if to enter br or p tags, or use a custom implementation.
For information about the rules applied by Gecko, see Mozilla website
Possible values are built-in or best
Default: "best"

only7BitPrintablesInURLs

Boolean only7BitPrintablesInURLs

In URLs all characters above ASCII value 127 have to be encoded using % codes
Default: true

pageStyle

String pageStyle

Raw style definitions included in the edited document
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 andn A not underlined, we may do the following

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

Default: "" (empty)

pageStyleSheets

Array pageStyleSheets

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


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

Default: [] (empty)

panel_dimensions

Object panel_dimensions

each of the panels has a dimension, for the left/right it's the width for the top/bottom it's the height. WARNING: PANEL DIMENSIONS MUST BE SPECIFIED AS PIXEL WIDTHS
Default values:

	  xinha_config.panel_dimensions =
   {
	    left:   '200px', // Width
	    right:  '200px',
	    top:    '100px', // Height
	    bottom: '100px'
	  }

popupURL

Object popupURL

removeToolbarElement

Function removeToolbarElement

Alias of Xinha.Config.prototype.hideSomeButtons()

sevenBitClean

Boolean 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 (chr 20) except cr, lf and tab and above (~, chr 7E))
Default: false

showLoading

Boolean showLoading

Set to true if you want the loading panel to show at startup
Default: false

sizeIncludesBars

Boolean sizeIncludesBars

Specifies whether the toolbar should be included in the size, or are extra to it. If false then it's recommended to have the size set as explicit pixel sizes (either in Xinha.Config or on your textarea)
Default: true

sizeIncludesPanels

Boolean sizeIncludesPanels

Specifies whether the panels should be included in the size, or are extra to it. If false then it's recommended to have the size set as explicit pixel sizes (either in Xinha.Config or on your textarea)
Default: true

specialReplacements

Object specialReplacements

Sometimes we want to be able to replace some string in the html comng 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 represenattion of that should be http://your.server/
Example: {'external_string' : 'internal_string'}
Default: {} (empty)

statusBar

Boolean statusBar

Enable creation of the status bar?
Default: true

stripBaseHref

Boolean stripBaseHref

We can strip the server part out of URL to make/leave them semi-absolute, reason for this is that the browsers will prefix the server to any relative links to make them absolute, which isn't what you want most the time.
Default: true

stripScripts

Boolean stripScripts

Set to false if you want to allow JavaScript in the content, otherwise <script> tags are stripped out.
This currently only affects the "DOMwalk" getHtmlMethod.
Default: true

stripSelfNamedAnchors

Boolean stripSelfNamedAnchors

We can strip the url of the editor page from named links (eg <a href="#top">...</a>) reason for this is that mozilla at least (and IE ?) prefixes location.href to any anchor that don't have a url prefixing them
Default: true

toolbar

Array toolbar

This array orders all buttons except plugin buttons in the toolbar. Plugin buttons typically look for one a certain button in the toolbar and place themselves next to it. Default value:

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"]
 ];

toolbarAlign

String toolbarAlign

Set to center or right to change button alignment in toolbar

undoSteps

Integer undoSteps

Maximum size of the undo queue
Default: 20

undoTimeout

Integer milliseconds undoTimeout

The time interval at which undo samples are taken
Default: 500 (1/2 sec)

URIs

Object URIs

version

Object version

width

String 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: "auto"

Xinha.Config

Xinha.Config()

This class creates an object that can be passed to the Xinha constructor as a parameter. Set the object's properties as you need to configure the editor (toolbar etc.)

Version: $Rev: 819 $ $LastChangedDate: 2007-04-20 01:20:22 +0200 (Fr, 20 Apr 2007) $

addToolbarElement

void addToolbarElement(id, where, position)

Helper Function: add buttons/drop-downs boxes with title or separator to the toolbar if the buttons/drop-downs boxes doesn't allready exists. id: button or selectbox (as array with separator or title) where: button or selectbox (as array if the first is not found take the second and so on) position: -1 = insert button (id) one position before the button (where) 0 = replace button (where) by button (id) +1 = insert button (id) one position after button (where) cfg.addToolbarElement(["T[title]", "button_id", "separator"] , ["first_id","second_id"], -1);

hideSomeButtons

void hideSomeButtons(remove)

Call this function to remove some buttons/drop-down boxes from the toolbar. Pass as the only parameter a string containing button/drop-down names delimited by spaces. Note that the string should also begin with a space and end with a space. Example: config.hideSomeButtons(" fontname fontsize textindicator "); It's useful because it's easier to remove stuff from the defaul toolbar than create a brand new toolbar ;-)

registerButton

Object registerButton(id, tooltip, image, textMode, action, context)

Helper function: register a new button with the configuration. It can be called with all 5 arguments, or with only one (first one). When called with only one argument it must be an object with the following properties: id, tooltip, image, textMode, action.
Examples:


 config.registerButton("my-hilite", "Hilite text", "my-hilite.gif", false, function(editor) {...});
 config.registerButton({
      id       : "my-hilite",      // the ID of your button
      tooltip  : "Hilite text",    // the tooltip
      image    : "my-hilite.gif",  // image to be displayed in the toolbar
      textMode : false,            // disabled in text mode
      action   : function(editor) { // called when the button is clicked
                   editor.surroundHTML('', '');
                 },
      context  : "p"               // will be disabled if outside a 
 element
    });

registerDropdown

void registerDropdown(object)

The following helper function registers a dropdown box with the editor configuration. You still have to add it to the toolbar, same as with the buttons. Call it like this: FIXME: add example