Как разрешить пользователю TinyMCE менять фон? - PullRequest
Новая
       5

Как разрешить пользователю TinyMCE менять фон?

0 голосов
/ 07 декабря 2011

У меня есть редактор TinyMCE на моем сайте. Я добавил iBrowser, чтобы люди могли загружать графику. Все нормально. Я также попытался разрешить им изменять фон сайта, который они редактируют, но безуспешно: если я добавлю в HTML div с изображением в фоновом режиме, вернусь в редактор и нажму enter, он переместит меня под изображение, а не другая строка.

Как включить для пользователей изменение фонового изображения сайта в TinyMCE?

Ответы [ 2 ]

4 голосов
/ 09 декабря 2011

Следующий код установит стиль background-image документа в редакторе (где ed является ссылкой на текущий экземпляр TinyMCE) 

var edObj = ed.dom.getRoot();

//Set the Style "background-image" to the button's color value.
ed.dom.setStyle(edObj, 'background-image', "url(some_background_image.jpg)");

Примечание , я проверял это только в Safari и Firefox на Mac.

Единственная проблема, даже если вы редактируете весь HTML-документ, используя fullpage *Плагин 1013 *, он по-прежнему не будет возвращать документ со стилем, примененным при извлечении контента с использованием getContent () .

Если вы загружаете TinyMCE с документом, который имеет background-image стиль уже определен, тогда TinyMCE отрендерит его.

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

0 голосов
/ 09 января 2014

Еще одним дополнением к принятому ответу является то, что позже вы можете получить значение, которое вы установили аналогичным образом, используя getStyle () . Очень полезно, чтобы фоновое изображение отображалось в предварительном просмотре. 

var edObj = ed.dom.getRoot();
//gets the value that looks like "url(/someImage.jpg)"
//notice getStyle() instead of setStyle
//The boolean at the end is if you want the computed style
var background = ed.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

Для всплывающего окна предварительного просмотра просто используйте: 

var edObj = tinyMCEPopup.editor.dom.getRoot();
var background = tinyMCEPopup.editor.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

Убедитесь, что он вызывается после тега <body>, иначе document.body будет неопределенным.

Надеюсь, это поможет любому, кто ищет простое решение для захвата без импорта jQuery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...