Смена темы TinyMCE

[Ivan Ivanon 0]

Добрый день! Верстаю шаблон в котором будет переключатель с светлой на темную тему. Можно как-то с помощью JS менять стиль темы редактора TinyMCE со светлого на темный?

[radrigo 195]

Вроде как нельзя на лету в одной и той же теме. По этой причине и ещё из-за рекламы Яндекса сделал у себя отдельно две темы и просто переключаю их.

https://gusev-online.ru/

[redissx 254]

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

Какой там класс не помню. Можно посмотреть если в info.json указать тёмная схема или светлая. Будет позже возможность напишу здесь как я у себя осуществляю переключение цвета. 

Кстати, в ранних версиях определял не от класса, а от атрибута dle-theme кажется. 

Изменено вчера в 15:43 пользователем redissx

[celsoft 6 150]

57 минут назад, Ivan Ivanon сказал:

Можно как-то с помощью JS менять стиль темы редактора TinyMCE со светлого на темный?

Можно. Админпанель же это делает, почему ваш шаблон не может это делать в таком случае. Сразу скажу я на заказ ничего не пишу, направление для изучения я вам дал.

[fanera 27]

Если только редактор от всего DLE, то копировать содержимое function init_dle_editor и адаптировать под себя. Tinymce не дает методов и событий для этих действий, нужно удалить текущий экземпляр редактора и инициализировать заново

Остальное уже от потребностей, можно в сам редактор добавить кнопку для вызова такой функции

А так, есть setDarkMode(); (странно, что остальное не вынесено в функцию) и ковырять application.js

[radrigo 195]

16.03.2025 в 18:03, celsoft сказал:

Можно. Админпанель же это делает, почему ваш шаблон не может это делать в таком случае. Сразу скажу я на заказ ничего не пишу, направление для изучения я вам дал.

При добавлении к body класса dle_theme_dark меняется фон иконок и цвет самих иконок. Однако поле, где необходимо вводить чек, остаётся неизменным. Может подскажете, каким методом в админ-панели на лету меняется также цвет текста и фона поля, где необходимо вводить текст?

[TeraMoune 60]

@radrigo, В DLE просто удаляется редактор и создаётся новый.

Но есть вариант без таких манипуляций. В редакторе есть метод get() который возвращает экземпляр редактора, если не указан идентификатор то возвращает массив. Затем проходим массив и в каждом проходе устанавливаем класс для body.

if( typeof tinymce === 'object' ) {
	tinymce.get().forEach((item) => {

		item.contentDocument.activeElement.classList.add('dle_theme_dark');
	
	});
}

Это только для внутренней области текста.