2016-06-06 5 views
0

Я хочу, чтобы мой пользователь мог динамически устанавливать цвет фона wp_editor на экране «Редактировать страницу».WordPress: изменить цвет фона wp_editor admin?

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

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

В качестве теста, я попытался изменения цвета фона редактора по телефону:

tinyMCE.init({ 
    selector: 'textarea', 
    content_style: "div { background-color: #000000; }", 
}); 

Это не сработало.

ответ

0

Настройка content_style работает над элементами внутри «тела» HTML-документа в TinyMCE - то, что вы действительно хотите сделать, делает фон <body> разного цвета.

Чтобы сделать этот взгляд на настройку content_css для инициализации:

tinymce.init({ 
    selector: 'textarea', 
    ... 
    content_css : "CSS/content.css" 
}); 

Это позволяет загрузить внешний файл CSS для использования внутри TinyMCE. Затем в файле content.css вы можете сделать что-то вроде этого:

body { 
    . 
    . 
    background-color: gray; 
} 

Теперь цвет фона самого редактора будет серого цвета (на основании приведенного выше примера).

Если вы используете content_css, вам действительно не нужно content_style, так как вы можете поместить все свои CSS во внешний файл CSS.

EDIT:

Если content_css не работает, вы можете попробовать использовать событие OnInit и обновить CSS:

tinymce.init({ 
    selector: 'textarea', 
    setup: function (editor) { 
    editor.on('init', function() { 
     editor.getBody().style.backgroundColor = "#FFFF66"; 
    }); 
    ... 
}) 

... что приводит к следующим образом:

enter image description here

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

Вам понадобится способ передать этот цвет в объект конфигурации (переменная JS будет работать), но это также должно выполнить эту работу.

+0

Цвет фона должен быть динамическим, поэтому полагаться на предопределенную таблицу стилей не получится. Поскольку пользователь выбирает из набора цветов, фон должен быть любым количеством цветов. – HWD

+0

@HWD - см. Мое редактирование. Возможно, это сработает для вашего случая использования? –

+0

Это похоже на изменение цвета фона текстового поля excerpt, а не на основную область текста. Как мне настроить таргетинг? – HWD

0

Оказывается, все, что мне нужно было сделать это:

tinyMCE.get(0).getBody().style.backgroundColor = color; 

Я использую WordPress' встроенный Iris Color Picker. Вот полный контакт:

$('.colorpicker').iris({ 
    change: function(event,ui){ 
     tinyMCE.get(0).getBody().style.backgroundColor = ui.color.toString(); 
    } 
}); 

 Смежные вопросы

  • Нет связанных вопросов^_^