Форум

savsoft · #1 (**permalink**) 26.02.2021, 01:31

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

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

Спасибо

savsoft · #2 (**permalink**) 26.02.2021, 02:38

Сообщение от Rise

Фиксация изменений только в процессе редактирования, т.е. на завтра их сохранять не нужно? На чем сайт, какая CMS?

Нужно сохранять. Ученик пишет сочинение, несколько абзацев текста. А учитель исправляет, и нужно видеть исправления. Изначально сайт на php + mysql + bootstrap 3. С ростом функционала добавили js/jquery.

savsoft · #3 (**permalink**) 26.02.2021, 03:56

Сообщение от Rise

Получается еще разные роли. Ученик пишет (исправляет) - не нужно видеть исправления. Учитель исправляет - нужно видеть и Учителю и Ученику. Или еще как-то. Так что нужно более детально проработать кто что видит, очевидно функционал текстового редактора у Учителя и Ученика не будет одинаковый.

Ученик просто пишет несколько абзацев текста, есть функции undo/redo. Исправляет, проверяет, потом отправляет на проверку, просто меняет статус задания. После отправки он уже не может исправлять, а учитель может многократно корректировать текст. Нужно то, что удаляется, выделять, например красным перечеркнутым шрифтом, а то что дописано учителем, например зеленным. Ученик видит текст с показанными исправлениями.

рони · #4 (**permalink**) 26.02.2021, 08:22

Сообщение от 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>

savsoft · #5 (**permalink**) 26.02.2021, 15:54

Сообщение от рони

это уже делает, предложенный вам ранее код.
написать исправление, выделить текст, заменить. кликать по замене.

Это не то что нужно. Нужно не выделять и заменять, а просто корректировать текст, и сразу на лету, то что удаляется из текста, целые предложения, отдельные буквы, становятся красными и зачеркнутыми. А то что добавляется, например красным не зачеркнутым. Также необходим функционал undo/redo, хотя бы нескольких действий. Вопрос собственно реально ли это сделать малой кровью или не стоит и браться?

savsoft · #6 (**permalink**) 26.02.2021, 16:01

Сообщение от Rise

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

Эту библиотеку я использую в других заданиях, но для этого случая она не подходит. Хотят, чтобы учитель сразу видел корректировки. Типа

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

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

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

savsoft · #7 (**permalink**) 26.02.2021, 16:24

Сообщение от Rise

Оно в реальном времени, посмотри демо, там практически готовое решение.

Демо jsdiff?

savsoft · #8 (**permalink**) 26.02.2021, 16:37

Сообщение от Rise

Да.

Ну там в библиотеку передаются два текста и сравниваются.
А мне нужен результат по нажатию каждой клавиши.

savsoft · #9 (**permalink**) 26.02.2021, 17:42

Сообщение от Rise

savsoft,
В любом случае будут два текста сравниваться, а как еще узнать изменения?

Мне все показывают как образец MS Word в режиме правки. Там при любом изменении (добавить/удалить/вырезать/вставить) сразу подсвечиваются правки. Хотят что-то подобное. Я предлагал сделать два окна, в одном скопированный для правок учителя текст ученика, в другом результат работы jsdiff. Результат обновляется по нажатию кнопки.

Форум

Справочник

Discord чат

Курсы javascript