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

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

24.03
64
41 524
Меняем 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)


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

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

Комментарии

Axel
Axel 5 августа 2011 15:24
Модуль себе установил, все работает отлично. Вот только смайлов не хватает очень сильно. Руками прописывать не хочется, так как смайликов довольно много. Хотелось бы засунуть в данны сак всплываещее окно смайлов, как в стандартном редакторе.
Если кто может помочь мне в этом, прошу писать в личные сообщения на этом сайте или же в асю 545894.

Разумеется не за бесплатно прошу... :)
sharkoster
sharkoster 11 октября 2011 22:30
А в DLE 9.0 работать будет? А то денег на продление лицензии нет
ПафНутиЙ
ПафНутиЙ 11 октября 2011 22:38
будет, куда оно денется))))
sharkoster
sharkoster 12 октября 2011 17:00
Тру, в натуре работает. Пафнутий ты лучший!
PM
PM 8 ноября 2011 22:57
Mda,ot ea ne znayu cacoi klas postaviti,pomoghite please!!! no
PM
PM 9 ноября 2011 14:46
ne poluciaetza vstaviti iconki smailokov |((
ПафНутиЙ
ПафНутиЙ 9 ноября 2011 19:26
вот тут я уже отвечал на этот вопрос
yarik-1996
yarik-1996 13 декабря 2011 18:52
А как сделать это чудо в Персональных сообщениях
ПафНутиЙ
ПафНутиЙ 15 декабря 2011 18:44
По аналогии должно подойти. (либо просто посмотрите id у textarea редактора персональных сообщений и замените)
pavholm
pavholm 24 декабря 2011 11:56
А можно сделать так, чтобы при нажатии на окно, курсор там и оставался, а не нужно было нажимать второй раз?
insane
insane 30 декабря 2011 17:22
а как сделать чтобы при нажатии редактор съезжал вниз анимацией?
koshenskov
koshenskov 11 января 2012 06:34
Скажите пожалуйста,почему мне после отправки пишет заполните все поля?Капча отключена,у меня права админа и всё делал по инструкции?В чём может быть проблемма?
sharkoster
sharkoster 7 февраля 2012 16:55
Есь совершенно никчемная проблема, при попытке полного редактирования комментария, не возникает совершенно ни какого редактора и текста тоже нет.
И поскольку полное редактирование не очень-то нужно на эту проблему можно забить болт. Но можно код вызова нового редактора окружить

[aviable=showfull]
<textarea....

....дписаться на комментарии</p>
[/aviable]

а ниже приписать

[not-aviable=showfull]{editor}[/not-aviable]

таким образом новый редактор будет работать только в полной новости, а во всех остальных случаях будет старый-добрый ДЛЕ шный редактор
ПафНутиЙ
ПафНутиЙ 7 февраля 2012 21:50
Полное редактирование вроде же в админке происходит....
sharkoster
sharkoster 11 февраля 2012 13:35
В ДЛЕ 9.0 проводиться и в админке и не в админке. Так у меня на одном сайте. При нажатии кнопки изменить появляется выбор полное или быстрое редактирование. И при полном переход в админ панель не происходит

Но на другом сайте на ДЛЕ 9.4 такого нет, разработчики наверно удалили за ненадобностью. Но в любом случае если мы захотим редактировать комменты из странички http://суперсайт.дом/?do=lastcomments, то у нас с этим редактором не получится.
Хотя я уверен, что можно заставить работать его где угодно, но мое решение быстрое.
EsviLLs
EsviLLs 10 октября 2012 23:46
какую функцию нужно прописать для вставки смайлов,как в поп окне?)Спасибо)
ПафНутиЙ
ПафНутиЙ 11 октября 2012 21:03
Лучше заюзать wysibb.com
EsviLLs
EsviLLs 11 октября 2012 22:50
та нет...ну какой кодик прописать чтоб вызвать окошечко?))
ПафНутиЙ
ПафНутиЙ 12 октября 2012 09:03
а посмотреть в дефолтном шаблоне религия не позволяет ?))
EsviLLs
EsviLLs 12 октября 2012 20:28
да я смотрел... не знаю как правильно вписать....
ПафНутиЙ
ПафНутиЙ 12 октября 2012 20:37
мне, если честно, лень уже ковырять этот код.
EsviLLs
EsviLLs 12 октября 2012 20:49
ну с меня плюшки))
ПафНутиЙ
ПафНутиЙ 12 октября 2012 20:53
Меня "плюшами" не заманишь, если интересно - я делаю, нет - не буду, если мне это не надо )
EsviLLs
EsviLLs 12 октября 2012 20:55
блина... думаю многих интересует это...
ну пожалуйста ))
noffel
noffel 20 апреля 2014 12:53
коды BB-не отображаются - DLE 10.1
ПафНутиЙ
ПафНутиЙ 21 апреля 2014 09:12
адрес сайта?
artyom8819
artyom8819 3 июля 2014 21:46
При добавлении новости bbcode редактор заезжает в правую часть шаблона. Подскажите как можно немного уменьшить bbcode редактор.
http://torrent-s.com/addnews.html
Evan
Evan 9 января 2015 14:31
I can't run on dle v.10.4, please somebody fix this. :)
ПафНутиЙ
ПафНутиЙ 9 января 2015 16:38
current version is 10.3
Evan
Evan 9 января 2015 21:01
ПафНутиЙ,
Sorry, i wrote wrong. I mean v.10.3 :)

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

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

Информация

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