Edit History

Docs RU

Version 2 (Troex Nevelin, 18.03.2010 08:32)

1 1 
h1. Документация
2 1 






    3
    1
    
    
elRTE и elFinder могут быть подключены 3 способами:






    4
    1
    
    
* Редактор вместе с elFinder или другим файловым менеджером






    5
    1
    
    
* Редактор без файлового менеджера






    6
    1
    
    
* Файловый менеджер отдельно для управления файлами на удаленном сервере






    7
    1
    
    






    8
    1
    
    
Подключение jquery, jquery-ui и плагинов jquery.form и jquery.metadata:






    9
    1
    
    






    10
    1
    
    
jquery и jquery-ui необходимы для elRTE и elFinder.






    11
    1
    
    
jquery.form и jquery.metadata необходимы для elFinder.






    12
    1
    
    
<pre>






    13
    1
    
    
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"><script>






    14
    1
    
    
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"><script>






    15
    1
    
    
<link rel="stylesheet" href="css/ui-themes/base/ui.all.css"  type="text/css" media="screen" charset="utf-8">






    16
    1
    
    
<script src="js/jquery.form.js" type="text/javascript" charset="utf-8"><script>






    17
    1
    
    
<script src="js/jquery.metadata.js" type="text/javascript" charset="utf-8"><script>






    18
    1
    
    
</pre>






    19
    1
    
    






    20
    1
    
    
Если вы не используете в своем проекте jquery-ui в полном объеме, можно собрать минимальную версию jquery-ui, включающую только dialog и tabs.






    21
    1
    
    






    22
    1
    
    
h2. Подключение elRTE и elFinder






    23
    1
    
    






    24
    1
    
    
Подключаем jquery, jquery-ui и плагины, как показано выше. Подключаем elRTE и elFinder одним файлом:






    25
    1
    
    
<script src="js/elrtefinder.min.js" type="text/javascript" charset="utf-8"><script>






    26
    1
    
    
<link rel="stylesheet" href="css/elrtefinder.full.css"  type="text/css" media="screen" charset="utf-8">






    27
    1
    
    
Создаем редактор:






    28
    1
    
    
<pre>






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






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






    31
    1
    
    
		var opts = {






    32
    1
    
    
			lang : 'ru',






    33
    1
    
    
			styleWithCss : false,






    34
    1
    
    
			height  : 400,






    35
    1
    
    
			toolbar : 'maxi',






    36
    1
    
    
			fmAllow  : true,






    37
    1
    
    
			fmOpen   : function(callback) {






    38
    1
    
    
				$('<div />').elfinder({






    39
    1
    
    
					url : 'connector/connector.php',






    40
    1
    
    
					lang : 'en',






    41
    1
    
    
					dialog : { width : 900, modal : true },






    42
    1
    
    
					editorCallback : callback






    43
    1
    
    
				})






    44
    1
    
    
			}






    45
    1
    
    
		};






    46
    1
    
    
		// создаем редактор






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






    48
    1
    
    






    49
    1
    
    
		// или так






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






    51
    1
    
    
	});






    52
    1
    
    
<script>






    53
    1
    
    
</pre>






    54
    2
    Troex Nevelin
    






    55
    1
    
    
#our-element - id элемента, на котором будет создан редактор.






    56
    1
    
    
Может быть textarea или любым html элементом, содержащем текст (будет заменен на textarea перед отправкой формы)






    57
    1
    
    






    58
    1
    
    
h2.Опции elRTE






    59
    2
    Troex Nevelin
    
*doctype* doctype окна редактора (iframe). По умолчанию - HTML 4.01 Transitional






    60
    2
    Troex Nevelin
    
*cssClass* класс для редактора






    61
    2
    Troex Nevelin
    
*cssfiles* массив url css файлов, подключаемых в окно редактора (iframe)






    62
    2
    Troex Nevelin
    
*absoluteURLs* false/true. Приводить адреса ссылок и изображений к абсолютным






    63
    2
    Troex Nevelin
    
*allowSource* false/true. Разрешает редактирование HTML






    64
    2
    Troex Nevelin
    
