» » » Меняем BBcode-редактор для комментариев

Меняем BBcode-редактор для комментариев

24.03
64
41 417
Меняем BBcode-редактор для комментариев


Многие спрашивают меня: "Как сделать такой редактор комментариев как в шаблоне TwoColors?"

Специально для Вас я сегодня покажу нехитрый способ как поменять редактор комментариев в DLE.

Сразу скажу, что исходники, которые я использовал являются бесплатным jQuery-плагином, а посмотреть его можно на сайте Markitup. Но тот вариант, который предлагается для скачивания отказывался работать в DLE по непонятным причинам, поэтому пришлось "допилить" и доработать этот плагин.

В итоге мы получаем красивый, гибкий в настройке, лёгкий Bbcode-редактор для комментариев на сайте.

Инструкция


1. Для начала скачиваем прикрепленный архив и распаковвываем его в папку с шаблоном (структура папок соответствует шаблону Default от DLE 9.2).

2. Открываем main.tpl и перед </head> вставляем:
[aviable=showfull]
<link rel="stylesheet" href="{THEME}/style/markitup.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="{THEME}/js/markitup.js" ></script>
<script type="text/javascript" src="{THEME}/js/mk_set.js" ></script>
<script type="text/javascript" >
$(document).ready(function()    {
    $('textarea.forbbcode').click(function() {
        if ($("textarea.forbbcode.markItUpEditor").length === 1) {
            return false;
        } else {
            $(this).markItUp(BbcodeSettings).value = "";
        }
        return false;
    });
});
</script>
[/aviable]

Где
/markitup.css - оформление редактора
/markitup.js - ядро редактора
/mk_set.js - настройки кнопок редактора (об этом чуть ниже)
а расположенный под ссылками скрипт производит вызов редактора, и отвечает за эффект его появления.

Ну и естественно всё обрамлено в тег [aviable=showfull], чтоб не грузить браузер лишним кодом на остальных страницах.

3. Открываем addcomments.tpl и убираем оттуда тег {editor}.
Вместо этого вставляем:
<textarea name="comments" class="forbbcode" id="comments" cols="" rows=""  onclick="setNewField(this.name, document.getElementById( 'dle-comments-form' ))"></textarea>
<p><input type="checkbox" name="allow_subscribe" id="allow_subscribe" value="1" />Подписаться на комментарии</p>


Это и будет форма добавления комментария.

На этом установка завершена. А вот разработка интернет сайтов - гораздо сложнее....


Как настроить?



Совсем не сложно если руки не кривые!
Для добавления или удаления кнопок нужно редактировать файлы /markitup.css и /mk_set.js

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

- Для начала откроем файл /markitup.css и найдём там класс .bb_button:hover это стил кнопки при наведении курсора (можно прописать в любое место, но так будет попроще ориентироваться в коде в дальнейшем) ниже и будут стили кнопок, отвечающие за их оформление.
Добавим стиль для новой кнопки:
.bb_button.bold {background-image: url(../bbcodes/new/bold.png);}
только не забываем закинуть картинку в нужную папку. Кстати при оформлении кнопок я использовал иконки от FatCow

- Теперь откроем /mk_set.js и в удобное место, но ниже строки markupSet: [ добавим код, отвечающий за показ нашей кнопки:
{name:'Жирный', openWith:'[b]', closeWith:'[/b]', className:"bold"},

Думаю пояснять содержание кода не нужно, всё наглядно. главное чтобы значение параметра className соответствовало существующему классу в CSS (в нашем случаи он есть .bb_button.bold)


Вот собственно и всё. Жду Ваших комментариев.

Похожие материалы

Комментарии

Mek
Mek 24 марта 2011 11:39
Вы можете наблюдать на демо-сайте в любой новости


Во всех браузерах.
ПафНутиЙ
ПафНутиЙ 24 марта 2011 16:20
Картинки не в ту папку закинул, промахнулся немного smile
теперь всё ок.
abatsk
abatsk 26 марта 2011 11:59
Спасибище. Поставил себе.... Почитал инфу о тебе. .Павел Белоусов) У меня так у брата Имя и Фамилия))) Тоже Павел Белоусов))
ПафНутиЙ
ПафНутиЙ 27 марта 2011 08:36
Мир тесен smile
DMSolo
DMSolo 31 марта 2011 09:20
Спасибо пригодилось-)
DMSolo
DMSolo 31 марта 2011 09:22
Вопрос только, подскажите если не сложно, у меня на сайте я с мозилы не могу отправлять комментарии, пишет не заполнены все поля, а с internet explorerа могу, как исправит не подскажите? заранее спасибо
ПафНутиЙ
ПафНутиЙ 31 марта 2011 10:00
FF 3.6.13 - полёт нормальный (смотрел на демо)
Какая версия у вас? и проверяли ли вы на демо-сайте
DMSolo
DMSolo 31 марта 2011 10:46
Версия 9,2 нубл, я наверно не так выразился, проблема не в вашем редакторе, она была до него еще-)
ПафНутиЙ
ПафНутиЙ 31 марта 2011 11:19
проблема в нулле скорее всего smile
Mek
Mek 31 марта 2011 17:49
ПафНутиЙ, благодарю за очередной полезный хак! Все прекрасно работает.
Mek
Mek 1 апреля 2011 09:40
Так и не разобрался, какую функцию нужно прописать для вставки смайлов?
ПафНутиЙ
ПафНутиЙ 1 апреля 2011 09:41
либо по аналогии со вставкой цветов, либо каждый смайлик отдельной кнопкой.
Mek
Mek 2 апреля 2011 20:15
Цитата: ПафНутиЙ
либо по аналогии со вставкой цветов, либо каждый смайлик отдельной кнопкой.

Не получается smile ПафНутиЙ, если не затруднит, напишите чуть по подробнее, достаточно будет как с цветами, только вместо них сделать 6 основных смайликов.
ПафНутиЙ
ПафНутиЙ 2 апреля 2011 20:33
после
      {name:'Цвет текста', openWith:'[color=[![Color]!]]', closeWith:'[/color]', className:"color", dropMenu: [
          {name:'Оранжевый', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" },
          {name:'Красный', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" },
          {name:'Синий', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" },
          {name:'Зелёный', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" },
          {name:'Серый', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" },
          {name:'Чёрный', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" }
      ]},

вставляем:
      {name:'Смайлики', openWith:'[![:smile:]!]', className:"color", dropMenu: [
          {name:':wink:', openWith:':wink:',  className:"col1-2" },
          {name:':winked:', openWith:':winked:', className:"col1-3" },
          {name:':smile:', openWith:':smile:',  className:"col2-1" },
          {name:':lol:', openWith:':lol:',  className:"col2-3" },
          {name:':laughing:', openWith:':laughing:', className:"col3-2" },
          {name:':sad:', openWith:':sad:',  className:"col3-3" }
      ]},

только классы свои вставить нужно
Mek
Mek 12 апреля 2011 16:27
ПафНутиЙ, возник ещё один вопрос smile Возможно ли данным способом скрыть стандартную панель бб кодов в DLE и вызывать её кликом в поле ?
ПафНутиЙ
ПафНутиЙ 12 апреля 2011 21:27
впринципе - да. надо подумать, но голова сейчас не варит.
despjke
despjke 14 апреля 2011 14:49
извините что оффтоп, но как такое зделать ?

ПафНутиЙ
ПафНутиЙ 14 апреля 2011 22:23
посмотрите исх код страницы, это не сложно.
борода
борода 15 апреля 2011 08:06
хм.. спасибо.. поставил себе smile
san85ua
san85ua 18 апреля 2011 03:06
Скажите, а как сделать, чтобы форма для добавления коммента была открытой всегда, так чтобы кнопки редактирования всегда были активны (т.е. на виду). У меня лично просто изначально форма для ввода текста(комментария) в виде чистой прямоугольной формы... Только когда кликаешь по формочке - тогда и появляются кнопки редактирования. Хотелось бы, чтобы они, по умолчанию, всегда оставались на виду.... Что для этого нужно изменить в ядре, или в стилях css ??? Подскажите плиз. !!! winked
ПафНутиЙ
ПафНутиЙ 18 апреля 2011 05:28
меняем
<script type="text/javascript" >
$(document).ready(function()    {
    $('textarea.forbbcode').click(function() {
        if ($("textarea.forbbcode.markItUpEditor").length === 1) {
             return false;
        } else {
            $(this).markItUp(BbcodeSettings).value = "";
        }
         return false;
    });
});
</script>

на
<script language="javascript">
$(document).ready(function()    {
    $('#bbcode').markItUp(BbcodeSettings);
});
</script>
и будет всегда с кнопками.
san85ua
san85ua 20 апреля 2011 08:53
ПафНутиЙ,

Неа... меняю в маин тпл на то , что вы сказали - тогда вообще кнопки пропадают, и не появляются, вне зависимости от того, кликнул я по форме или нет... Ставлю обратно ((

<script type="text/javascript" >
$(document).ready(function() {
$('textarea.forbbcode').click(function() {
if ($("textarea.forbbcode.markItUpEditor").length === 1) {
return false;
} else {
$(this).markItUp(BbcodeSettings).value = "";
}
return false;
});
});
</script>
ПафНутиЙ
ПафНутиЙ 21 апреля 2011 09:28
адрес сайта есть?
san85ua
san85ua 21 апреля 2011 13:26
www.globall-soft.ru

)) Ваш шаб) winked
ПафНутиЙ
ПафНутиЙ 21 апреля 2011 14:38
Для начала надо нормально прописать CSS правила smile что бы нормально отображалось всё.
adamantis
adamantis 5 мая 2011 19:50
ПафНутиЙ, подскажите ответ на вопрос Mek
Возможно ли данным способом скрыть стандартную панель бб кодов в DLE и вызывать её кликом в поле ?

Тоже интересует!
ПафНутиЙ
ПафНутиЙ 6 мая 2011 12:10
Стандартный редактор устроен по другому, поэтому данный код не подойдёт.
а вот если этот:
<script type="text/javascript" >
$(document).ready(function(){
    var bbedit = $('.editor div[style*=bbcodes/bg.gif]');
    bbedit.addClass('notvisible');
    $('.editor textarea').click(function(){
        bbedit.slideDown();
    });
});
</script>

добавить в addcomments.tpl - то всё будет работать smile даже с "красивым" slide эффектом smile (проверено на дефолтном шаблоне, должно работать и на других)
ClapDJ
ClapDJ 16 мая 2011 21:22
ПафНутиЙ, а возможно ли реализовать, что бы когда убираешь курсор, панель с бб кодами скрывалась обратно?)
ПафНутиЙ
ПафНутиЙ 17 мая 2011 08:57
А смысл? ведь форма добавления комментария предполагает его добавление а не "поиграться" smile
ClapDJ
ClapDJ 17 мая 2011 23:02
тоже верно) но все равно, было бы интереснее smile

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.