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

Question

I'm using the auto-render extension of katex to render math formulas as they are typed.我正在使用 katex 的自动渲染扩展来渲染输入的数学公式。 How can I make this extension work with content editable HTML elements ( textarea , input )?如何使此扩展程序与内容可编辑的 HTML 元素（ textarea 、 input ）一起使用？

I've noticed that the katex auto-render extension works fine for HTML elements whose content can't be edited such as a div or ap element.我注意到 katex 自动渲染扩展适用于无法编辑内容的 HTML 元素，例如 div 或 ap 元素。 However it doesn't work for content editable elements such as a textarea or an input element但是它不适用于内容可编辑元素，例如textarea或input元素

I've tried using a div with the attribute contenteditable set to true.我尝试使用属性contenteditable设置为 true 的div 。 This works with a number of caveats so i'd rather not pursue this endeavor这适用于一些注意事项，所以我宁愿不进行这项努力

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

I'm expecting the $\\alpha$ inside the content editable HTML elements ( textarea and input ) to be rendered after the keyup event我期望在keyup事件之后呈现内容可编辑 HTML 元素（ textarea和input ）中的 $\\alpha$

Answer 1

The rendered result is more complicated than just the text, so you can't directly edit what is rendered in the element.渲染结果比文本更复杂，因此您无法直接编辑元素中渲染的内容。 Same way, you can not simply render the formula (HTML elements) inside the text area.同样，您不能简单地在文本区域内呈现公式（HTML 元素）。

What you can do is to get the value of the input and render it somewhere else.您可以做的是获取输入的值并将其呈现在其他地方。

Say you have:说你有：

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

Then you can do然后你可以做

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

To render the new content from the input into the desired element.将输入中的新内容渲染到所需元素中。

This is a working fiddle .这是一个工作小提琴。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-06-22 15:05:54

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-06-22 15:05:54

解决方案1
1 已采纳 2019-06-22 15:05:54