Смена темы TinyMCE

[Ivan Ivanon 0]

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

[radrigo 197]

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

https://gusev-online.ru/

[redissx 254]

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

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

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

Изменено 16 марта пользователем redissx

[celsoft 6 161]

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

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

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

[fanera 27]

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

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

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

[radrigo 197]

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

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

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

[TeraMoune 62]

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

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

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

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

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

[radrigo 197]

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

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

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

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

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

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

Спасибо большое. Данный вариант работает отлично.

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

Кнопка для переключения темы с классом .btn-theme

В main.tpl сразу после открытия тега body добавляем следующий код, чтобы при обновлении тема сохранялось

	<script>
		if (localStorage.getItem('gusevTheme') !== null) {
			document.querySelector('body').classList.add('dle_theme_dark');
		}
	</script>

Данный код добавляем в ваш файл со скриптами, который после подключения jQuery.

$(document).ready(function () {
	$('.btn-theme').click(function () {
		if ($('body').hasClass('dle_theme_dark')) {
			$('body').removeClass('dle_theme_dark');
			if (typeof tinymce === 'object') {
				$.each(tinymce.get(), function (index, item) {
					$(item.contentDocument.activeElement).removeClass('dle_theme_dark');
				});
			}
			localStorage.removeItem('gusevTheme');
		} else {
			$('body').addClass('dle_theme_dark');
			if (typeof tinymce === 'object') {
				$.each(tinymce.get(), function (index, item) {
					$(item.contentDocument.activeElement).addClass('dle_theme_dark');
				});
			}
			localStorage.setItem('gusevTheme', 'dark');
		}
	});
});

Данный вариант отлично переключает редактор