Math

Click on a mathematical expression to see the button on the toolbar to edit or insert the expression using the plus button.

Code

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

Usage

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