Question

我正在使用katex的自动渲染扩展程序来在键入数学公式时对其进行渲染。如何使该扩展程序与内容可编辑的HTML元素（textarea，input）一起使用？

我注意到，katex自动渲染扩展对于无法编辑其内容的HTML元素（例如div或p元素）可以很好地工作。但是，它不适用于内容可编辑的元素，例如textarea或input元素

我尝试使用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

Answer 1

渲染的结果不仅仅是文本，因此您不能直接编辑元素中渲染的结果。同样，您不能简单地在文本区域内呈现公式（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
  });
});

将新内容从输入呈现到所需元素中。

这是working fiddle。

如何使katex与具有输入字段的HTML元素一起使用？

1 个答案: