| javascript_components

# Class: Bs_Editor Source Location: /components/editor/Bs_Editor.class.js.php
### Class Overview
Bs_Editor.class.js - clientside [wysiwyg] editor. #### Author(s): andrej arn <at blueshoes dot org> #### Version: 4.5 (2003/08/04) #### Copyright: blueshoes.org | ### Variables $bsImgPath $buttonsDefaultPath $buttonsHtml $buttonsText $buttonsWysiwyg $dataContainer $dataType $editareaOnPaste $editorCssFile $editorCssString $fgColorSelector $fontSelector $formFieldName $hrefSelector $htmlDoc $htmlElm $iframeElm $imageSelector $lastSelection $maxHeight $maxWidth $mayResize $outrendered $specialCharSelector $style $workingDoc $workingElm $wysiwygDoc $wysiwygElm | ### Methods attachEvent callbackWindowColor callbackWindowFont callbackWindowHref callbackWindowImage convertField createImage createLink drawAsToolbar drawInto fireEvent fireOnBlur fireOnFocus getValue hasEventAttached insertSpecialChar insertString loadButtonsHtml loadButtonsText loadButtonsWysiwyg resizeEnd resizeWindowStart setFgColor setFont setFontOption setValue switchToHtmlTab switchToWysiwygTab toggleToolbar toolbarButtonClicked toolbarButtonClose toolbarButtonSave toolbarButtonUndo _updateButtons
### Inherited Variables | ### Inherited Methods
### Class Details [line 121] Bs_Editor.class.js - clientside [wysiwyg] editor. Dependences: /_bsJavascript/core/form/Bs_FormFieldSelect.class.js, /_bsJavascript/core/html/Bs_HtmlUtil.lib.js, #### Tags:
copyright: | blueshoes.org
author: | andrej arn <at blueshoes dot org>
version: | 4.5 (2003/08/04)
[ Top ] ### Class Variables #### $bsImgPath = '/_bsImages/' [line 425] the path to the blueshoes images. change this if you're not using the framework, see the examples. #### Tags:
var: | bsImgPath
access: | public
Type: | string
[ Top ] #### $buttonsDefaultPath = '/_bsImages/buttons/' [line 417] if the buttons (defined in this.buttonsWysiwyg etc) dont' have an imgPath setting then this path will be applied. #### Tags:
var: | buttonsDefaultPath
see: | vars this.buttonsWysiwyg, this.buttonsHtml, this.buttonsText
access: | public
Type: | string
[ Top ] #### $buttonsHtml = [line 400] array with the button specs of the html tab. #### Tags:
var: | buttonsHtml
see: | this.loadButtonsText()
access: | public
Type: | array
[ Top ] #### $buttonsText = [line 408] array with the button specs of the text tab. #### Tags:
var: | buttonsText
see: | this.loadButtonsText()
access: | public
Type: | array
[ Top ] #### $buttonsWysiwyg = [line 392] array with the button specs of the wysiwyg tab. #### Tags:
var: | buttonsWysiwyg
see: | this.loadButtonsWysiwyg()
access: | public
Type: | array
[ Top ] #### $dataContainer = [line 271] can be used to stick in any data. maybe you don't see a reason for it, but i do. #### Tags:
var: | dataContainer
since: | bs4.4
access: | public
Type: | mixed
[ Top ] #### $dataType = 'whtml' [line 143] the data type of the data that gets edited. one of: whtml (wysiwyg html, default) html (only html edit is possible, no wysiwyg) xhtml xml text #### Tags:
access: | public
Type: | mixed
[ Top ] #### $editareaOnPaste = 5 [line 174] what should be done on a paste operation, what kind of pasts are accepted? a user can really fuck up html code by pasting parts of websites, word documents and the like. if your users are not familiar with html, you should not leave the default. pasting can be done in different ways, not only with the paste button, but also ctrl-v shift-insert right mouse, paste (contect menu the options: = no pasting allowed, just ignore it silently. = no pasting allowed, alert such a message on paste. = allow paste of plain text, remove tags silently. = allow paste of plain text, remove tags, alert such a message. = if tags are pasted, ask the user if he wants to keep them or have them removed. = just paste what's pasted, don't do anything, allow everything. or alternatively, you can set a function to this var which will then be called, and you can handle it yourself. return a text to paste, or return bool false to paste nothing. alert the user yourself if you want. #### Tags:
var: | editareaOnPaste (int or function)
since: | bs4.4
see: | this._fireEditareaOnPaste()
access: | public
Type: | mixed
[ Top ] #### $editorCssFile = [line 341] a css style file to use in the editor area. example: myEditor.editorCssFile = "/styles/editor.css"; note: mozilla does not use it. it only accepts a string, see editorCssString #### Tags:
var: | editorCssFile
since: | bs4.5
see: | Bs_Editor::$editorCssString
access: | public
Type: | string
[ Top ] #### $editorCssString = "body { \n font-family:arial,helvetica; \n font-size: 12px; \n }\n td { \n font-size: 12px; \n } \n " [line 361] a css style string to use in the editor area.
       example:
       myEditor.editorCssString = "body { \n color:green; \n } \n";

     default is:
     body { \n      font-family:arial,helvetica; \n      font-size: 12px; \n    }\n    td { \n      font-size: 12px; \n    } \n
i recommend that you separate lines with backslash n. #### Tags:
var: | editorCssString
since: | bs4.5
see: | Bs_Editor::$editorCssFile
access: | public
Type: | string
[ Top ] #### $fgColorSelector = array('/_bsJavascript/components/colorpicker/windowColor.html', 500, 600) [line 306] array with 3 elements. = url = width = height #### Tags:
var: | fgColorSelector
access: | public
Type: | array
[ Top ] #### $fontSelector = array('/_bsJavascript/components/editor/windowFont.html', 420, 300) [line 316] array with 3 elements. = url = width = height #### Tags:
var: | fontSelector
access: | public
Type: | array
[ Top ] #### $formFieldName = [line 217] if the style is set to 'inline' or 'floating' (not 'toolbar') then you can use a (hidden) form field which will be updated with the editors content (whenever the editor loses the focus). if you want that feature, specify a field name here. otherwise just leave it unset. #### Tags:
var: | formFieldName
todo: | allow to use that field in toolbar mode also.
access: | public
Type: | string
[ Top ] #### $hrefSelector = array('/_bsJavascript/components/editor/windowHref.html', 490, 350) [line 281] array with 3 elements. = url = width = height #### Tags:
var: | hrefSelector
access: | public
Type: | array
[ Top ] #### $htmlDoc = [line 227]
Type: | mixed
[ Top ] #### $htmlElm = [line 226]
Type: | mixed
[ Top ] #### $iframeElm = [line 230]
Type: | mixed
[ Top ] #### $imageSelector = array('/_bsJavascript/components/editor/windowImage.html', 525, 330) [line 296] array with 4 elements. = url = width = height = image browser; array with 3 elements: (not set = don't use a server image browser) 0 = url 1 = width 2 = height #### Tags:
var: | imageSelector
access: | public
Type: | array
[ Top ] #### $lastSelection = [line 262] TextRange. see http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_textrange.asp see where it's used to understand it.
Type: | object lastSelection
[ Top ] #### $maxHeight = [line 383] max height of the editor window. not specified = no limit. #### Tags:
var: | maxWidth
see: | var this.mayResize
access: | public
Type: | int
[ Top ] #### $maxWidth = [line 375] max width of the editor window. not specified = no limit. #### Tags:
var: | maxWidth
see: | var this.mayResize
access: | public
Type: | int
[ Top ] #### $mayResize = true [line 367] #### Tags:
var: | mayResize
access: | public
Type: | bool
[ Top ] #### $outrendered = false [line 238] tells if we're already rendered to the browser. #### Tags:
var: | outrendered
Type: | bool
[ Top ] #### $specialCharSelector = array('/_bsJavascript/components/editor/windowSpecialChar.html', 450, 300) [line 326] array with 3 elements. = url = width = height #### Tags:
var: | specialCharSelector
access: | public
Type: | array
[ Top ] #### $style = 'inline' [line 188] WARNING: don't use this at the moment. may be removed. how the wysiwyg editor should be displayed. 'inline' => as fixed field, non-moveable. (default) 'floating' => as box, moveable 'toolbar' => toolbar only, the editable part is directly in the page. toolbar is moveable. #### Tags:
var: | style
access: | public
Type: | string
[ Top ] #### $workingDoc = [line 229]
Type: | mixed
[ Top ] #### $workingElm = [line 228]
Type: | mixed
[ Top ] #### $wysiwygDoc = [line 225]
Type: | mixed
[ Top ] #### $wysiwygElm = [line 224] a reference to the wysiwyg element (div). gets set after the toolbar got loaded. #### Tags:
access: | public
Type: | object wysiwygElm
[ Top ] ### Class Methods ### method attachEvent [line 1297]
`void attachEvent( string trigger, mixed yourEvent)`
attaches an event. editStart editEnd //editBlur //toolbarClose //editareaMouseOver //editareaMouseOut toolbarButtonClose #### Tags:
see: | var this._attachedEvents
access: | public
#### Parameters:
string | trigger | trigger
mixed | yourEvent | yourEvent (string (of code) or function)
[ Top ] ### method callbackWindowColor [line 1235]
`void callbackWindowColor( )`
called from the windowColor, telling us that it's loaded. [ Top ] ### method callbackWindowFont [line 1252]
`void callbackWindowFont( )`
called from the windowFont, telling us that it's loaded. [ Top ] ### method callbackWindowHref [line 1151]
`void callbackWindowHref( )`
called from the windowHref, telling us that it's loaded. [ Top ] ### method callbackWindowImage [line 1188]
`void callbackWindowImage( )`
called from the windowImage, telling us that it's loaded. [ Top ] ### method convertField [line 493]
`bool convertField( string tagId)`
like drawInto() but uses an existing textarea form field. note: 1) this.formFieldName will automatically have the field name of the existing field. if it is not set, the id will be used instead. 2) as value the textarea's value will be used. 3) the editor will have the same width/height the textarea had. #### Tags:
access: | public
#### Parameters:
string | tagId | tagId
[ Top ] ### method createImage [line 1065]
`void createImage( object paramObj paramObj)`
inserts an image, or, if an image is currently selected, updates it. param paramObj can have the keys: 'src', 'alt', 'width', 'height', 'hspace', 'vspace', 'border', 'align', 'name', 'title', 'id', 'class', 'style' #### Tags:
access: | public
#### Parameters:
object paramObj | paramObj |
[ Top ] ### method createLink [line 974]
`void createLink( obj paramObj)`
creates/updates the link at the current position/for the current selection.. param paramObj: array or object that can have the fields 'href', 'target', 'name', 'title', 'id', 'class', 'style' if 'href' is empty then no link will be added, and an existing link will be dropped. #### Tags:
access: | public
#### Parameters:
obj | paramObj | paramObj (see above)
[ Top ] ### method drawAsToolbar [line 572]
`bool drawAsToolbar( string editableAreaId, bool startActivated)`
renders the toolbar. #### Tags:
return: | true on success, false on failure
see: | Bs_Editor::toggleToolbar()
access: | public
#### Parameters:
string | editableAreaId | editableAreaId
bool | startActivated | startActivated (if it should be in edit mode after loading. default is false.)
[ Top ] ### method drawInto [line 471]
`bool drawInto( mixed tagId)`
draws the editor into the tag specified. #### Tags:
var: | tagId
access: | public
[ Top ] ### method fireEvent [line 1326]
`void fireEvent( string trigger)`
fires the events for the trigger specified. #### Parameters:
string | trigger | trigger (for example 'onClickCaption')
[ Top ] ### method fireOnBlur [line 856]
`void fireOnBlur( )`
fires when the edit area loses the focus. we have to update our internal value. and the hidden form field (since bs4.3). [ Top ] ### method fireOnFocus [line 880]
`void fireOnFocus( )`
[ Top ] ### method getValue [line 654]
`string getValue( )`
returns the value (content). todo: maybe we should re-read it. or add a setting telling if it should be done. #### Tags:
access: | public
[ Top ] ### method hasEventAttached [line 1315]
`bool hasEventAttached( string trigger)`
tells if an event is attached for the trigger specified. #### Tags:
access: | public
#### Parameters:
string | trigger | trigger
[ Top ] ### method insertSpecialChar [line 776]
`void insertSpecialChar( string code)`
inserts a special character. #### Tags:
status: | experimental (may be removed, and you'll have to use insertString() or so.)
access: | public
#### Parameters:
string | code | code (eg "&euro;")
[ Top ] ### method insertString [line 793]
`void insertString( string str)`
inserts the string specified at the current cursor position. #### Tags:
status: | experimental
access: | public
#### Parameters:
string | str | str
[ Top ] ### method loadButtonsHtml [line 1681]
`void loadButtonsHtml( )`
loads the buttons for the html bar. #### Tags:
see: | var this.buttonsHtml
access: | public
[ Top ] ### method loadButtonsText [line 1481]
`void loadButtonsText( )`
loads the buttons for the text bar. #### Tags:
see: | var this.buttonsText
access: | public
[ Top ] ### method loadButtonsWysiwyg [line 1530]
`void loadButtonsWysiwyg( )`
loads the buttons for the wysiwyg bar. #### Tags:
see: | var this.buttonsWysiwyg
access: | public
[ Top ] ### method resizeEnd [line 2038]
`void resizeEnd( )`
fires when resizing of the editor window/toolbar ends. [ Top ] ### method resizeWindowStart [line 2026]
`void resizeWindowStart( element elm)`
fires when resizing of the editor window/toolbar starts. #### Parameters:
element | elm | elm
[ Top ] ### method setFgColor [line 1103]
`void setFgColor( string hexCode)`
set the foreground color. #### Tags:
access: | public
#### Parameters:
string | hexCode | hexCode (6 digit hex code)
[ Top ] ### method setFont [line 1134]
`void setFont( object paramObj paramObj)`
#### Tags:
access: | public
#### Parameters:
object paramObj | paramObj |
[ Top ] ### method setFontOption [line 1120]
`void setFontOption( string option, bool b)`
param option: these are allowed 'Underline' 'StrikeThrough' 'SuperScript' 'SubScript' #### Tags:
access: | public
#### Parameters:
string | option | option (see above)
bool | b | b
[ Top ] ### method setValue [line 635]
`bool setValue( string str)`
sets the value (content). #### Tags:
access: | public
#### Parameters:
string | str | str
[ Top ] ### method switchToHtmlTab [line 1941]
`void switchToHtmlTab( )`
switches [from the wysiwyg] to the html tab. used internally on a click on the tab, feel free to call it from your code. #### Tags:
see: | Bs_Editor::switchToWysiwygTab()
access: | public
[ Top ] ### method switchToWysiwygTab [line 1917]
`void switchToWysiwygTab( )`
switches [from the html] to the wysiwyg tab. used internally on a click on the tab, feel free to call it from your code. #### Tags:
see: | Bs_Editor::switchToHtmlTab()
access: | public
[ Top ] ### method toggleToolbar [line 1965]
`bool toggleToolbar( bool hide)`
toggles the visibility of the toolbar. access public #### Tags:
return: | (success or not)
see: | Bs_Editor::drawAsToolbar()
#### Parameters:
bool | hide | hide
[ Top ] ### method toolbarButtonClicked [line 1349]
`void toolbarButtonClicked( obj btnObj)`
#### Parameters:
obj | btnObj | btnObj (an instance of Bs_Button)
[ Top ] ### method toolbarButtonClose [line 1988]
`void toolbarButtonClose( )`
[ Top ] ### method toolbarButtonSave [line 1981]
`void toolbarButtonSave( )`
[ Top ] ### method toolbarButtonUndo [line 1974]
`void toolbarButtonUndo( )`
[ Top ] ### method _updateButtons [line 1852]
`void _updateButtons( )`
fires onkeyup in the editor. [ Top ] Documentation generated on Mon, 29 Dec 2003 22:18:21 +0100 by phpDocumentor 1.2.3