1. Главная
  2. Блоги
  3. Блог romsk1983

Цвет фона в BUEditor, кто-нибудь знает? [Я ЗНАЮ:)]

Главные вкладки

Аватар пользователя romsk1983 romsk1983 4 декабря 2009 в 22:32

Здравствуйте!

Кто-нибудь знает код кнопки для назначения цвета фону выделенного текста?

В FCKEditore есть такая кнопочка в расширенной панели, хотелось бы иметь подобную в Буэдиторе. А вот код для определения цвета самого текста http://www.drupal.ru/node/35532

Комментарии

Аватар пользователя romsk1983 romsk1983 12 января 2010 в 0:02

А вот и решение, на основе кода http://www.drupal.ru/node/35532:

js: getColor = function(txt) {
    BUE.active.tagSelection('<span style="background-color:' + txt + ';">', '</span>', 'end');
    BUE.dialog.close();
}
var colors = new Array("#000000", "#993300", "#333300", "#003300", "#003366", "#000080", "#333399", "#333333", "#800000", "#FF6600", "#808000", "#008000", "#008080", "#0000FF", "#666699", "#808080", "#FF0000", "#FF9900", "#99CC00", "#339966", "#33CCCC", "#3366FF", "#800080", "#999999", "#FF00FF", "#FFCC00", "#FFFF00", "#00FF00", "#00FFFF", "#00CCFF", "#993366", "#C0C0C0", "#FF99CC", "#FFCC99", "#FFFF99", "#CCFFCC", "#CCFFFF", "#99CCFF", "#CC99FF", "#FFFFFF");
var colorForm = '<table border="0" cellspacing="1" cellpadding="0" class="color"><tr>';
for (i = 0; i < colors.length; i++) {
    colorForm += '<td bgcolor="' + colors[i] + '">' + '<a href="javascript:getColor(\'' + colors[i] +  '\'); ">' + '<img border="0" src="/sites/all/modules/bueditor/icons/spacer.gif" width="10" height="10" title="' + colors[i] + '" alt="' + colors[i] + '" /></a></td>';
    if ((i + 1) % 8 == 0) colorForm += '</tr><tr>';
}
colorForm += '</tr></table>';
        BUE.dialog.open('Цвет', colorForm);
Аватар пользователя postx postx 9 января 2010 в 22:11

У меня работает вот это:

js:
var form = [
{name: 'color', title: 'Font color', type: 'select', options: {'': '', red: 'red', blue: 'blue', green: 'green'}},
];
eDefTagDialog('font', form, 'Fon color', 'Ok');
Аватар пользователя romsk1983 romsk1983 12 января 2010 в 0:04

Ваш код изменяет именно цвет шрифта. Мой же код задаёт цвет заливки выделенному тексту. Код кнопки 100% рабочий. Видимо в теме сообщения записал код без использования фильтра JavaScript. Повторю ещё раз по всем правилам:

js: getColor = function(txt) {
    BUE.active.tagSelection('<span style="background-color: ' + txt + ';">', '</span>', 'end');
    BUE.dialog.close();
}
var colors = new Array("#000000", "#993300", "#333300", "#003300", "#003366", "#000080", "#333399", "#333333", "#800000", "#FF6600", "#808000", "#008000", "#008080", "#0000FF", "#666699", "#808080", "#FF0000", "#FF9900", "#99CC00", "#339966", "#33CCCC", "#3366FF", "#800080", "#999999", "#FF00FF", "#FFCC00", "#FFFF00", "#00FF00", "#00FFFF", "#00CCFF", "#993366", "#C0C0C0", "#FF99CC", "#FFCC99", "#FFFF99", "#CCFFCC", "#CCFFFF", "#99CCFF", "#CC99FF", "#FFFFFF");
var colorForm = '<table border="0" cellspacing="1" cellpadding="0" class="color"><tr>';
for (i = 0; i < colors.length; i++) {
    colorForm += '<td bgcolor="' + colors[i] + '">' + '<a href="javascript:getColor(\'' + colors[i] +  '\'); ">' + '<img border="0" src="/sites/all/modules/bueditor/icons/spacer.gif" width="10" height="10" title="' + colors[i] + '" alt="' + colors[i] + '" /></a></td>';
    if ((i + 1) % 8 == 0) colorForm += '</tr><tr>';
}
colorForm += '</tr></table>';
        BUE.dialog.open('Цвет', colorForm);
Аватар пользователя MaX0s MaX0s 16 февраля 2011 в 17:22

для Друпалки 6ой странный немного путь: "/sites/all/modules/bueditor/icons/spacer.gif"...
В общем я в скриптах не шарю, но методом научного тыка и логического мышления получил вот что...

js: getColor = function(txt) {
    BUE.active.tagSelection('<span style="background-color: ' + txt + ';">', '</span>', 'end');
    BUE.dialog.close();
}
var colors = new Array("#000000", "#993300", "#333300", "#003300", "#003366", "#000080", "#333399", "#333333", "#800000", "#FF6600", "#808000", "#008000", "#008080", "#0000FF", "#666699", "#808080", "#FF0000", "#FF9900", "#99CC00", "#339966", "#33CCCC", "#3366FF", "#800080", "#999999", "#FF00FF", "#FFCC00", "#FFFF00", "#00FF00", "#00FFFF", "#00CCFF", "#993366", "#C0C0C0", "#FF99CC", "#FFCC99", "#FFFF99", "#CCFFCC", "#CCFFFF", "#99CCFF", "#CC99FF", "#FFFFFF");
var colorForm = '<table class="bue-color"><tr>';
for (i = 0; i < colors.length; i++) {
    colorForm += '<td style="background: ' + colors[i] + ' !important;">' + '<a href="javascript:getColor(\'' + colors[i] +  '\'); ">' + '</a></td>';
    if ((i + 1) % 8 == 0) colorForm += '</tr><tr>';
}
colorForm += '</tr></table>';
        BUE.dialog.open('Цвет', colorForm);

Еще необходимо добавить в таблицу стилей:

.bue-color a {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
}

.bue-color {
  margin: 10px 0 10px 5px !important;
  padding: 0 !important;
}

.bue-color td{
  margin: 0 !important;
  padding: 0 !important;
}

Аватар пользователя MaX0s MaX0s 10 ноября 2015 в 11:47

глядя на http://ufku.com/drupal/bueditor/contributions/text-color я немного переделал скрипт...

js: getColor = function(txt) {
    BUE.active.tagSelection('<span style="background-color: ' + txt + ';">', '</span>', 'end');
    BUE.dialog.close();
}
var colors = new Array("#000", "#003", "#007", "#00b", "#00f", "#030", "#033", "#037", "#03b", "#03f", "#070", "#073", "#077", "#07b", "#07f", "#0b0", "#0b3", "#0b7", "#0bb", "#0bf", "#0f0", "#0f3", "#0f7", "#0fb", "#0ff", "#300", "#303", "#307", "#30b", "#30f", "#330", "#333", "#337", "#33b", "#33f", "#370", "#373", "#377", "#37b", "#37f", "#3b0", "#3b3", "#3b7", "#3bb", "#3bf", "#3f0", "#3f3", "#3f7", "#3fb", "#3ff", "#700", "#703", "#707", "#70b", "#70f", "#730", "#733", "#737", "#73b", "#73f", "#770", "#773", "#777", "#77b", "#77f", "#7b0", "#7b3", "#7b7", "#7bb", "#7bf", "#7f0", "#7f3", "#7f7", "#7fb", "#7ff", "#b00", "#b03", "#b07", "#b0b", "#b0f", "#b30", "#b33", "#b37", "#b3b", "#b3f", "#b70", "#b73", "#b77", "#b7b", "#b7f", "#bb0", "#bb3", "#bb7", "#bbb", "#bbf", "#bf0", "#bf3", "#bf7", "#bfb", "#bff", "#f00", "#f03", "#f07", "#f0b", "#f0f", "#f30", "#f33", "#f37", "#f3b", "#f3f", "#f70", "#f73", "#f77", "#f7b", "#f7f", "#fb0", "#fb3", "#fb7", "#fbb", "#fbf", "#ff0", "#ff3", "#ff7", "#ffb", "#fff");
var colorForm = '<table class="bue-color"><tr>';
for (i = 0; i < colors.length; i++) {
    colorForm += '<td>' + '<a href="javascript:getColor(\'' + colors[i] +  '\'); " style="background: ' + colors[i] + ' !important;">' + '</a></td>';
    if ((i + 1) % 25 == 0) colorForm += '</tr><tr>';
}
colorForm += '</tr></table>';
        BUE.dialog.open('Цвет', colorForm);

Не забываем добавить в таблицу стилей:

.bue-color a {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
}

.bue-color {
  margin: 10px 0 10px 5px !important;
  padding: 0 !important;
}

.bue-color td{
  padding: 1px 2px 0 0 !important;
}

вот иконка(взял из wow-аддона - GRID):
иконка для BUEditor