Меню

Как изменить цвет tinymce



Как изменить и добавить цвет текста в WordPress (плагин TinyMCE Color Grid)

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

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

Итак, начнем с изменения цвета текста.

В панели текстового редактора найдете иконку с буквой «А» и прозрачным фоном. При клике откроется палитра цветов для выбора. Чтобы изменить цвет текста в WordPress, просто выделяете фрагмент контента (слово, букву, абзац) и выбираете ему нужный окрас. Если переключиться в режим HTML (Текст), то увидите, что форматирование осуществляется за счет тега span:

Пример выделения цветом .

В первом скриншоте рядом с буквой «А» находится еще одна похожая кнопка, которая используется в WordPress для цвета фона. В базовом редакторе ее по умолчанию найти не удалось, а вот в TinyMCE Advanced она добавляется в панель инструментов через настройки.

Добавление своего цвета текста в WordPress

Также на картинке выше под вариантами цветов найдете ссылку «Произвольный» — она откроет инструмент палитры для выбора других вариантов кроме базовых.

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

Именно поэтому более надежным способом добавления своего цвета изменения шрифта является следующий хак. Вам нужно открывать файл функций functions.php и дописать туда такой код:

Немного пояснений. Здесь вначале в переменной default_colours определяется список базовых цветов, затем — ваши новые значения в custom_colours. После оба массива объединяются в один. Всего получится 40 пар «код цвета + название». Переменная textcolor_rows:

… добавляет новую строку в элемент выбора цвета. Вот как в итоге выглядит результат (можете сравнить с первым сриншотом).

Кстати, вы можете задавать разное число колонок (rows) и строк (cols) для этого элемента, например:

$init[‘textcolor_rows’] = 5; $init[‘textcolor_cols’] = 10;

Хак работает для версий WP 3.9+ и для редактора TinyMCE 4+.

TinyMCE Color Grid — улучшенная палитра цветов

С помощью плагина вордпресс для редактирования цвета текста TinyMCE Color Grid добавить свои варианты оформления в систему сможет даже начинающий пользователь. Модуль установило более 2 тыс. человек, оценка пока что максимальная, поддерживается WP начиная с 2.7.

По факту, TinyMCE Color Grid содержит 2 функции. Первая значительно расширяет стандартную палитру цветов:

С таким то выбором вы легко сможете изменять цвета вордпресс в любом сайте. Если их недостаточно, плагин позволяет добавлять свои персональные варианты. Для этого заходите в меню «Настройки» — «TinyMCE Color Grid» и отмечаете галочкой опцию «I’d like to define some custom colors». Сразу после этого появится инструмент как на картинке ниже:

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

Читайте также:  Каким цветом раствор фурацилина

Итого. Выбор из этих двух методов изменения цвета текста в WordPress зависит от вашего уровня подготовки. Мне лично проще использовать хак: в нем меньше кода, он проще, не требуется следить за новыми версиями модуля. Хотя здесь есть такой нюанс, что движок TinyMCE может изменится, и тогда нужно будет обновлять код.

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

Источник

Tinymce форматирование текста. Размер, цвет шрифта

Здравствуйте, уважаемые знатоки.
Естественно у меня есть проблема, потому то я и вспомнил про вас))
Уже 3 вечера провожу в поисковиках, пытаясь разобраться, но усталый после работы мозг. ладно, это не по теме..
Мне на сайте без каких либо готовых CMS надо прикрутить tinymce (можно и что-то другое, но я уже обозлился на tinymce).
По инструкциям и статьям в Интернете я успешно скачал и прикрутил редактор к странице.
НО! Никак не могу понять, как мне добавить в нём инструмент для изменения размера и цвета текста.
Понимаю, что д.б. какой-то плагин. Подскажите, какой и как его прикрутить к редактору.
Версия tinymce у меня 4.
Вот так я его размещаю на странице:

Изменить цвет шрифта и размер у title
Доброго времени суток! Подскажите, пожалуйста, как мне изменить у всплывающей подсказки (title) в.

В шаблоне поменять цвет и размер шрифта
Как поменять цвет и размер шрифта в шаблоне. Скачал шаблон, меню не особо нравиться, надо поменять.

Как изменить цвет и размер шрифта?
Мне нужно, чтобы цвет выводимых чисел был ораньжевым. как быть? Еще можете сделать так, чтобы шрифт.

Не изменяется размер шрифта, его цвет
Не изменяется размер шрифта, его цвет, меняю значения font, убрала жирность, но все равно изменений.

Источник

Как изменить фон TinyMCE?

Я только что установил редактор TinyMCE для своего сайта. Но фон по умолчанию черный, а цвет текста серый. Любой может сказать мне, как изменить цвет фона на белый и текст на черный.

Или вы можете изменить цвет с помощью js:

Я настоятельно рекомендую вам использовать конфигурацию tinymce, чтобы влиять на стили в tinymce, вместо того, чтобы возиться с основными файлами css.

Существует параметр content_css, который позволяет указать файл ccs, который перезапишет поведение по умолчанию (css). Это путь. Вы можете использовать css из других предоставленных ответов.

Добавить BODY_CLASS Для инициализации:

Внутри content.css правильной темы просто добавьте следующую запись:

Это сделает тело черным и текст белым в редакторе

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

Все, что вам нужно сделать, это добавить этот стиль в свою основную таблицу стилей:

И затем жестко очистите кэш или перезапустите сеанс, чтобы TinyMCE загрузил новый CSS. И тогда ваша область редактирования теперь покажет черный текст ( #000 ) на белой подложке ( #fff ).

Добавление следующего кода в таблицу стилей темы отлично работало!

Я вытягивал свои волосы на этом – и поверьте мне, у меня нет никаких волос.:-) Спасибо!

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

Читайте также:  Что тебе нужно для счастья букет цветов

В один и тот же вопрос возникла минута назад, и выяснилось, что моя проблема вызвана тем, что скин (cirkuit) имеет !important; взломать это письмо.

Источник

How to change the default font family, size, and color in TinyMCE

November 26th, 2019

To change the default font family, size, or color in the TinyMCE editor, we recommend using content_css or content_style (or a combination of both) depending on your use case.

TinyMCE is shipped with a default CSS that determines what the font and everything else looks like in the editor itself. If you want to change the default font style in the editor, you’ll need to initialize TinyMCE accordingly.

content_css

content_css can be used to load a specific stylesheet, for example, your website’s stylesheet. This can be used to match the styling of your published content for a truer WYSIWYG experience.

content_style

content_style can be used to tweak (or override) parts of whatever stylesheet the editor is using (whether that be the default CSS or one you’ve specified with content_css ).

Examples and use cases

Potential use cases might be:

  • You want to override parts of the default CSS used by the editor, for example, so you can edit with a larger font.
  • You want the styles in the editor to match those used in your published content for the full WYSIWYG experience.
  • You largely want the styles in the editor to match your published content, but you want to override some of the styling used in the editor for easier use while editing.

Read on for more detailed examples of usage and information about how to change the default styling options displayed in the TinyMCE menus and toolbars.

Match editor styles to your published content using content_css

If you want the styles in the TinyMCE editor to match the styles on your published page, for a true WYSIWYG experience, the best option is to initialize TinyMCE with the same CSS file that your site uses.

For example, let’s say your website uses white comic sans…no. I can’t quite bring myself to use that example. Okay, let’s say your website uses white cursive text on a darker background.В

You have the following style defined in a file called mycontent.css .

So your published content looks like this:

Screenshot of website with cursive font.

If you want the full WYSIWYG experience for your users, you can include the same CSS file in the initialization script of the editor.

You can do this with the content_css property.

For example (using an absolute path):

And — hey presto — the editor CSS matches that of your web page.

Screenshot of TinyMCE editor with cursive font matching website.

Read more about content_css in our documentation.

Override editor styles using content_style

Alternatively, there’s a simple way to override the editor CSS, regardless of whether it’s the default CSS or a stylesheet you’ve provided with content_css .В

Just remember, when you use this option, what you see in the editor will not necessarily be what you get in your published content.

Читайте также:  Каким цветом нарисовать тени

You might do this to match only some of the editor styling with your page CSS, without pulling in the whole stylesheet. Or, so it deliberately does NOT match your published page styles. For example, if the font on your published page is quite decorative, but it’s easier to write with a more standard font. Or if you want certain coloring, or larger fonts, to assist you through the writing process, but you don’t want them appearing on the published page.

In this case, use the content_style property in your initialization script and specify your desired styles for the editor within that.

For example, you could match the colors of your site, but use a larger, non-cursive font for the editing process:

You can achieve a similar result by pulling in your stylesheet using content_css and then using content_style to override it:

Read our documentation about content_style for more information.

Updating the default font options in menus and toolbars

If you change the default font styles to values that are not in the TinyMCE menus and toolbars by default, you can add them using the font_formats, font size, and color options. Similarly, you can use these to remove other values for users, so they can only use styles that are on brand.

What next?

Why not take it one step further and customize the skins and icons for an even slicker UX. You can do this using our premium Tiny Skins and Icon Packs.В

But also stay tuned for our TinyMCE Skin Tool that makes it even easier for you to match the TinyMCE editor with the look and feel of your website or app. Our Halloween skin demonstrates the skinning capability and includes a sneak peek at the new tool too.

Don’t yet have a cloud subscription? Get a free API Key. (You’ll even get a free trial of our premium plugins!)

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Источник

Изменить стили редактора TinyMCE в Личного кабинета

Я легко поменял шрифт в редакторе TinyMCE (в админке) просто добавив в functions.php:

Но в редакторе на странице Личного кабинета WP-Recall естественно ничего не поменялось. Более того, там редактор внутри iframe, т.е. мне до него добраться не получается.

Как собственно решить данную проблему? Просто щас стоит тот шрифт, который не любят авторы сайта, они давно хотят другой(

удобный и современный инструмент для организации платного временного доступа

Тему перенес — это не проблема плагина, а ваша задача и кастомизация.

— так это хук для админки. В фронте пробуйте хук init использовать

Я в фронте успешно для себя как-то стили для TinyMCE редактора цеплял — проблем не заметил.

Otshelnik-Fm сказал(а)
Тему перенес — это не проблема плагина, а ваша задача и кастомизация.

— так это хук для админки. В фронте пробуйте хук init использовать

Я в фронте успешно для себя как-то стили для TinyMCE редактора цеплял — проблем не заметил.

add_action( ‘init’, ‘ilovenews_theme_add_editor_styles’ ); — так не работает. я пробовал все init хуки, которые задействованы на странице личного кабинета.

Источник