Разработка электронных устройств

Серийное и единичное производство аналоговой и цифровой электроники, приборов для промышленности, медицины, автоматизации. Разработка программного обеспечения для микроконтроллеров и сигнальных процессоров. Полное сопровождение проекта и написание технической литературы

Прототипы и серийное производство

Разработка и изготовление корпусов и передних панелей. Разработка и изготовление печатных платы любой сложности. Монтаж печатных плат.

Написание программного обеспечения

Весь путь от создания, поддержания и качества программного обеспечения под любую операционную систему. Основные направления сетевое и системное программирование, взаимодействие клинт - серверных систем.

Разработка механизмов различной степени сложности

Проектирование и прототипирование подвижных и неподвижных механизмов и узлов устройств и агрегатов. Полное сопровождение проекта и написание технической литературы

Создание, продвижение и обслуживание сайтов

Написание php/perl/c кода или использование cms. Собственный сервер для размещения Ваших проектов под любые нагрузки. Поддержание сайта в актуальности и продвижение в поисковых системах.

 
 

modx revolution использование TinyMCE в frontend

Автор: от 11 Март 2013 года, просмотров 21046

Google

 Modx revolution, установил пакеты TinyMCE и DirectResize Revo всё бы хорошо и отлично работает, но только в админке. А мне нужно было это всё подключить ещё и в frontend сайта. Долгие поиски в результате которых и было найдено решение:

Создаём страницу с таким содержимым:

1
<textarea name="content" style="width: 100%; height: 600px;" class="modx-richtext"></textarea>

Проверяем, получается голое текстовое поле

Теперь подключим к этому полю TinyMCE + загрузку картинок + DirectResize Revo (ресайз картинок). Для этого создаем сниппет который собственно и будет добавлять оболочку тинимце:

Имя сниппета: init_editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php
 
$whichEditor = $modx->getOption('which_editor',null,'');
 
if ($whichEditor == 'TinyMCE') {
	$plugin=$modx->getObject('modPlugin',array('name'=>'TinyMCE'));
 
	/* set rich text content placeholders and includes necessary js files */
	$modx->regClientStartupScript($modx->getOption('manager_url').'assets/ext3/adapter/ext/ext-base.js');
	$modx->regClientStartupScript($modx->getOption('manager_url').'assets/ext3/ext-all.js');
	$modx->regClientStartupScript($modx->getOption('manager_url').'assets/modext/core/modx.js');
 
	$tinyPath = $modx->getOption('core_path').'components/tinymce/';
	$tinyUrl = $modx->getOption('assets_url').'components/tinymce/';
	/* @var $plugin modPlugin */
	$tinyproperties=$plugin->getProperties();
	require_once $tinyPath.'tinymce.class.php';
	$tiny = new TinyMCE($modx, $tinyproperties);
 
	$tinyproperties['language'] = $modx->getOption('cultureKey',null,$modx->getOption('manager_language',null,'en'));
	$tinyproperties['frontend'] = true;
	$tinyproperties['cleanup'] = true; /* prevents "bogus" bug */
	$tinyproperties['width'] = '100%';
 
	$tinyproperties['tiny.custom_buttons1'] = 'undo,redo,separator,pastetext,search,replace,separator,cleanup,removeformat,tablecontrols,separator,modxlink,unlink,anchor,separator,image,media,separator,code';
 
    $tinyproperties['tiny.custom_buttons2'] = 'formatselect,separator,forecolor,backcolor,separator,bold,italic,underline,separator,strikethrough,sub,sup,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,outdent,indent,separator,rj_insertcode,blockquote,separator,hr,charmap';
 
	$tinyproperties['tiny.custom_buttons3'] = '';
 
	$tiny->setProperties($tinyproperties);
	$tiny->initialize();
 
	$modx->regClientStartupHTMLBlock('<script type="text/javascript">
										Ext.onReady(function() {
                            				MODx.loadRTE();
                        				});
                    				</script>');
 
	$output = '<script type="text/javascript">
					delete Tiny.config.setup;
			</script>';
	return $output;
}

 Теперь открываем опять же нашу созданную страницу и дописываем вызов только что созданного сниппета:

1
2
[[init_editor]]
<textarea name="content" style="width: 100%; height: 600px;" class="modx-richtext"></textarea>

Проверяем, всё работает. И ресайз картинок и загрузка картинок.
Теперь когда тини работает можно поменять или добавить, удалить некоторые кнопки на панели. Это задаётся в tiny.custom_buttons1 (Первая строка), tiny.custom_buttons2 (вторая) и тд.

NoWrap запрет автоматического переноса текста на следующую строку. Лично мне удобно чтоб текст сам перескакивал вниз как в microsoft word, поэтому было найдено решение. Открываем файл assets/components/tinymce/jscripts/tiny_mce/tiny_mce.js и меняем в нём:

1
2
Было if(p.nowrap){m.style.whiteSpace="nowrap"}
Стало if(p.nowrap){m.style.whiteSpace="normal"}

 Следующим шагом было вставка таких красивых блоков CODE как на сайте:

Продолжение следует...

Категория: