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

我正在使用 katex 的自动渲染扩展来渲染键入的数学公式。如何使此扩展适用于内容可编辑的HTML元素(textarea，input(？

我注意到 katex 自动渲染扩展适用于内容无法编辑的 HTML 元素，例如div 或 p 元素。但是，它不适用于内容可编辑元素，例如textarea或input元素

我尝试使用属性设置为 true 的div contenteditable。这有很多注意事项，所以我宁愿不追求这种努力

<!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>

我希望内容可编辑 HTML 元素(textarea 和 input(中的 $alpha$ 在keyup事件之后呈现

呈现的结果比文本更复杂，因此您无法直接编辑元素中呈现的内容。同样，您不能简单地在文本区域内呈现公式(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
  });
});

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

这是一个工作小提琴。

相关内容

最新更新

热门标签：