Docs EN

Version 2 (Troex Nevelin, 22.03.2010 09:53)

1 1
{{>toc}}
2 1
3 1
h1. Documentation
4 1
5 1
h2. Install
6 1
7 1
<pre><code class="html">
8 1
<link rel="stylesheet" href="css/ui-themes/base/ui.all.css" type="text/css" media="screen" charset="utf-8">
9 1
<link rel="stylesheet" href="css/elrte.full.css" type="text/css" media="screen" charset="utf-8">
10 1
11 1
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
12 1
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
13 1
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
14 2 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 1
			lang : 'ru',
23 1
			styleWithCss : false,
24 1
			height  : 400,
25 1
			toolbar : 'maxi',
26 1
			fmAllow  : true,
27 1
			fmOpen   : function(callback) {
28 1
				$('<div />').elfinder({
29 1
					url : 'connector/connector.php',
30 1
					lang : 'en',
31 1
					dialog : { width : 900, modal : true },
32 1
					editorCallback : callback
33 1
				})
34 1
			}
35 1
		};
36 1
		// create editor
37 1
		$('#our-element').elrte(opts);
38 1
39 1
		// or this way
40 1
		// var editor = new elRTE(document.getElementById('our-element'), opts);
41 1
	});
42 1
<script>
43 1
</code></pre>
44 1
45 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)
46 1
47 1
h2. Options
48 1
49 1
|_.Option|_.Type|_.Description|
50 1
|doctype|String|DocType of editor window (iframe). Default - *HTML 4.01 Transitional*|
51 1
|cssClass|String|CSS class for editor|
52 2 Troex Nevelin
|cssfiles|Array|Array of css files which will be included in editor (iframe)|
53 2 Troex Nevelin
|absoluteURLs|Boolean|Make image URLs absolute|
54 2 Troex Nevelin
|allowSource|Boolean|Allow edit in HTML|
55 2 Troex Nevelin
|lang|String|Interface language (requires inclusion of language file), default - English|
56 2 Troex Nevelin
|styleWithCss|Boolean|If true - text will be formated using span-tag with style attribute, else - semantic tags like strong, em and other|
57 2 Troex Nevelin
|height|Number|Height of editor window in pixels|
58 2 Troex Nevelin
|fmAllow|Boolean|Allow use of file manager|
59 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|
60 2 Troex Nevelin
|toolbar|String|Toolbar to use|
61 1
62 2 Troex Nevelin
h3. Toolbar
63 1
64 2 Troex Nevelin
Next toolbars are predefined:
65 2 Troex Nevelin
* *tiny*: only buttons to change text style (bold, italic, underline, strike, subscript, superscript)
66 2 Troex Nevelin
* *compact*: the same as _tiny_ + save, undo/redo, text alignment, list, link, fullscreen
67 2 Troex Nevelin
* *normal*: _compact_ + copy/paste, colors, paddings, block-elemet, images
68 2 Troex Nevelin
* *complete*: _normal_ + text size, style and font formating
69 2 Troex Nevelin
* *maxi*: complete + tables