CMS DataLife Engine - Система управления сайтами

YuriBtr

Как правильно внедрить стили оформления в редактор

Рекомендуемые сообщения

Здравствуйте,

мне нужно подогнать оформление текста статей, которые отображаются в редакторе TinyMCE (при полном и быстром редактировании) под стили активного шаблона пользователя. Это необходимо, чтобы редактор правильно расставлял картинки, отступы и цитаты.

Кто знает как это сделать правильно, может есть какое то готовое решение? К сожалению на форуме не смог найти информацию по этой теме.

 

Так выглядит текст на фронте

64b074fdbb3bea0d0c6e9852ee01a45c-prev.jp

 

Так выглядит текст в редакторе

aac36ea74220b5b1dca31e306474d72f-prev.jp

Изменено пользователем YuriBtr

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

стили находятся в файле engine/editor/css/content.css

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 03.12.2018 в 13:22, celsoft сказал:

стили находятся в файле engine/editor/css/content.css

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

 

Я так сделал в preview.tpl и теперь у меня в предпросмотре, при добавлении текста на фронте, загружается нужное оформление без каких-либо правок файлов движка. Кстати такое решение НЕ работает для админки, я написал об этом в баг-репорт и Вы до сих пор не на него не обратили внимания (((

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
18 часов назад, YuriBtr сказал:

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

Этот файл стилей для всего. И для админпанели и для сайта.

 

18 часов назад, YuriBtr сказал:

Я так сделал в preview.tpl и теперь у меня в предпросмотре, при добавлении текста на фронте, загружается нужное оформление без каких-либо правок файлов движка. Кстати такое решение НЕ работает для админки, я написал об этом в баг-репорт и Вы до сих пор не на него не обратили внимания (((

Вообще непонятно о чем речь. Шаблон предосмотра загружается и в админпанели и при просмотре на сайте, поведение скрипта в этих вопросах одинаково. То что вы написали в той теме непонятно, о каком назначении для группы пользователей отдельного шаблона идет речь? В настройках групп нет таких настроек, чтобы назначить им отдельный шаблон.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 часа назад, celsoft сказал:

Этот файл стилей для всего. И для админпанели и для сайта.

Ну хорошо, а как вы считаете правильным менять отображение стилей в редакторе для разных шаблонов? Ведь может быть прописан только один стиль.

 

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

 

 

3 часа назад, celsoft сказал:

Вообще непонятно о чем речь. Шаблон предосмотра загружается и в админпанели и при просмотре на сайте, поведение скрипта в этих вопросах одинаково. То что вы написали в той теме непонятно, о каком назначении для группы пользователей отдельного шаблона идет речь? В настройках групп нет таких настроек, чтобы назначить им отдельный шаблон.

Я же объяснял в той теме. Допустим на сайте есть два шаблона: "Test1" и "Test2". Шаблон Test1 установлен по умолчанию. Но у меня выбран Test2. Если я нажимаю на предпросмотр новости в админке, то у меня загружается preview.tpl  из папки шаблона Test1, а должен загружаться из папки Test2.

 

Причем, если я добавляю новость на фронте, и там нажимаю предпросмотр, то preview.tpl загружается правильно - из папки Test2.

 

 

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
18 часов назад, YuriBtr сказал:

Ну хорошо, а как вы считаете правильным менять отображение стилей в редакторе для разных шаблонов? Ведь может быть прописан только один стиль.

Я никак не считаю. У редактора только один файл стилей, а не разные.

 

18 часов назад, YuriBtr сказал:

а должен загружаться из папки Test2.

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

 

18 часов назад, YuriBtr сказал:

Причем, если я добавляю новость на фронте, и там нажимаю предпросмотр, то preview.tpl загружается правильно - из папки Test2.

Правильно. Потому как вы находитесь в пользовательской части сайта, для которой и выбрали шаблон для себя персонально. Выбор работает только на то, на что он распространяется, т.е. на пользовательскую часть. Админпанель с пользовательской частью не имеет никакой связи.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
7 часов назад, celsoft сказал:

С чего вдруг? Вы в админпанели, а не на сайте. Мало ли что у вас на сайте выбрали. Вы в другом месте, не там где выбрали. Вам показывается все правильно, в данном случае то, что установлено в настройках скрипта.

К сожалению, с Вашей позицией согласиться не могу. Очень грустно, что мы опять имеем непредсказуемое поведение скрипта. Для чего спрашивается вообще делать поддержку разных шаблонов, если в какой то части сайта все равно будет показываться то, что выбрано "по умолчанию". Конечно вопрос риторический. На мой взгляд это явный баг или недоработка, хотя и некритическая, но неожиданная.

 

7 часов назад, celsoft сказал:

Я никак не считаю. У редактора только один файл стилей, а не разные

Помнится где то давно Вы говорили что дизайнер должен настраивать сам вид текста в окошке редактора. Но для того чтобы это сделать, должны быть инструменты, или Вы считаете нормальным, что после каждого обновления движка - раз в полгода придется переписывать заново стили, которые идут вместе с ядром редактора? Неужели нельзя этот вопрос как то решить и вынести в шаблоны ту часть, которая формируется при выводе редактора?

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
16 часов назад, YuriBtr сказал:

Вы считаете нормальным, что после каждого обновления движка - раз в полгода придется переписывать заново стили, которые идут вместе с ядром редактора?

Для этого в DLE разработали и внедрили систему плагинов. Где при помощи плагинов, вы можете указать чтобы редактор загружал ваш отдельный файл стилей. И который всегда будет оставаться без изменений при обновлении. Поэтому сделав соответствующий плагин, ничего при обновлении менять не нужно будет и все всегда будет оставаться на месте.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 часа назад, celsoft сказал:

Для этого в DLE разработали и внедрили систему плагинов. Где при помощи плагинов, вы можете указать чтобы редактор загружал ваш отдельный файл стилей. И который всегда будет оставаться без изменений при обновлении. Поэтому сделав соответствующий плагин, ничего при обновлении менять не нужно будет и все всегда будет оставаться на месте.

Ну допустим проблема со стилями решается плагинами (хотя как она решалась до 13 версии ума не приложу).

Но как получить доступ к IFRAME коду страницы, которая загружается в окне редактора? И как в нее передать имя шаблона, чтобы задействовать тему, активную у данного пользователя? В этом вся соль. Если у вас нет рецепта, значит придется писать новый код и создавать еще один плагин (их число уже подошло к 50 на моем сайте), а было бы удобнее все сделать через шаблоны, как это реализовано с предпросмотром (preview.tpl).

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, YuriBtr сказал:

Ну допустим проблема со стилями решается плагинами (хотя как она решалась до 13 версии ума не приложу).

Но как получить доступ к IFRAME коду страницы, которая загружается в окне редактора? И как в нее передать имя шаблона, чтобы задействовать тему, активную у данного пользователя? В этом вся соль. Если у вас нет рецепта, значит придется писать новый код и создавать еще один плагин (их число уже подошло к 50 на моем сайте), а было бы удобнее все сделать через шаблоны, как это реализовано с предпросмотром (preview.tpl).

редактирование/добавление через админку хочеш или через админку?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 07.12.2018 в 16:59, YuriBtr сказал:

Но как получить доступ к IFRAME коду страницы, которая загружается в окне редактора?

Вам браузер этого не даст, это базовая безопасность браузеров.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
10 часов назад, celsoft сказал:

Вам браузер этого не даст, это базовая безопасность браузеров.

О чем Вы вообще говорите?

Я имел ввиду редактирование кода IFRAME страницы загружающейся в окне редактора TinyMCE. Этот код зашит в php файл движка. Именно его и надо выносить в шаблон, чтобы можно было легко привести в соответствие внешний вид страницы в WYSIWYG редакторе и отображение страницы на фронте.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
15 часов назад, YuriBtr сказал:

Я имел ввиду редактирование кода IFRAME страницы загружающейся в окне редактора TinyMCE.

Что за код iframe? Что за понятие такое? Вы называете вещи не своими именами, поэтому о чем идет речь, к сожалению совершенно непонятно. Нет такого понятия как код iframe, который нужно редактировать. А внешний вид содержимого окна, определяется файлом стилей CSS. Какой именно я указал выше. Назначение своего отдельного идет через систему плагинов. Все. О чем вы пишите сейчас, если честно мне совершенно непонятно к сожалению.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
17 часов назад, celsoft сказал:

Что за код iframe? Что за понятие такое? Вы называете вещи не своими именами, поэтому о чем идет речь, к сожалению совершенно непонятно. Нет такого понятия как код iframe, который нужно редактировать. А внешний вид содержимого окна, определяется файлом стилей CSS. Какой именно я указал выше. Назначение своего отдельного идет через систему плагинов. Все. О чем вы пишите сейчас, если честно мне совершенно непонятно к сожалению.

Я всего лишь имел ввиду код страницы, которая загружается в IFRAME окне редактора TinyMCE. Вот образец:

 

screenshot.jpg

Изменено пользователем YuriBtr

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
24 минуты назад, YuriBtr сказал:

Я всего лишь имел ввиду код страницы, которая загружается в IFRAME окне редактора TinyMCE. Вот образец:

 

screenshot.jpg

А зачем вам его править? Разработчик написал что править нужно стили которые подтягивает редактор, и указал который. Что бы добавить свой css файл можно сделать плагин через Систему плагинов.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
5 минут назад, Gameer сказал:

А зачем вам его править? Разработчик написал что править нужно стили которые подтягивает редактор, и указал который. Что бы добавить свой css файл можно сделать плагин через Систему плагинов.

Я всю ветку пытаюсь объяснить, что я хочу сделать следующее:

1. поддержку разных шаблонов в окне редактора TinyMCE

2. заставить скрипт использовать в окне редактора TinyMCE уже готовые стили (переиспользование стилей), из папки текущего шаблона

 

Данный подход обеспечит следующие преимущества:

1. Каждый шаблон на сайте получит свой уникальный внешний вид текста в окне редактора

2. Облегчится адаптация внешнего вида текста в окне редактора, приравняв их отображение к шаблонному (это будет настоящий WYSIWYG, а не компромисс, как сейчас. Достаточно будет прописать в шаблоне IFRAME страницы отсутствующие HTML теги верхнего уровня - обертку текста и подключить стиль)

3. от обновления сайта не будет зависеть внешний вид текста в окне редактора (стили не будут сбрасываться)

Похожий подход я реализовал в preview.tpl - теперь при изменении стиля шаблона, вид страницы предпросмотра автоматически меняется под текущие правила CSS.

 

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
39 минут назад, YuriBtr сказал:

Я всю ветку пытаюсь объяснить, что я хочу сделать следующее:

1. поддержку разных шаблонов в окне редактора TinyMCE

2. заставить скрипт использовать в окне редактора TinyMCE уже готовые стили (переиспользование стилей), из папки текущего шаблона

 

Данный подход обеспечит следующие преимущества:

1. Каждый шаблон на сайте получит свой уникальный внешний вид текста в окне редактора

2. Облегчится адаптация внешнего вида текста в окне редактора, приравняв их отображение к шаблонному (это будет настоящий WYSIWYG, а не компромисс, как сейчас. Достаточно будет прописать в шаблоне IFRAME страницы отсутствующие HTML теги верхнего уровня - обертку текста и подключить стиль)

3. от обновления сайта не будет зависеть внешний вид текста в окне редактора (стили не будут сбрасываться)

Похожий подход я реализовал в preview.tpl - теперь при изменении стиля шаблона, вид страницы предпросмотра автоматически меняется под текущие правила CSS.

 

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

 

Ну так вам уже все написали. IFRAME тут не причем.

-62xB7uqTcCwSvwJanc6cA.png

<?xml version="1.0" encoding="utf-8"?>
<dleplugin>
	<name>Свой стиль в быстром редактировании для TinyMCE</name>
	<description>Добавляем свой css файл в редактор из текущего шаблона [ https://lazydev.pro ]</description>
	<icon></icon>
	<version></version>
	<dleversion></dleversion>
	<versioncompare>less</versioncompare>
	<upgradeurl></upgradeurl>
	<filedelete>0</filedelete>
	<mysqlinstall><![CDATA[]]></mysqlinstall>
	<mysqlupgrade><![CDATA[]]></mysqlupgrade>
	<mysqlenable><![CDATA[]]></mysqlenable>
	<mysqldisable><![CDATA[]]></mysqldisable>
	<mysqldelete><![CDATA[]]></mysqldelete>
	<file name="engine/ajax/editnews.php">
		<operation action="after">
			<searchcode><![CDATA[if ( $config['allow_quick_wysiwyg'] == "2") {]]></searchcode>
			<replacecode><![CDATA[$cssTiny = '';
if (file_exists(ROOT_DIR . '/templates/' . $config['skin'] . '/css/myTinyCss.css')) {
	$cssTiny = ',' . $config['http_home_url'] . 'templates/' . $config['skin'] . '/css/myTinyCss.css';
}]]></replacecode>
		</operation>
		<operation action="replace">
			<searchcode><![CDATA[content_css : "{$config['http_home_url']}engine/editor/css/content.css"]]></searchcode>
			<replacecode><![CDATA[content_css : "{$config['http_home_url']}engine/editor/css/content.css{$cssTiny}"]]></replacecode>
		</operation>
	</file>
</dleplugin>

В итоге будет брать css файл с папки /css/myTinyCss.css текущего шаблона пользователя (даже если он был сменен)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
10 часов назад, Gameer сказал:

Ну так вам уже все написали. IFRAME тут не причем.

 

В итоге будет брать css файл с папки /css/myTinyCss.css текущего шаблона пользователя (даже если он был сменен)

 

Спасибо за плагин, но задача не просто адаптировать стиль и подгружать его из папки /css/myTinyCss.css текущего шаблона. А заставить в редакторе показывать контент натуралистично, в соответствии с правками, внесенными в основной stylesheet текущего шаблона. Для этого нужно воспроизвести всю минимальную иерархию тегов, в которую обернут текст, выводимый через {content}

Данный подход можно реализовать, если вынести код формирования тега страницы, находящейся в IFRAME в отдельный шаблон.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 часов назад, YuriBtr сказал:

1. поддержку разных шаблонов в окне редактора TinyMCE

2. заставить скрипт использовать в окне редактора TinyMCE уже готовые стили (переиспользование стилей), из папки текущего шаблона

Через систему плагинов это делается. DLE известен какой шаблон у пользователя и на основе этого нужно подключать свой файл стилей. А не пытаться что то "протолкнуть" в iframe, т.к. вам браузер это не даст.

 

26 минут назад, YuriBtr сказал:

Спасибо за плагин, но задача не просто адаптировать стиль и подгружать его из папки /css/myTinyCss.css текущего шаблона. А заставить в редакторе показывать контент натуралистично, в соответствии с правками, внесенными в основной stylesheet текущего шаблона. Для этого нужно воспроизвести всю минимальную иерархию тегов, в которую обернут текст, выводимый через {content}

Ничего не мешает сделать это в CSS на основе имен и классов редактора. В данном случае нужно правильно составить стили, а не просто скопировать их с шаблона.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
14 минут назад, YuriBtr сказал:

 

Спасибо за плагин, но задача не просто адаптировать стиль и подгружать его из папки /css/myTinyCss.css текущего шаблона. А заставить в редакторе показывать контент натуралистично, в соответствии с правками, внесенными в основной stylesheet текущего шаблона. Для этого нужно воспроизвести всю минимальную иерархию тегов, в которую обернут текст, выводимый через {content}

Данный подход можно реализовать, если вынести код формирования тега страницы, находящейся в IFRAME в отдельный шаблон.

Нет, в iframe выводиться только текст. Это не предварительный просмотр новости. Это только редактора, для редактирования текста.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
13 минут назад, Gameer сказал:

Нет, в iframe выводиться только текст. Это не предварительный просмотр новости. Это только редактора, для редактирования текста.

На приведенном мной скриншоте, видно, что в IFRAME выводится страница, к которой можно подключить пользовательский стиль из своего шаблона и вставить необходимую иерархию тегов. Именно про это я и говорю.

 

27 минут назад, celsoft сказал:

В плагине, судя по коду, это и есть. Загрузка этого файла из папки шаблона, выбранного пользователем.

Да, но мне не это надо.

 

27 минут назад, celsoft сказал:

А не пытаться что то "протолкнуть" в iframe, т.к. вам браузер это не даст.

Я прекрасно знаю ограничения браузера, и поэтому предлагаю выводить страницу в IFRAME с уже подключенным стилем и обрамленную нужными тегами. Для этого и нужен шаблон.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
6 минут назад, YuriBtr сказал:

На приведенном мной скриншоте, видно, что в IFRAME выводится страница, к которой можно подключить пользовательский стиль из своего шаблона и вставить необходимую иерархию тегов. Именно про это я и говорю.

 

Да, но мне не это надо.

Определитесь что вам нужно. То нужно, то не нужно.

Какую иерархию тегов?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
13 минут назад, Gameer сказал:

Определитесь что вам нужно. То нужно, то не нужно.

Какую иерархию тегов?

Я честно говоря устал вам объяснять. Прочитайте пожалуйста выше мои сообщения.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
5 часов назад, YuriBtr сказал:

Я честно говоря устал вам объяснять. Прочитайте пожалуйста выше мои сообщения.

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

Попробую я обьснить - меня тоже такое интересует.
Например у меня на сайте в новости есть блок с моим стилем....

В этом блоке весь текст стает зеленым и другим шрифтом.

НО в редакторе (админке) - этот текст отображается обычным....
Как сделать чтобы в редакторе текст был зеленым???

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
20 часов назад, YuriBtr сказал:

Я честно говоря устал вам объяснять. Прочитайте пожалуйста выше мои сообщения.

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

 

15 часов назад, gamessutra сказал:

Например у меня на сайте в новости есть блок с моим стилем....

В этом блоке весь текст стает зеленым и другим шрифтом.

НО в редакторе (админке) - этот текст отображается обычным....

Ну так и пропишите в CSS файле нужные вам стили оформление. В чем сложность?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти