MichaelSeeberger/trix-mathjax.html

## trix-mathjax.html
<!--
NOTE: This does not add formatted formulas to trix, but rather works with it's output data which is displayed in a separate div.
-->
<!DOCTYPE html>
<html>
<head>
    <title>Trix Editor with Math Output</title>

    <meta charset="utf-8">
    <script
            src="https://code.jquery.com/jquery-3.5.0.min.js"
            integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
            crossorigin="anonymous"></script>
    <script
            src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.js"
            integrity="sha256-2D+ZJyeHHlEMmtuQTVtXt1gl0zRLKr51OCxyFfmFIBM="
            crossorigin="anonymous"></script>
    <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.css"
            integrity="sha256-yebzx8LjuetQ3l4hhQ5eNaOxVLgqaY1y8JcrXuJrAOg="
            crossorigin="anonymous"/>

    <script>
        function reloadOutput() {
            $("#output").html($("#inputBacking").attr('value'))
        }

        $(document).ready(function () {
            $("#submitTrix").click(function (e) {
                e.preventDefault()
                reloadOutput()
                MathJax.typeset($('.math-content'))
            })
            reloadOutput()
        })
    </script>
</head>

<body>
<form>
    <input id="inputBacking" type="hidden" name="content" value="Hello $e^x$!">
    <trix-editor input="inputBacking"></trix-editor>
    <input type="submit" id="submitTrix" style="margin-top: 12pt;">
</form>
<hr>
<h2>Output</h2>
<div id="output" class="math-content">
</div>
</body>
<script type="application/javascript">
    MathJax = {
        startup: {
            elements: $('.math-content'),
        },
        tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']],
            processEscapes: true
        }
    };
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</html>
	<!--
	NOTE: This does not add formatted formulas to trix, but rather works with it's output data which is displayed in a separate div.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Trix Editor with Math Output</title>

	<meta charset="utf-8">
	<script
	src="https://code.jquery.com/jquery-3.5.0.min.js"
	integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
	crossorigin="anonymous"></script>
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.js"
	integrity="sha256-2D+ZJyeHHlEMmtuQTVtXt1gl0zRLKr51OCxyFfmFIBM="
	crossorigin="anonymous"></script>
	<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.css"
	integrity="sha256-yebzx8LjuetQ3l4hhQ5eNaOxVLgqaY1y8JcrXuJrAOg="
	crossorigin="anonymous"/>

	<script>
	function reloadOutput() {
	$("#output").html($("#inputBacking").attr('value'))
	}

	$(document).ready(function () {
	$("#submitTrix").click(function (e) {
	e.preventDefault()
	reloadOutput()
	MathJax.typeset($('.math-content'))
	})
	reloadOutput()
	})
	</script>
	</head>

	<body>
	<form>
	<input id="inputBacking" type="hidden" name="content" value="Hello $e^x$!">
	<trix-editor input="inputBacking"></trix-editor>
	<input type="submit" id="submitTrix" style="margin-top: 12pt;">
	</form>
	<hr>
	<h2>Output</h2>
	<div id="output" class="math-content">
	</div>
	</body>
	<script type="application/javascript">
	MathJax = {
	startup: {
	elements: $('.math-content'),
	},
	tex: {
	inlineMath: [['$', '$'], ['\\(', '\\)']],
	processEscapes: true
	}
	};
	</script>
	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
	<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
	</html>