*lang* язык интерфейса (требует подключения языковых файлов, если язык отличен от английского)






    65
    2
    Troex Nevelin
    
*styleWithCss* если true - текст будет оформляться тегами span с аттрибутом style, в противном случае - семантическими тегами strong, em и тд






    66
    2
    Troex Nevelin
    
*height* высота окна редактора в пикселях






    67
    2
    Troex Nevelin
    
*fmAllow* разрешить использование файлового менеджера






    68
    2
    Troex Nevelin
    
*fmOpen* функция, которая будет вызвана, чтобы открыть файловый менеджер.






    69
    1
    
    
Аргумент callback - функция, которую редактор передает файловому менеджеру при открытии. Файловый менеджер должен вызвать эту функцию, передав ей url выбранного файла






    70
    1
    
    
toolbar - имя панели инструментов. Панели состоят из именованных групп кнопок. Редактор содержит некоторое кол-во предопределенных панелей инструментов. Если необходим набор кнопок, которого нет в предопределенных панелях, вы можете определить свои собственные группы кнопок и панелей.






    71
    1
    
    
buttons: имена кнопок (должен быть дополнен при добавлении новых кнопок)






    72
    1
    
    
panels: Объект. Ключ - имя группы, значение - массив кнопок в этой группе






    73
    1
    
    
toolbars: Объект. Ключ - имя панели инструментов, значение - массив групп кнопок в него входящих.






    74
    1
    
    
На данный момент существуют следующие toolbars:






    75
    1
    
    
tiny: только кнопки изменения стиля текста (жирный, наклонный, подчеркнутый, перечеркнутый, subscript, superscript)






    76
    1
    
    
compact: тоже, что и tiny + сохранить, отмена/повтор, выравнивание, списки, ссылки, полноэкранный режим






    77
    1
    
    
normal: тоже, что и compact + копировать/вставить, цвета, отступы, элементы, изображения






    78
    1
    
    
complite: тоже, что и normal + форматирование, размер и стиль шрифта






    79
    1
    
    
maxi: тоже, что и complite + таблицы






    80
    1
    
    






    81
    2
    Troex Nevelin
    
h2. Создание своего toolbar для редактора






    82
    2
    Troex Nevelin
    






    83
    1
    
    
Способ 1. После подключения файлов elRTE:






    84
    2
    Troex Nevelin
    
<pre>






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






    86
    1
    
    
elRTE.prototype.options.toolbars.newToolbar = [






    87
    1
    
    
	// имена групп кнопок на нашем toolbar (см src/elrte/elRTE.options.js)






    88
    1
    
    
	'save', 'copypaste', 'style', 'colors', 'tables', 'fullscreen'






    89
    1
    
    
];






    90
    1
    
    
<script>






    91
    2
    Troex Nevelin
    
</pre>






    92
    1
    
    
Теперь, при создания редактора в параметре toolbar передаем имя нашей панели инструментов.






    93
    1
    
    






    94
    1
    
    
Способ 2. Во время создания нового редактора:






    95
    2
    Troex Nevelin
    
<pre>






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






    97
    1
    
    
var opts = {






    98
    1
    
    
	...






    99
    1
    
    
	toolbars : {






    100
    1
    
    
		newToolbar : ['save', 'copypaste', 'style', 'colors', 'tables', 'fullscreen']






    101
    1
    
    
	},






    102
    1
    
    
	toolbar : 'newToolbar',






    103
    1
    
    
	...






    104
    1
    
    
	}






    105
    1
    
    
};






    106
    1
    
    
// создаем редактор






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






    108
    1
    
    






    109
    1
    
    
<script>






    110
    2
    Troex Nevelin
    
</pre>






    111
    2
    Troex Nevelin
    






    112
    1
    
    
Подключение elRTE без файлового менеджера:






    113
    1
    
    






    114
    1
    
    
Подключаем jquery, jquery-ui, как показано выше.






    115
    1
    
    
Подключаем elRTE так же, как в предыдущем примере. Вместо elrtefinder.min.js и elrtefinder.min.css используем elrte.min.js и elrte.min.css соответственно. Настраиваем и создаем редактор, так же, как в предыдущем примере, не указывая опции fmAllow и fmOpen.






    116
    1
    
    






    117
    2
    Troex Nevelin
    
h2. Подключение elFinder без elRTE






    118
    2
    Troex Nevelin
    






    119
    1
    
    
Подключаем jquery, jquery-ui и плагины, как показано выше.






    120
    1
    
    
Подключаем elFinder:






    121
    2
    Troex Nevelin
    
<pre>






    122
    1
    
    
<script src="js/elfinder.min.js" type="text/javascript" charset="utf-8"><script>






    123
    1
    
    
<link rel="stylesheet" href="css/elfinder.full.css"  type="text/css" media="screen" charset="utf-8">






    124
    1
    
    
Создаем файловый менеджер на странице:






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






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






    127
    1
    
    
		$('#our-element').elfinder({






    128
    1
    
    
			url  : 'connector/connector.php',






    129
    1
    
    
			lang : 'ru'






    130
    1
    
    
		});






    131
    1
    
    
	});






    132
    1
    
    
<script>






    133
    2
    Troex Nevelin
    
</pre>






    134
    1
    
    
Или при клике на элементе - открываем его в диалоговом окне:






    135
    2
    Troex Nevelin
    
<pre>






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






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






    138
    1
    
    
		$('#our-element').click(function() {






    139
    1
    
    
			$('<div />').elfinder({






    140
    1
    
    
				url : 'connector/connector.php',






    141
    1
    
    
				lang : 'en',






    142
    1
    
    
				dialog : { width : 900, modal : true }






    143
    1
    
    
			})






    144
    1
    
    
		});






    145
    1
    
    
	});






    146
    1
    
    
<script>






    147
    2
    Troex Nevelin
    
</pre>






    148
    2
    Troex Nevelin
    






    149
    1
    
    
Для работы elFInder необходмо настроить его connector. В connector.php, изменяем переменную $opts под наши нужды:






    150
    2
    Troex Nevelin
    
<pre><code class="php">






    151
    1
    
    
$opts = array(






    152
    1
    
    
	'root'   => Путь_к_директории_с_файлами,






    153
    1
    
    
	'URL'    => URL_директории_с_файлами,






    154
    1
    
    
	'tplDir' => realpath(dirname(__FILE__).DIRECTORY_SEPARATOR.'tpl'), //измените, если перенесли шаблоны в другое место






    155
    1
    
    
	'lang'   => 'en', // язык интерфейса






    156
    1
    
    
	'defaults' => array( // права доступа по умолчанию






    157
    1
    
    
		'read'  => true,






    158
    1
    
    
		'write' => false






    159
    1
    
    
		),






    160
    1
    
    
	'perms' => array( // права доступа к отдельным директориям (не обязательно)






    161
    1
    
    
		'абсолютный_путь_к_директории' => array(






    162
    1
    
    
			'read'  => true,






    163
    1
    
    
			'write' => true






    164
    1
    
    
			)






    165
    1
    
    
		),






    166
    1
    
    
	'acl' => $zendACLObject // объект Zend_ACL (если указан, 2 предыдущие опции игнорируются). Будет доступно в следующей версии.






    167
    1
    
    
	);






    168
    2
    Troex Nevelin
    
</code></pre>






    169
    2
    Troex Nevelin
    






    170
    2
    Troex Nevelin
    
h2.Опции elFinder






    171
    1
    
    






    172
    1
    
    
url: String. Aдрес коннектора. Обязательный параметр.






    173
    1
    
    
lang: String. Двухбуквенное обозначение языка интерфейса (требует подключения языковых файлов, если язык отличен от английского)






    174
    1
    
    
dialog: Object. Если содержит объект со свойствами - открывается в диалоговом окне. Опции - см jquery-ui dialog. По умолчанию - null (файловый менеджер создается на странице)






    175
    1
    
    
height: Number. Высота окна файлового менеджера в px, По умолчанию - 450






    176
    1
    
    
editTextFiles: false/true. Разрешает редактирование текстовых файлов. По умолчанию - false






    177
    1
    
    
editorCallback: function. Вызывается редактором при выборе файла. Аргумент - URL выбранного файла (editorCallback : function(url) {window.console.log(url) })