Как добавить форму «Сообщить об ошибке» при выделении текста на Tilda
С помощью этой модификации пользователи сайта могут быстро сообщить об ошибке на странице. Выдели текст и нажми Ctrl+Enter — откроется форма, а фрагмент автоматически вставится в сообщение. Отлично подойдет для блогов, новостных сайтов и интернет-магазинов, чтобы собирать правки и замечания к описаниям.
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD138--><script>
(function () {
var tcIsPc = (function(){
try{
var tcW = Math.max(document.documentElement.clientWidth||0, window.innerWidth||0);
var tcTouch = (('ontouchstart' in window) || (navigator.maxTouchPoints||0) > 0);
if (tcW < 960) return false;
if (tcTouch) return false;
return true;
}catch(e){ return false; }
})();
if (!tcIsPc) return;
function TiCodeTcOptEdit(){ return (0 + 0); }
function TiCodeTiHash(){ return '#ti-correction'; }
function TiCodeFindField() {
return document.querySelector('textarea[name="correction"], [data-field-name="correction"] textarea');
}
function TiCodeSelTxt() {
var tcS = window.getSelection ? String(window.getSelection()) : '';
return (tcS || '').trim();
}
function TiCodeModeApply() {
var TCDta = TiCodeFindField();
if (!TCDta) return;
var tiAllow = TiCodeTcOptEdit();
if (tiAllow === 0) {
TCDta.readOnly = true;
TCDta.disabled = true;
TCDta.style.opacity = '0.6';
TCDta.style.pointerEvents = 'none';
} else {
TCDta.readOnly = false;
TCDta.disabled = false;
TCDta.style.opacity = '';
TCDta.style.pointerEvents = '';
}
}
function TiCodeClearTa() {
var tcTa = TiCodeFindField();
if (!tcTa) return;
var TCDwasDisabled = tcTa.disabled;
var tiWasRO = tcTa.readOnly;
tcTa.disabled = false;
tcTa.readOnly = false;
tcTa.value = '';
tcTa.dispatchEvent(new Event('input', { bubbles: true }));
tcTa.dispatchEvent(new Event('change', { bubbles: true }));
tcTa.disabled = TCDwasDisabled;
tcTa.readOnly = tiWasRO;
}
function TiCodeSetTa(tcTxt) {
var tildatcTa = TiCodeFindField();
if (!tildatcTa) return;
tildatcTa.disabled = false;
tildatcTa.readOnly = false;
tildatcTa.value = tcTxt;
tildatcTa.dispatchEvent(new Event('input', { bubbles: true }));
tildatcTa.dispatchEvent(new Event('change', { bubbles: true }));
tildatcTa.focus();
TiCodeModeApply();
}
function TiCodeEnsureTrigger() {
var tcHash = TiCodeTiHash();
var tcTr = document.querySelector('a[href="' + tcHash + '"]');
if (tcTr) return tcTr;
var tcA = document.createElement('a');
tcA.href = tcHash;
tcA.style.cssText = 'position:fixed;left:-9999px;top:-9999px;opacity:0;pointer-events:none;';
tcA.setAttribute('aria-hidden','true');
tcA.className = 'ticodeHiddenPopupTrigger';
document.body.appendChild(tcA);
return tcA;
}
function TiCodePopupOpen() {
var tcHash = TiCodeTiHash();
if (location.hash !== tcHash) location.hash = tcHash.replace('#', '');
var tcTr = document.querySelector(
'a[href="' + tcHash + '"], a[href="#popup:' + tcHash.replace('#','') + '"]'
);
if (!tcTr) tcTr = TiCodeEnsureTrigger();
if (tcTr) tcTr.click();
var tcPop = document.getElementById(tcHash.replace('#', ''));
if (tcPop) {
tcPop.style.display = 'block';
tcPop.classList.add('t-popup_show');
}
}
document.addEventListener('keydown', function (e) {
var tcEnter = (e.key === 'Enter' || e.keyCode === 13);
var tcCtrl = (e.ctrlKey || e.metaKey);
if (!tcEnter || !tcCtrl) return;
var TCDsel = TiCodeSelTxt();
if (!TCDsel) return;
e.preventDefault();
TiCodePopupOpen();
setTimeout(function () {
TiCodeClearTa();
TiCodeSetTa(TCDsel);
}, 250);
});
document.addEventListener('DOMContentLoaded', function () {
TiCodeModeApply();
});
})();
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
КОПИРОВАТЬ КОД
Отчет об ошибке
1. Создаем popup форму BF502N и указываем в контенте ссылку для открытия #ti-correction
2. Добавляем в форме "Поле ввода в несколько строк" указываем имя переменой correction Добавляем второе многострочное поле (с другой переменной) чтобы пользователь мог написать свой вариант текста. При необходимости можно добавить и любые другие поля. Важно: поле с переменной correction должно быть одно, именно в него подставляется выделенный фрагмент текста.
3. Указываем дополнительные настройки в генераторе: Блокировка поля ошибки — если включено, то текст ошибки в поле нельзя будет изменить; Переменная поля ошибки — можно указать свою переменную для поля ошибки.
5. Копируем готовый код из генератора и вставляем в HTML блок T123. Блок кода размещаем под блоком формы.
Примечание: мод работает только на ПК. Чтобы открыть форму, выделяем текст на странице и нажимаем Ctrl+Enter (на Mac — Cmd+Enter). Если текст не выделен, форма не откроется.
Съешь ещё этих мягких французских булок, да выпей чаю!
Выдели любой фрагмент текста на странице и нажми Ctrl+Enter (Cmd+Enter на MAC)