Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2021, 01:31
Профессор
Отправить личное сообщение для savsoft Посмотреть профиль Найти все сообщения от savsoft
 
Регистрация: 03.01.2019
Сообщений: 155

Тестовый редактор с фиксацией исправлений и undo/redo.
Для сайта школы хотят добавить функционал текстового редактора. Никакого форматирования/стилей, только разбивка на параграфы, undo/redo и самое главное, фиксация изменений. То есть удаленный и добавленный текст выделяются. Готовых скриптов не нашел, как подступится к задаче не имею представления, не делал ничего подобного.

И стоит ли вообще за такую задачу браться? Может есть готовые скрипты/плагины с таким функционалом? Кто сталкивался - подскажите.

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2021, 02:24
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Фиксация изменений только в процессе редактирования, т.е. на завтра их сохранять не нужно? На чем сайт, какая CMS?
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2021, 02:38
Профессор
Отправить личное сообщение для savsoft Посмотреть профиль Найти все сообщения от savsoft
 
Регистрация: 03.01.2019
Сообщений: 155

Сообщение от Rise Посмотреть сообщение
Фиксация изменений только в процессе редактирования, т.е. на завтра их сохранять не нужно? На чем сайт, какая CMS?
Нужно сохранять. Ученик пишет сочинение, несколько абзацев текста. А учитель исправляет, и нужно видеть исправления. Изначально сайт на php + mysql + bootstrap 3. С ростом функционала добавили js/jquery.
Ответить с цитированием
  #4 (permalink)  
Старый 26.02.2021, 02:51
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Получается еще разные роли. Ученик пишет (исправляет) - не нужно видеть исправления. Учитель исправляет - нужно видеть и Учителю и Ученику. Или еще как-то. Так что нужно более детально проработать кто что видит, очевидно функционал текстового редактора у Учителя и Ученика не будет одинаковый.
Ответить с цитированием
  #5 (permalink)  
Старый 26.02.2021, 03:56
Профессор
Отправить личное сообщение для savsoft Посмотреть профиль Найти все сообщения от savsoft
 
Регистрация: 03.01.2019
Сообщений: 155

Сообщение от Rise Посмотреть сообщение
Получается еще разные роли. Ученик пишет (исправляет) - не нужно видеть исправления. Учитель исправляет - нужно видеть и Учителю и Ученику. Или еще как-то. Так что нужно более детально проработать кто что видит, очевидно функционал текстового редактора у Учителя и Ученика не будет одинаковый.
Ученик просто пишет несколько абзацев текста, есть функции undo/redo. Исправляет, проверяет, потом отправляет на проверку, просто меняет статус задания. После отправки он уже не может исправлять, а учитель может многократно корректировать текст. Нужно то, что удаляется, выделять, например красным перечеркнутым шрифтом, а то что дописано учителем, например зеленным. Ученик видит текст с показанными исправлениями.
Ответить с цитированием
  #6 (permalink)  
Старый 26.02.2021, 08:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

замена текста с сохранением
Сообщение от savsoft
Нужно то, что удаляется, выделять, например красным перечеркнутым шрифтом, а то что дописано учителем, например зеленным. Ученик видит текст с показанными исправлениями.
это уже делает, предложенный вам ранее код.
написать исправление, выделить текст, заменить. кликать по замене.
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .selected {
            border-radius: 3px;
            -webkit-box-decoration-break: clone;
            background-color: #6BDB6B;
        }
        ::selection {
            background: rgba(0, 0, 0, .25);
        }
        .remove{
            text-decoration: line-through;
            color: #FF0000;
            display: none;
        }
        .remove.open{
             display: inline;
        }
    </style>
    <script>
        let dataTxt = new Map;
        let current;
        function styliString() {
            const textarea = document.querySelector(".txt");
            const content = textarea.value.trim();
            if(!content) return;
            const selection = getSelection();
            const range = selection.getRangeAt(0);
            const selectionContents = range.extractContents();
            const span = document.createElement("span");
            const txt = span.cloneNode();
            txt.classList.add('remove');
            textarea.value = "";
            for(const oldSpan of selectionContents.querySelectorAll(".selected")) {
                for(const childNode of [...oldSpan.childNodes])
                    oldSpan.parentNode.insertBefore(childNode, oldSpan);
                oldSpan.remove();
            }
            selectionContents.normalize();
            span.classList.add("selected");
            span.append(content);
            txt.append(selectionContents);
            range.insertNode(span);
            span.after(txt);
            dataTxt.set(span, txt);
        }
        document.addEventListener("click", ({ target }) => {
            if(target.classList.contains("save")) {
                styliString();
            }
            if(target.classList.contains("selected")) {
                const txt = dataTxt.get(target);
                if(current && current !== txt) current.classList.remove("open");
                current = txt;
                current.classList.toggle("open")
            }
        });
    </script>
