Скрипт ошибка в тексте, выделите ее мышкой и нажмите: CTRL+Enter

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

Что нужно для того, что скрипт полноценно работал?

1. У вас должна быть создана почтовая форма, как создать форму можно прочесть в инструкции.
2. В форме должно быть активировано лишь 4 поля (Email, тема, сообщение и ссылка). Нам больше и не нужно, в дополнение email мы пропишем по умолчанию, чтобы пользователь не заполнял это поле и скроем его так как нужно сократить посетителю максимально телодвижения с его стороны, чтобы он быстро мог сообщить об ошибке. В поле ссылка будет автоматически добавляться ссылка на страницу с которой пользователь отправил сообщение об ошибке, чтобы мы понимали где обнаружена ошибка и что исправлять.

Какой должен быть шаблон в форме?

Мой шаблон в почтовой форме для уведомления об ошибке выглядит так:

<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr style="display:none;"><input type="hidden" type="text" name="f1" size="30" style="width:95%;" maxlength="70" value="[email protected]" placeholder="E-mail"></tr>
<tr style="display:none;"><input type="hidden" type="text" name="f2" size="30" style="width:95%;" maxlength="70" value="Сообщить об ошибке"></tr>
<tr><textarea rows="7" class="form-control" name="f3" cols="30" style="width:95%;" required placeholder="Опишите, пожалуйста, подробно где вы нашли ошибку и как должно быть правильно."></textarea></tr>
<tr><input id="location" type="hidden" type="text" class="form-control" name="f4" size="30" style="width:95%;" maxlength="70" placeholder="ссылка на страницу"></tr>
<tr><input class="form-control" type="submit" value="Отправить" style="margin-top: 10px;"></tr>
</table>

<script type="text/javascript">$('#location').val(location.href);</script> 

Именно поле name="f3" пользователи будут автоматически заполнять при отправке сообщения об ошибке.

Установка стилей для почтовой формы

Пропишите в таблицу стилей CSS следующие стили:

/************form contact**************/
.overlay { top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; background-color: rgba(0, 0, 0, 0.65); position: fixed; cursor: default; }
.overlay:target {display: block;}
.popup { top: -100%; right: 0; left: 50%; font-size: 14px; z-index: 20; margin: 0; width: 85%; min-width: 320px; max-width: 600px; position: fixed; padding: 15px; border: 1px solid #383838; background: #fefefe; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font: 14px/18px 'Tahoma', Arial, sans-serif; -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transform: translate(-50%, -500%); -ms-transform: translate(-50%, -500%); -o-transform: translate(-50%, -500%); transform: translate(-50%, -500%); -webkit-transition: -webkit-transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; transition: transform 0.6s ease-out; }
.overlay:target+.popup { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 20%; }
.close { top: -20px; right: -20px; width: 30px; height: 30px; position: absolute; padding: 0; border: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba(61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; text-align: center; text-decoration: none; font: 13px/20px 'Tahoma', Arial, sans-serif; font-weight: bold; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; }
.close:before { color: rgba(255, 255, 255, 0.9); content: "X"; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); font-size: 12px; position: relative; top: 3px; }
.close:hover { background-color: rgba(252, 20, 0, 0.8); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
.popup img {width: 100%;height: auto;}
.pic-left, .pic-right {width: 25%;height: auto;}
.pic-left {float: left;margin: 5px 15px 5px 0;}
.pic-right {float: right;margin: 5px 0 5px 15px;}
.popup embed, .popup iframe { top: 0; right: 0; bottom: 0; left: 0; display:block; margin: auto; min-width: 320px; max-width: 600px; width: 100%; }
.popup h2 { margin: 0; color: #008000; padding: 5px 0px 10px; text-align: left; text-shadow: 1px 1px 3px #adadad; font-weight: 500; font-size: 1.4em; font-family: 'Tahoma', Arial, sans-serif; line-height: 1.3; }
.popup p {margin: 0; padding: 5px 0}
/**************************************/

Установка формы которая будет отправлять сообщение об ошибке

Перейдите в шаблон страницы материала и комментариев в модуле где должна работать форма и перед тегом </body> установите код:

<a href="#x" class="overlay" id="erorr"></a> <div class="popup"> $MFORM_N$ <a class="close"title="Закрыть" href="#close"></a> </div>

вместо значения N пропишите номер вашей формы которую вы создали для уведомлений об ошибке.

Установка скрипта для вставки текста с ошибкой в форму при нажатии комбинации CTRL+Enter

В шаблоне страницы материала и комментариев модуля где должна работать форма, перед тегом </body> установить такой скрипт:

<script type="text/javascript">
$(document).on('keydown', 'body', function(event) {
 if ((event.keyCode == 10 || event.keyCode == 13) && event.ctrlKey) {
 var selectedText = '';
 if (window.getSelection) {
 var selection = window.getSelection();
 selectedText = selection.toString();
 } else if (document.selection) {
 var range = document.selection.createRange();
 selectedText = range.htmlText;
 }
 if ( selectedText != '' ) selectedText = 'В данном тексте есть ошибка - "' + selectedText + '"';
 $('.popup form textarea[name="f3"]').text(selectedText).val(selectedText).focus().blur();
 location.href = location.origin + location.pathname + '#erorr';
 }
})
</script>

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

Выводы!

В результате завершения установки данного решения которое я описал выше, при выделении текста с ошибкой и нажатии комбинации CTRL+ENTER у посетителя сайта будет автоматически на странице сайта открываться почтовая форма в которой вставлен текст с ошибкой. Для завершения процесса уведомления об ошибке, посетителю будет достаточно просто нажать на кнопку "Отправить" и администратор сайта получит сообщение с ошибкой в статье и сможет ее исправить.