Как я могу заставить katex работать с элементами HTML, которые имеют поле ввода? - PullRequest
Новая
       31

Как я могу заставить katex работать с элементами HTML, которые имеют поле ввода?

1 голос
/ 22 июня 2019

Я использую расширение katex для автоматического рендеринга математических формул по мере их ввода. Как я могу заставить это расширение работать с редактируемыми элементами HTML (textarea, input)?

Я заметил, что расширение автоматического рендеринга katex прекрасно работает для элементов HTML, содержимое которых нельзя редактировать, таких как элементы div или p. Однако это не работает для редактируемых элементов содержимого, таких как textarea или input element

Я пытался использовать div с атрибутом contenteditable, установленным в true. Это работает с рядом предостережений, поэтому я бы не стал заниматься этим 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testing the katex auto-render module</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // let contentEditableDiv = document.querySelector("#contentEditableDiv");
            document.addEventListener("keyup", (e) => {

                renderMathInElement(document.body, {
                    delimiters: [
                        { left: "$$", right: "$$", display: true },
                        { left: "\\[", right: "\\]", display: true },
                        { left: "$", right: "$", display: false },
                        { left: "\\(", right: "\\)", display: false }
                    ]
                });
            });

        });

    </script>
</head>

<body>
    <textarea id="content">
        $\alpha$
        $\alpha$
        $\alpha$
        $\alpha$
    </textarea>

    <input type="text" name="" id="" value="$\alpha$">

    $\alpha$
    $\alpha$
    $\alpha$
    $\alpha$

    <p> $\alpha$
        $\alpha$
        $\alpha$
        $\alpha$</p>

    <div>
        $\alpha$
        $\alpha$
        $\alpha$
        $\alpha$
    </div>

    <div contenteditable="true" id="contentEditableDiv">try typing some text + math enclosed
        math formulas in here</div>

</body>

</html>

Я ожидаю, что $\alpha$ внутри редактируемых элементов HTML (textarea и input) будет отображаться после события keyup

1 Ответ

1 голос
/ 22 июня 2019

Результат рендеринга сложнее, чем просто текст, поэтому вы не можете напрямую редактировать то, что отображается в элементе.Точно так же вы не можете просто отобразить формулу (элементы HTML) внутри текстовой области.

Что вы можете сделать, это получить значение ввода и отобразить его где-нибудь еще.

Скажитеу вас есть: 

<div id="content">
</div>

<input type="text" id="formula" value="c = \sqrt{a^2 + b^2}" />


const formulaInput = document.querySelector('#formula');
const element = document.querySelector('#content');

Затем вы можете сделать 

formulaInput.addEventListener("keyup", (e) => {
  katex.render(formulaInput.value, element, {
    throwOnError: false
  });
});

Для рендеринга нового содержимого из ввода в нужный элемент.

Это рабочая скрипка .

...