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

[YuriBtr 58]

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

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

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

 

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

 

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

Изменено 2 декабря 2018 пользователем YuriBtr

[celsoft 6 076]

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

[YuriBtr 58]

В 03.12.2018 в 13:22, celsoft сказал:

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

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

 

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

[celsoft 6 076]

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

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

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

 

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

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

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

[YuriBtr 58]

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

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

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

 

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

 

 

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

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

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

 

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

 

 

 

 

[celsoft 6 076]

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

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

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

 

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

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

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

 

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

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

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

[YuriBtr 58]

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

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

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

 

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

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

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

 

[celsoft 6 076]

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

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

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

[YuriBtr 58]

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

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

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

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

[alukardua 27]

1 час назад, YuriBtr сказал:

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

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

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

[celsoft 6 076]

В 07.12.2018 в 16:59, YuriBtr сказал:

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

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

[YuriBtr 58]

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

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

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

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

[celsoft 6 076]

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

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

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

[YuriBtr 58]

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

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

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

 

Изменено 10 декабря 2018 пользователем YuriBtr

[Gameer 310]

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

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

 

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

[YuriBtr 58]

5 минут назад, Gameer сказал:

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

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

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

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

 

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

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

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

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

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

 

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

 

[Gameer 310]

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

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

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

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

 

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

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

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

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

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

 

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

 

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

<?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 текущего шаблона пользователя (даже если он был сменен)

[YuriBtr 58]

10 часов назад, Gameer сказал:

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

 

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

 

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

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

[celsoft 6 076]

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

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

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

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

 

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

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

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

 

[Gameer 310]

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

 

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

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

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

[YuriBtr 58]

13 минут назад, Gameer сказал:

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

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

 

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

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

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

 

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

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

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

 

[Gameer 310]

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

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

 

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

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

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

[YuriBtr 58]

13 минут назад, Gameer сказал:

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

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

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

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

[gamessutra 15]

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

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

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

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

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

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

[celsoft 6 076]

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

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

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

 

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

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

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

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

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