npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@naviedu/tinymce-equation-plugin

v1.0.2

Published

Equation Editor plugin for TinyMCE that uses MathLive

Downloads

29

Readme

TinyMCE Equation Editor

What is this?

Equation Editor plugin for TinyMCE that uses MathLive.

Screenshot

Available commands: https://mathlive.io/reference.html

Usage

Move the folder dist/equation-editor/ into TinyMCE plugin directory (tinymce/plugins/) and add the plugin in your TinyMCE configuration.

<script type="text/javascript">
    tinymce.init({
        selector: 'textarea',
        extended_valid_elements: 'span[class|style|data-atom-id]', // Important for MathLive to work
        plugins: ['equation-editor'],
        toolbar: 'equation-editor',
    });
</script>

Important: You need to add the extended_valid_elements option to allow MathLive to work. This prevents TinyMCE from removing empty span elements that are used by MathLive. Another option is to use the verify_html: false, option to prevent TinyMCE to remove empty blocks.

Configuration

The configuration options for equation-editor plugin are:

<script type="text/javascript">
    tinymce.init({
        selector: 'textarea',
        plugins: ['equation-editor'],
        extended_valid_elements: 'span[class|style|data-atom-id]',
        toolbar: 'equation-editor',
        equation_editor_config: {
            url: 'editor/equation_editor.html', // URL of equation editor Page
            origin: document.location.origin,
            title: 'Equation Editor',
            space_after_content: '&nbsp;',
            btn_cancel_text: 'Cancel',
            btn_ok_text: 'Insert',
            mathlive_config: {
                smartMode: true,
            },
        },
        equation_editor_group: 'basic',
        equation_editor_button_groups: {
            basic: [
                {
                    name: 'Numbers',
                    buttons: '1 2 3 4 \\pm \\dot',
                },
            ],
        },
        equation_editor_button_bar: '1 2 3 4 \\pm \\dot',
    });
</script>

For advanced buttons you can use an object of buttons in equation_editor_button_groups

In property mathlive_config you can use all available properties of MathLive Config or you can ignore this property to use default configuration.

equation_editor_button_groups: {
    basic: [{
        name: 'Numbers',
        buttons: [
            {
                text: '0',
                cmd: false,
            },
            {
                text: '\\sqrt{x}',
                latex: '\\sqrt',
                cmd: true,
            },
        ],
    },]
}

And also in equation_editor_button_bar

equation_editor_button_bar: [
    {
        text: '0',
    },
    {
        text: '\\sqrt{x}',
        latex: '\\sqrt',
        cmd: true,
    },
];

Development

Download or clone the repository and then run the following commands:

yarn
yarn start
node_modules/http-server/bin/http-server

And visit http://localhost:8080/src/demo/html/ to test the editor

Testing

Run yarn unit

Pull Requests

Please open your pull requests!

License

This project is licensed under the MIT license.

Notes