</head>
<body>
    <button class="save" >Заменить выделенный текст</button>
    <textarea class="txt" name=""></textarea>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque si aut requietem natura non quaereret aut eam posset alia quadam ratione consequi. Hanc quoque iucunditatem, si vis, transfer in animum; <b>Quod autem ratione actum est, id officium appellamus.</b> Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. An hoc usque quaque, aliter in vita? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Theophrasti igitur, inquit, tibi liber ille placet de beata vita? <i>Eademne, quae restincta siti?</i> Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere.</p>
    
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 26.02.2021, 11:58
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

savsoft,
Если вкратце, то редактор представляется в виде тэга <pre contenteditable>область ввода</pre>, внутри него могут быть тэги <del>удалено</del> и <ins>добавлено</ins>, в других тэгах нет смысла. Всё вводится простым текстом, параграфы разбиваются клавишей Enter, как в обычной textarea. Функционал undo/redo где-то ищется. В базе данных сохраняются два простых текста: текст Ученика и текст Учителя (исправленный). Оба текста предоставляются по запросу и Ученику и Учителю, в их редакторах они смешиваются образуя разницу, посредством например такого скрипта.
Ответить с цитированием
  #8 (permalink)  
Старый 26.02.2021, 15:54
Профессор
Отправить личное сообщение для savsoft Посмотреть профиль Найти все сообщения от savsoft
 
Регистрация: 03.01.2019
Сообщений: 155

Сообщение от рони Посмотреть сообщение
это уже делает, предложенный вам ранее код.
написать исправление, выделить текст, заменить. кликать по замене.
Это не то что нужно. Нужно не выделять и заменять, а просто корректировать текст, и сразу на лету, то что удаляется из текста, целые предложения, отдельные буквы, становятся красными и зачеркнутыми. А то что добавляется, например красным не зачеркнутым. Также необходим функционал undo/redo, хотя бы нескольких действий. Вопрос собственно реально ли это сделать малой кровью или не стоит и браться?
Ответить с цитированием
  #9 (permalink)  
Старый 26.02.2021, 16:01
Профессор
Отправить личное сообщение для savsoft Посмотреть профиль Найти все сообщения от savsoft
 
Регистрация: 03.01.2019
Сообщений: 155

Сообщение от Rise Посмотреть сообщение
savsoft,
Если вкратце, то редактор представляется в виде тэга <pre contenteditable>область ввода</pre>, внутри него могут быть тэги <del>удалено</del> и <ins>добавлено</ins>, в других тэгах нет смысла. Всё вводится простым текстом, параграфы разбиваются клавишей Enter, как в обычной textarea. Функционал undo/redo где-то ищется. В базе данных сохраняются два простых текста: текст Ученика и текст Учителя (исправленный). Оба текста предоставляются по запросу и Ученику и Учителю, в их редакторах они смешиваются образуя разницу, посредством например такого скрипта.
Эту библиотеку я использую в других заданиях, но для этого случая она не подходит. Хотят, чтобы учитель сразу видел корректировки. Типа

He knows здесь была добавлена буква S

You knows здесь была удалена буква S

И это происходит в реальном времени, а не по нажатию кнопки.

Последний раз редактировалось savsoft, 26.02.2021 в 16:13.
Ответить с цитированием
  #10 (permalink)  
Старый 26.02.2021, 16:19
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от savsoft
И это происходит в реальном времени, а не по нажатию кнопки.
Оно в реальном времени, посмотри демо, там практически готовое решение.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск