Web → Допилюємо pagebreak в TinyMCE

TinyMCE & Pagebreak

TinyMCE — платформонезележний Javascript HTML WYSIWYG редактор для веб, це продукт з відкритим кодом й розповсюджується під ліцензією LGPL. Він призваний спростити форматування тексту користувачами, для різноманітних веб ресурсів. Позитивними рисами TinyMCE є багатий функціонал, широкі можливості по налаштуванню, й доволі проста інтеграція в різноманітні CMS.

Та, як завжди, бочка меду не буває без ложки дьогтю. Від початку роботи з редактором, мені категорично не подобалось, як реалізовано плагін pagebreak (роздільник сторінки).

Суть проблеми

Звичайна практика, при перегляді списку статей, відображається тільки невелика частина їх тексту, все інше ховається під кат.

Для такого функціоналу використовую роздільник сторінки, по замовчуванню це <!– pagebreak –>, що вставляється в вибрану позицію (під курсор). Враховуючи, що зазвичай вставляють його в кінці абзацу, код виглядав так

<p>Текст 1 абзацу<!-- pagebreak --></p>
<p>Текст 2 абзацу</p>

або так

<p>Текст 1 абзацу</p>
<p><!-- pagebreak --></p>
<p>Текст 2 абзацу</p>

а інколи й так

<p>Текст 1 абзацу</p>
<p><!-- pagebreak -->Текст 2 абзацу</p>

Звісно, налаштовувати під такий зоопарк PHP парсер видавалось зовсім не доцільним, а видавати текст як є, до входження <!– pagebreak –> — не правильним (залишались незакриті HTML теги). Душа ж бажала свята логічного варіанта

<p>Текст 1 абзацу</p>
<!-- pagebreak -->
<p>Текст 2 абзацу</p>

Розв’язка

Після деякого часу допиту гугла, виявилось, що я не єдиний не задоволений таким становищем, на офіційному форумі TinyMCE було декілька тем з схожими питаннями, але, як не дивно, без рішення.

Що ж, якщо гора не йде до Магомета.. то прийдеться розбиратися самому 🙂 Пригадав, що в Joomla, де використовується JCE (на основі того ж TinyMCE), все працює справно (на жаль, як виявилося потім, там є інший глюк) й погортав їх код.

На основі отриманої інформації, написав спрощену функцію додавання роздільника сторінки. Код нової кнопки в панелі інструментів:

setup : function(ed) {
	// Додавання власних кнопок
	ed.addButton('pagebreaker', {
		var bElm = 'P,DIV,ADDRESS,PRE,FORM,TABLE,OL,UL,CAPTION,BLOCKQUOTE,CENTER,DL, DIR,FIELDSET,NOSCRIPT,NOFRAMES,MENU,ISINDEX,SAMP';
		title : 'Вставити роздільник сторінки',
		image : '/tiny_mce/img/pagebreaker.gif',
		onclick : function() {
			n = ed.selection.getNode();
			n = ed.dom.getParent(n, bElm, 'BODY') || n;

			if(ed.dom.isBlock(n)){
				r = ed.dom.create('hr', {'id' : 'pagebreaker'});
				p = ed.dom.getParent(r, bElm, 'BODY');

				n.parentNode.insertBefore(r, n.nextSibling);
			}
			ed.focus();
		}
	});
}

Як роздільник у мене використовується <hr id=”pagebreaker” /> . Так, як кожен новий рядок є блоком <p></p>(або ж іншим блочним елементом), то даний код розміститься акурат після нього, що і було необхідно.

Для pagebreaker задав css стиль, й виглядає усе це так:

TinyMCE - Pagebreak - мій варіант

Стандартний роздільник <!– pagebreak –> довелося змінити тому, що при переключенні між режимами HTML ↔ WYSIWYG, він всерівно обрамиться тегами <p></p>. Скоріше всього, це пов’язано з його заміною на картинку для красивого відображення в редакторі.

Й на останок, про вищезгаданий глюк редактора JCE в Joomla. Якщо спробувати додати pagebreak після абзацу, що містить картинку

<p><img src="url" /> Текст абзацу</p>

вона успішно заміниться роздільником!

07.01.2010 21:49 Автор: Strange_V Хіти: 795

Коментарів 4

Напишіть відгук