Запрос на исправление ошибки в тексте

140
08 декабря 2019, 04:00

Требуется найти готовый сервис. Реализация может быть как для Angular (TypeScript), так и обычный JS модуль.

Задача: Необходимо получить от пользователей отзыв с просьбой исправить текст на сайте. Для упрощения взаимодействия пользователей с разработчиками требуется механизм выделения текста и предложения варианта исправления.

Алгоритм:

  1. Выделение текста с ошибкой
  2. Нажатие горячих кнопок (CTRL\SHIFT\ALT + что-нибудь)
  3. Появляется окно с текстовым полем, куда пользователь вводит исправленный вариант текста
  4. Данные отправляются на сервер, где администратор может просмотреть запросы

Найдены такие примеры (1 и 2), но в них отсутствует вызов по горячим клавишам и выделяется не текст, а HTML элемент. Необходимо что-то похожее на это.

Answer 1

Вот так примерно? :)

Upd: припаял jsonstore.io, сохраненные данные можно глянуть тут

window.addEventListener('keydown', (e) => { 
  if (!e.ctrlKey || e.code !== "Enter") 
    return; 
  let form = document.querySelector('div.form'); 
  form = form || document.createElement('div'); 
  form.classList.add('form'); 
  form.innerHTML = ` 
    <textarea>${getSelectionText()}</textarea> 
    <button onclick="submit()">send</button> 
  `; 
  document.body.append(form) 
}) 
 
function getSelectionText() { 
    var text = ""; 
    if (window.getSelection) { 
        text = window.getSelection().toString(); 
    } else if (document.selection && document.selection.type != "Control") { 
        text = document.selection.createRange().text; 
    } 
    return text; 
} 
 
function submit() { 
  let form = document.querySelector('div.form'); 
  post(form.querySelector('textarea').textContent); 
  form.remove(); 
} 
 
function rnd(i) {     
    var rnd = ''; 
    while (rnd.length < i) { 
        rnd += Math.random().toString(36).substring(2); 
    } 
    return rnd.substring(0, i); 
}; 
 
function post(text) { 
  let jsonstore = 'https://www.jsonstore.io/36714770fba88322c1ab00e45dd7b38f46a873180320ad3ac5850a82a4d8118d/'; 
   
    let key = rnd(55); 
    fetch(jsonstore + 'record/'+key, { 
      headers: { 
        'Content-type': 'application/json' 
      }, 
      method: 'POST', 
      body: JSON.stringify({ text: 'text'}), 
    }); 
  
}
.form { 
  border: 1px solid black; 
  position: absolute; 
  width:200px; 
  height:150px; 
  top:50vh; 
  left:50vw; 
  transform: translate(-50%,-50%); 
  padding: 4px; 
} 
 
textarea { 
  width: 190px; 
  height: 100px; 
}
Выделить текст здесь и нажать ctrl+enter

READ ALSO
Как использовать JS библиотеки без NodeJS

Как использовать JS библиотеки без NodeJS

В настоящее время, куда не глянь, любая полезная библиотека подключается к проекту npm install

161
Проверить на наличие li в ul

Проверить на наличие li в ul

Я пытаюсь сделать таймер на JS, и сейчас я пытаюсь сделать добавление таймераЯ хочу сделать, чтобы перед добавлением элемента, шла проверка...

137
Сохранить секретный ключ в Web приложении

Сохранить секретный ключ в Web приложении

Вопрос в общем звучит так : как организовать end-to-end шифрование в Web приложении а конкретно - как хранить секретный ключ на стороне клиента?...

139
Функция javascript не возвращает значение

Функция javascript не возвращает значение

Дело в том что функция не ретурнит ничего тоесть дело не в работе if`а или чего то ещё, она просто почему то ничего не отдаёт на выход, в чём может...

128