На нашем сайте — сайте, посвященном ошибкам, очень желательно было установить систему устранения этих самых ошибок. В Рунете для этих целей уже традиционно используется система Orphus.
Одно время скрипт этой системы успешно работал на сайте, но в один прекрасный момент вдруг перестал, и все попытки реанимировать его оказались тщетными.
Пришлось разрабатывать свой скрипт. Как оказалось, все не так-то просто. Помогли уроки JavaScript, ну и, конечно же, Google с Яндексом. В итоге, при сложении нескольких найденных блоков скрипта и почерпнутых из учебника знаний получился вполне рабочий модуль для проверки ошибок на сайте. Для его работы необходима поддержка PHP на хостинге.
Последняя версия скрипта 4.1 основана на плагине typo к CMS Drupal. Автор плагина Роман Архаров. В этой версии появилась функция отображения окружающего ошибку текста, сама же ошибка выделяется красным.
Модуль состоит из четырех файлов: mistakes.js, mistakes.css, mistakes.php и overlay.png.
Скачать можно отсюда.
Чтобы его подключить, нужно поместить эти файлы в директорию своего сайта, например в папку «mistakes» и на всех страницах сайта между тегами «head» вставить две строки:
<script type="text/javascript" charset="windows-1251" src="/путь до файла/mistakes.js"></script>
<link href="/путь до файла/mistakes.css" rel="stylesheet" type="text/css" />
При этом после src=» и href=» нужно прописать путь к файлу mistakes.js и mistakes.css соответственно.
Файл mistakes.js. В этом файле нужно изменить значение переменной misphploc (то, что между кавычками «») на путь к файлу mistakes.php.
Файл mistakes.php.
Здесь нужно изменить значение нескольких переменных:
$title — заголовок сообщения,
$to, — email, на который будут отправляться сообщения,
$mymail — email, от кого пришло сообщение.
Ну и, конечно же, для того чтобы посетитель знал, что он может посодействовать в исправлении ошибок, нужно разместить на страницах вашего сайта, например, такую фразу:
На сайте работает система проверки ошибок.
Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.
Также открыть окошко отправки сообщения можно, кликнув по ссылке:
Отправить сообщение об ошибке
Код ссылки:
<a href="javascript:void(0)" onclick="PressLink()">Отправить сообщение об ошибке</a>
Исходная кодировка скрипта windows-1251. Если ваш сайт работает на utf-8, то создайте в папке со скриптом файл .htaccess и добавьте в нем строку:
AddDefaultCharset windows-1251
Также вам скорее всего нужно будет переформатировать в utf-8 файл mistakes.js
Скачать модуль mistakes-4.1.zip (zip архив 7Kb).
Если вас по каким-либо причинам не устраивает последняя версия, попробуйте предыдущую — 3.3.
mistakes3.3.zip (zip архив 6Kb).
Успешной вам борьбы с опечатками))
Вопросы и пожелания оставляйте в комментариях.
Всем привет! Давно не писал потому, что уже наступило жаркое лето, и я старался поменьше сидеть за компом, занимался спортом и принимал солнечные ванны. Сегодняшняя статья посвящена модулю: «Заметили Ошибку? — нажимай Ctrl + Q». Мне пришлось ввести данный модуль в связи с критикой моих посетителей, в частности Николая, за многочисленные ошибки по русскому языку. И этот модуль себя хорошо зарекомендовал. Уже множество ошибок исправлено благодаря нему и вам, неравнодушным читателям. Думаю, и Вам он может пригодится на вашем сайте. Также сегодня посоветовался с одним ГУРУ веб-программирования, который помог избавится от некрасивых мест в коде.
Так что, поехали!
Формулируем задачу: При обнаружении пользователем ошибки он выделяет данный текст и нажимает CTRL + Q. Всплывает модальное окно с текстовым полем, где уже находится выделенный текст, и кнопкой отправить. Пользователь поправляет ошибку в тексте и нажимает отправить. Нам на почту приходит: адрес страницы с которой произошла отправка формы, выделенный текст и поправленный вариант. Можно и не на почту сделать, а в админку CMS. Но у меня пока админка CMS не доделана, поэтому будем пока отсылать на почту.
Скрипт использует библиотеку jquery-1.9.0.min.js
Отслеживаем нажатие CTRL+Q
var isCtrl = false;
$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
if(e.which == 17) isCtrl=true;
if(e.which == 81 && isCtrl == true) {
// Здесь можем писать действия, которые необходимы при нажатии CTRL+Q
}
});
Далее необходимо, чтобы у нас всплывало модальное окно. Поискав немного в интернете, нашёлся отличный вариант. В него сразу прописываем форму с текстовым полем и кнопкой отправить.
Вставляем перед закрывающимся тегом </body>.
<div id="modal_form"> <!-- Сaмo oкнo --> <span id="modal_close">X</span> <!-- Кнoпкa зaкрыть --> <!-- Тут любoе сoдержимoе --> <div id='content_modal_error'> <h2 align='center' style='color:#490301;'>Опишите, пожалуйста, ошибку</h2> <form name='from_error' id='from_error'> <textarea id='modal_form_text' align='left' maxlength="500"> </textarea> <br><br> <input type='submit' value='Отправить' class='button13' name='sub_from_error' style='margin-left:260px;'> </form> </div> </div> <div id="overlay"> </div><!-- Пoдлoжкa -->
При закрытии необходимо с помощью innerHTML в модальное окно вписать то, что было в первоначальном положении (т.е. нашу форму), иначе при повтором запуске у пользователя могут остаться предыдущие сообщения, например, об успешной отправке формы.
Скрипт для модального окна + делаем в фокусе текстовое поле.
... $('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку function(){ // пoсле выпoлнения предыдущей aнимaции $('#modal_form') .css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none; .animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз // Делаем текстовое поле в фокусе. var modal_form_text = document.getElementById("modal_form_text"); modal_form_text.focus(); }); /* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */ $('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке $('#modal_form') .animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх function(){ // пoсле aнимaции $(this).css('display', 'none'); // делaем ему display: none; $('#overlay').fadeOut(400); // скрывaем пoдлoжку } ); var content_modal = document.getElementById("content_modal_error"); content_modal.innerHTML = "<h2 align='center' style='color:#490301;'>Опишите, пожалуйста, ошибку</h2><form name='from_error' id='from_error'><textarea id='modal_form_text' align='left' maxlength='500'></textarea><br><br><input type='submit' value='Отправить' class='button13' name='sub_from_error' style='margin-left:260px;'></form>"; }); ...
Стили (Также прикладываю стили для кнопки):
#modal_form {
width: 700px;
height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
left: 50%; /* пoлoвинa экрaнa слевa */
margin-top: -150px;
margin-left: -350px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */
display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
z-index: 9999; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
padding: 20px 10px;
}
/* Кнoпкa зaкрыть */
#modal_form #modal_close {
width: 21px;
height: 21px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
/* Пoдлoжкa */
#overlay {
z-index:9998; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
position:fixed; /* всегдa перекрывaет весь сaйт */
background-color:#000; /* чернaя */
opacity:0.8; /* нo немнoгo прoзрaчнa */
-moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
filter:alpha(opacity=80);
width:100%;
height:100%; /* рaзмерoм вo весь экрaн */
top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
left:0;
cursor:pointer;
display:none; /* в oбычнoм сoстoянии её нет) */
}
#modal_form_text {
margin-top:20px;
margin-left:50px;
width:600px;
height:150px;
border:1px solid gray;
resize: none;
padding:5px;
}
input.button13 {
display: inline-block;
width: 15em;
font-size: 80%;
color: rgba(255,255,255,.8);
text-shadow: #543e3c 0 1px 2px;
text-decoration: none;
text-align: center;
line-height: 1.1;
white-space: pre-line;
padding: .7em 0;
border: 1px solid;
border-color: #72140c #72140c #72140c #72140c;
border-radius: 6px;
outline: none;
background: #60a3d8 linear-gradient(#3c0b06, #580f08 50%, #72140c);
box-shadow: inset rgba(255,255,255,.5) 1px 1px;
height:40px;
}
input.button13:first-line{
font-size: 140%;
font-weight: 700;
}
input.button13:hover {
color: rgb(255,255,255);
background-image: linear-gradient(#3c0b06, #580f08 50%, #72140c);
}
input.button13:active {
color: rgb(255,255,255);
border-color: #2970a9;
background-image: linear-gradient(#a40d00, #a40d00);
box-shadow: none;
}
Отлично! Будем использовать для получении информации о выделенном тексте пользователя функцию:
function getSelectedText()
{
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
}else if (document.getSelection) {
text = document.getSelection().toString();
}else if (document.selection) {
text = document.selection.createRange().text.toString();
}
return text;
}
Таким образом, помещаем в текстовое поле то, что именно выделил пользователь:
...
if(e.which == 17) isCtrl= true;
if(e.which == 81 && isCtrl == true) {
TextSelect = getSelectedText();
$( '#modal_form_text').val(TextSelect);
...
}
...
Пишем обработчик события отправки формы. С помощью ajax отправляем три параметра: Выделенный текст, исправленный вариант с текстового поля модального окна и URL страницы (с которой отослали сообщение).
Как только отправили, если сервер немного тормозит — ставим гиф-картинку с крутящимся колёсиком.
$('#from_error').submit( function(){ var url = window.location.pathname; var modal_form_text = $('#modal_form_text').val(); $.post('/ajax/detect_error.php', {TextSelect: TextSelect, url: url, modal_form_text: modal_form_text}, detect_func); var content_modal = document.getElementById("content_modal_error"); content_modal.innerHTML = "<br><br><br><center><img src='/images/ajax_loader_red_512.gif' width='150' height='150'></center>"; // Функция, которая запускается при ответе сервера при ajax запросе. function detect_func(data) { var data_str = ""; if(data == "") { data_str = "<center><br><br><br><Br><span style='color:red;'>Идут технические работы - попробуйте позже</span> </center>"; } else { data_str = data.toString(); } var content_modal = document.getElementById("content_modal_error"); content_modal.innerHTML = data_str; } return false; });
Ловим с помощью php скрипта ajax запрос:
if(isset($_POST['TextSelect']) && isset($_POST['url']) && isset($_POST['modal_form_text'])) { $_POST['TextSelect'] = trim($_POST['TextSelect']); $_POST['url'] = trim($_POST['url']); $_POST['modal_form_text'] = trim($_POST['modal_form_text']); $_POST['TextSelect'] = strip_tags($_POST['TextSelect']); $_POST['url'] =strip_tags($_POST['url']); $_POST['modal_form_text'] = strip_tags($_POST['modal_form_text']); $_POST['TextSelect'] = substr($_POST['TextSelect'], 0, 500); $_POST['url'] = substr($_POST['url'], 0, 255); $_POST['modal_form_text'] = substr($_POST['modal_form_text'], 0, 500); $from = "Content-type: text/plain; charset=utf-8"."\r\n"; $from = $from.'From: xxx@gmail.com'; $subject = "Сайт yyy Присалил ошибку" ; $message = "\n\n URL:".$_POST['url'] ; $message = $message."\n\n Выделенный текст:".$_POST['TextSelect']; $message = $message."\n\n Описание ошибки:".$_POST['modal_form_text']; if (!mail( "zzz@yandex.ru", $subject, $message, $from)) { echo "Письмо не отправлено. Ошибка 1. Сообщите Администратору."; exit; } else { echo "<br><Br><br><Br><br><h2 align='center' style='color:#742c2c;'>Спасибо за ваше замечание! В ближайшее время я его рассмотрю.</h2>"; } }
Именно он и отсылает данные на E-mail: zzz@yandex.ru
Вы должны сами проверить БЕЗОПАСНОСТЬ данного скрипта. В статье показаны лишь идеи.
Можно вместо отправки email добавлять сообщения в БАЗУ ДАННЫХ.
Файлы для данного скрипта:
Скачать модуль «Нашли ошибку — нажимай Ctrl + Q»
Счастливого программирования!
Доброго времени суток.
В данной статье расскажу как реализовать функционал, который бы позволял пользователям сайта сообщать контент-менеджерам найденные о найденной на сайте ошибке. Ошибка будет высылаться почтовым уведомлением.
Интерфейсные окна будут отрисованы с помощью новой JS-библиотеки продукта.
Итак, пользователь находит на сайте ошибку, выделяет текст, нажимает Ctrl+Enter и получает форму:
Вся логика заключена в компоненте feedback.error, который можете скачать
здесь.
Т.к. сообщение об ошибке будет отправлено на почту, то потребуется создать новый почтовый тип:
и шаблон к нему:
Всё, после этого механизм должен заработать.
Теперь подробнее (так сказать для разработчиков), что находится в скрипте script.js:
function SendError(event, formElem)
Объявление функции-обработчика, которую мы повесили на <body>
if((event.ctrlKey) && ((event.keyCode == 0xA)||(event.keyCode == 0xD)))
Ждём нажатия Ctrl+Enter.
var Dialog = new BX.CDialog({
title: "На сайте обнаружена ошибка!!",
head: "В чём заключается ошибка?",
content: '<form method="POST" id="help_form" action="/bitrix/templates/.default/send_error.php">\
<textarea name="error_desc" style="height: 78px; width: 374px;"></textarea>\
<input type="hidden" name="error_message"value="'+getSelectedText()+'">\
<input type="hidden" name="error_url" value="'+window.location+'">\
<input type="hidden" name="sessid" value="'+BX.bitrix_sessid()+'"></form>',
resizable: false,
height: '198',
width: '400'});
Определяем параметры будущего окна и его содержимого.
Определяем набор кнопок:
Dialog.SetButtons([
{
'title': 'Отправить',
'id': 'action_send',
'name': 'action_send',
'action': function(){
BX.ajax.submit(BX("help_form"));
this.parentWindow.Close();
}
},
{
'title': 'Отмена',
'id': 'cancel',
'name': 'cancel',
'action': function(){
this.parentWindow.Close();
}
},
]);
и выводим окно:
Функция getSelectedText() получает выделенный мышью текст.
Отправка письма идёт в тексте файла component.php:
if (check_bitrix_sessid() && $_SERVER['REQUEST_METHOD'] == "POST" && !empty($_REQUEST["error_message"]) && !empty($_REQUEST["error_url"]))
{
$arMailFields = Array();
$arMailFields["ERROR_MESSAGE"] = trim ($_REQUEST["error_message"]);
$arMailFields["ERROR_DESCRIPTION"] = trim ($_REQUEST["error_desc"]);
$arMailFields["ERROR_URL"] = trim ($_REQUEST["error_url"]);
CEvent::Send("BX", SITE_ID, $arMailFields);
}
Updated:
http://dev.1c-bitrix.ru/community/web…3448#13448
Плагин позволяет получать от посетителей сайта уведомления о ошибках на сайте.
Визуально плагин выглядит так:
Скрипты плагина расположены в директории /javascript/jquery.yapro.Spelling/
Чтобы подключить данный плагин нужно:
1. перед тегом вписать следующее:
<script language=»Javascript» type=»text/javascript» src=»/javascript/jquery.yapro.Spelling/latest.js»></script>
<script language=»Javascript» type=»text/javascript» src=»/javascript/jquery.yapro.alert/latest.js»></script>
<link href=»/javascript/jquery.yapro.alert/latest.css» type=»text/css» rel=»stylesheet»>
2. Завести себе jabber-аккаунт, например на сайте jabber.ru и вписать данные в файл /jabber.php
К примеру, если Вы завели аккаунт sergey@jabber.ru
$jabber = array(‘server’=>’jabber.ru’, ‘port’=>5222, ‘nikname’=>’sergey@jabber.ru’, ‘password’=>’sergey12345’, ‘toJID’=>’sergey@jabber.ru’);
3. Настроить sergey@jabber.ru у себя на ПК (в любом клиенте, например Miranda, QIP и т.п.)
Проверьте работу скрипта на сайте выделив текст и нажав Ctrl + Enter, после чего получите сообщение об ошибке прямо в чат-клиент.
4. В любое место страницы вставить HTML-код подсказки, что на сайте действует такой плагин:
<div style=»line-height:23px»>Ошибка в тексте? Выделите её мышкой и нажмите:
<span class=»keyButton»>Ctrl</span> + <span class=»keyButton»>Enter</span>
</div>
5. CSS-код советую применять такой:
SPAN.keyButton {
background:none repeat scroll 0 0 #ECECEC;
border-color:#FFFFFF #BBB8AB #BBB8AB #FFFFFF;
border-style:solid;
border-width:1px;
padding:1px 4px;
}
Оповещение на E-mail
Если Вы не хотите настраивать Jabber или у вас просто не получается его настроить, Вы можете получать оповещение на электронный ящик. Для этого просто создайте в директории /javascript/jquery.yapro.Spelling/ файл email.php в котором напишите свой E-mail, например так:
<?php
$email = ‘love@mal.ru’;
?>
По своему опыту скажу, очень много людей подсказывают ошибки на сайте, за это большое им спасибо.
12.01.2011 08:38
Скрипт состоит из четырех файлов: mistakes.js, mistakes.css, mistakes.php и overlay.png.
Скачать можно здесь: mistakes3.3.zip
Чтобы его подключить, нужно поместить эти файлы в директорию своего сайта, например в папку «mistakes» и на всех страницах сайта между тегами
<head> </head>
вставить две строки:
<script type="text/javascript" src="/путь до файла/mistakes.js"></script>
<link href="/путь до файла/mistakes.css" rel="stylesheet" type="text/css" />
При этом после src=» и href=» нужно прописать путь к файлу mistakes.js и mistakes.css соответственно.
Файл mistakes.js. В этом файле нужно изменить значение переменной misphploc (то, что между кавычками «») на путь к файлу mistakes.php.
var loc = window.location;
var mis;
nN = navigator.appName;
function createMessage() {
// Измените следующую строку. Здесь нужно указать путь к файлу mistakes.php
var misphploc = '/mistakes/mistakes.php'
var container = document.createElement('div')
var scroll = dde.scrollTop || db.scrollTop;
var mtop = scroll + 100 + 'px';
var mleft = Math.floor(dde.clientWidth/2) - 175 + 'px';
container.innerHTML = '<div id="mistake">\
<div id="m_window" style="top:' + mtop + '; left:' + mleft + '";>\
<iframe frameborder="0" name="mis" id="m_frame" src="' + misphploc + '"></iframe></div> \
</div></div>'
return container.firstChild
}
Файл mistakes.php.
Здесь нужно изменить значение нескольких переменных:
$title — заголовок сообщения,
$to, — email, на который будут отправлятся сообщения,
$mymail — email, от кого пришло сообщение.
В файле есть коментарии что где редачить.
у и, конечно же, для того чтобы посетитель знал, что он может посодействовать в исправлении ошибок, нужно разместить на страницах вашего сайта, например, такую фразу:
На сайте работает система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.
Также открыть окошко отправки сообщения можно, кликнув по ссылке:
Отправить сообщение об ошибке
Код ссылки:
<a href="javascript:void(0)" onclick="PressLink()">Отправить сообщение об ошибке</a>
Теперь немного приукрасим наш текст
В нужном месте вставляем вот етот код
<div style="margin-top:5px; padding-left:15px;"><em><b><a class="tooltipz" href="/">Нашли ошибку в тексте сайта?<span class="custom help"><img width="48" height="48" alt="помощь" src="/templates/_default_/images/helpz.png" /><em>Нашли ошибку?</em>Выделите ошибочный текст мышкой и нажмите <b>Ctrl</b> + <b>Enter</b></span></a></b></em></div>
затем в файл styles.css добавим кусочек кода
/******************************* нашли ошибку *********************************/
.tooltipz {
outline: none;
cursor: help; text-decoration: none;
position: relative;
margin-left:10px;
}
.tooltipz span {
margin-left: -999em;
position: absolute;
}
.tooltipz:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltipz:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltipz:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.tooltipz:hover b {
font-weight: bold;
color: #FF7F50;
font-size:1.2em;
}
.custom { padding: 0.5em 0.8em 0.8em 2em; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
затем по пути /templates/_default_/images/ закидаем картинку.Картинка прикрепленна к теме
также прикрепляю архивчик с архивом test_60k2h.rar в котором тест страничка с видом нашей украшеной надписи