1

我正在使用 katex 的自动渲染扩展来渲染输入的数学公式。如何使此扩展程序与内容可编辑的 HTML 元素 ( textarea, input) 一起使用？

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

我尝试使用div属性contenteditable设置为 true 的 a 。这有一些警告，所以我宁愿不追求这个努力

<!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和)inputkeyup

4

1 回答 1

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
  });
});

将输入中的新内容渲染到所需的元素中。

这是一个工作小提琴。

于 2019-06-22T15:05:54.543 回答