Click on a mathematical expression to see the button on the toolbar to edit or insert the expression using the plus button.
<!DOCTYPE html>
<html>
<head>
<title>Redactor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-folder/redactor.css" />
<!-- katex -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
</head>
<body>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- js -->
<script src="/your-folder/redactor.js"></script>
<script src="/your-folder/plugins/math/math.js"></script>
<!-- call -->
<script>
Redactor('#entry', {
plugins: ['math'],
active: {
blocks: {
'math': ['math']
}
}
});
</script>
</body>
</html>
The plugin supports Katex library by default. To do this, as shown in the example above, you need to connect CSS and JS libraries in your page, like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
By default, the plugin only adds its button to the toolbar. To add it to the context bar, enable the context
setting:
Redactor('#entry', {
plugins: ['math'],
active: {
blocks: {
'math': ['math']
}
},
math: {
context: true
}
});