Edit History

Docs EN

Version 20 (Troex Nevelin, 06.06.2011 10:20)

1 1 
{{>toc}}
2 1 






    3
    1
    
    
h1. Documentation






    4
    1
    
    






    5
    1
    
    
h2. Install






    6
    1
    
    






    7
    1
    
    
<pre><code class="html">






    8
    15
    Troex Nevelin
    
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8">






    9
    15
    Troex Nevelin
    
<link rel="stylesheet" href="css/elrte.min.css"                         type="text/css" media="screen" charset="utf-8">






    10
    1
    
    






    11
    15
    Troex Nevelin
    
<script src="js/jquery-1.4.4.min.js"           type="text/javascript" charset="utf-8"></script>






    12
    15
    Troex Nevelin
    
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>






    13
    10
    Troex Nevelin
    
<script src="js/elrte.min.js"                  type="text/javascript" charset="utf-8"></script>






    14
    10
    Troex Nevelin
    
<script src="js/i18n/elrte.ru.js"              type="text/javascript" charset="utf-8"></script>






    15
    1
    
    
</code></pre>






    16
    1
    
    






    17
    1
    
    
If you are not using full jQuery UI library, than make sure your _custom_ version includes *dialog* and *tabs* components.






    18
    1
    
    
<pre><code class="html">






    19
    1
    
    
<script type="text/javascript" charset="utf-8">






    20
    1
    
    
	$().ready(function() {






    21
    1
    
    
		var opts = {






    22
    10
    Troex Nevelin
    
			lang         : 'ru',   // set your language






    23
    14
    Dmitry Levashov
    
			styleWithCSS : false,






    24
    10
    Troex Nevelin
    
			height       : 400,






    25
    10
    Troex Nevelin
    
			toolbar      : 'maxi'






    26
    1
    
    
		};






    27
    1
    
    
		// create editor






    28
    1
    
    
		$('#our-element').elrte(opts);






    29
    1
    
    






    30
    1
    
    
		// or this way






    31
    1
    
    
		// var editor = new elRTE(document.getElementById('our-element'), opts);






    32
    1
    
    
	});






    33
    3
    Troex Nevelin
    
</script>






    34
    1
    
    
</code></pre>






    35
    1
    
    






    36
    1
    
    
#our-element - id of element where editor will be created, this can textarea or any HTML element that can contain text (will be replaced with textarea on form submit)






    37
    1
    
    






    38
    1
    
    
h2. Options






    39
    1
    
    






    40
    1
    
    
|_.Option|_.Type|_.Description|






    41
    17
    Troex Nevelin
    
|doctype|String|DocType of editor window (iframe). Default - *<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">*|






    42
    1
    
    
|cssClass|String|CSS class for editor|






    43
    2
    Troex Nevelin
    
|cssfiles|Array|Array of css files which will be included in editor (iframe)|






    44
    2
    Troex Nevelin
    
|absoluteURLs|Boolean|Make image URLs absolute|






    45
    2
    Troex Nevelin
    
|allowSource|Boolean|Allow edit in HTML|






    46
    2
    Troex Nevelin
    
|lang|String|Interface language (requires inclusion of language file), default - English|






    47
    13
    Dmitry Levashov
    
|styleWithCSS|Boolean|If true - text will be formated using span-tag with style attribute, else - semantic tags like strong, em and other|






    48
    2
    Troex Nevelin
    
|height|Number|Height of editor window in pixels|






    49
    16
    Troex Nevelin
    
|width|Number|Width of editor window in pixels|






    50
    2
    Troex Nevelin
    
|fmAllow|Boolean|Allow use of file manager|






    51
    2
    Troex Nevelin
    
|fmOpen|Function(callback)|Function which will be called to open file manager. Argument _callback_ - function which editor passes to file manager on open. File manager must call this function with using URL of selected file as argument|






    52
    2
    Troex Nevelin
    
|toolbar|String|Toolbar to use|






    53
    1
    
    






    54
    2
    Troex Nevelin
    
h3. Toolbar






    55
    1
    
    






    56
    2
    Troex Nevelin
    
Next toolbars are predefined:






    57
    2
    Troex Nevelin
    
* *tiny*: only buttons to change text style (bold, italic, underline, strike, subscript, superscript)






    58
    2
    Troex Nevelin
    
* *compact*: the same as _tiny_ + save, undo/redo, text alignment, list, link, fullscreen






    59
    2
    Troex Nevelin
    
* *normal*: _compact_ + copy/paste, colors, paddings, block-elemet, images






    60
    2
    Troex Nevelin
    
* *complete*: _normal_ + text size, style and font formating






    61
    2
    Troex Nevelin
    
* *maxi*: complete + tables






    62
    4
    Troex Nevelin
    






    63
    4
    Troex Nevelin
    
h3. Custom toolbar






    64
    4
    Troex Nevelin
    






    65
    20
    Troex Nevelin
    
You can customize your toolbar. _Toolbar_ contains _panels_ and panels contains _buttons_. For list of available toolbars/panels/buttons see _src/elrte/js/elRTE.options.js_ file






    66
    4
    Troex Nevelin
    






    67
    4
    Troex Nevelin
    
Example:






    68
    4
    Troex Nevelin
    
<pre><code class="javascript">






    69
    4
    Troex Nevelin
    
elRTE.prototype.options.panels.web2pyPanel = [






    70
    4
    Troex Nevelin
    
	'bold', 'italic', 'underline', 'forecolor', 'justifyleft', 'justifyright',






    71
    4
    Troex Nevelin
    
	'justifycenter', 'justifyfull', 'formatblock', 'insertorderedlist', 'insertunorderedlist',






    72
    4
    Troex Nevelin
    
	'link', 'image', 'flash'






    73
    4
    Troex Nevelin
    
];






    74
    4
    Troex Nevelin
    
elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel', 'tables'];






    75
    4
    Troex Nevelin
    
var opts = {






    76
    4
    Troex Nevelin
    
	toolbar  : 'web2pyToolbar',






    77
    4
    Troex Nevelin
    
	/* ...snip... */






    78
    4
    Troex Nevelin
    
}






    79
    4
    Troex Nevelin
    
var rte = jQuery('#editor').elrte(opts);






    80
    4
    Troex Nevelin
    
</code></pre>






    81
    4
    Troex Nevelin
    






    82
    4
    Troex Nevelin
    
With example above you will get such toolbar:






    83
    5
    Troex Nevelin
    






    84
    4
    Troex Nevelin
    
!elrte-custom-toolbar.png!