MathquillBasedEditor

Javascript library that provides you a simple math editor that you can easily integrate to your webpage.

Generate Convert Improve

Install / Use

/learn @karan101292/MathquillBasedEditor

About this skill

Quality Score

0/100

README

Mathquill based WUSIWYG editor

MathQuill is an awesome formula editor. We have put some effort and made WUSIWUG editor on top of that.

What is this?

This is a javascript library that provides you a simple math editor that you can easily integrate to your webpage.

Dependencies

jQuery

MathQuill

Getting Started

Download this package and extract files to your project lib folder.

Include required JS and CSS files to your webpage.

<html>
<head>
<link href="./path/to/mathquill.css" rel="stylesheet">
<link href="./path/to/matheditor.css" rel="stylesheet">

<script src="./path/to/jquery.js"></script>
<script src="./path/to/mathquill.min.js"></script>
<script src="./path/to/matheditor.js"></script>
</head>
<body>
.
.
.
.
</body>
</html>

Create MathEditor Instance and set all the options you required.


var mathEditor = new MathEditor('some_id');

mathEditor.addButtons(["fraction","square_root","cube_root","root",'superscript','subscript']);
// If you dont write this line editor will display default buttons. 

mathEditor.removeButtons(["fraction","square_root"])
// If you want to remove some buttons from default list.

mathEditor.styleMe({
    width: '500',
    height: '80'
});
// List of other options are mentioned bellow.

mathEditor.setTemplate('floating-toolbar');
// It will make button toolbar floating.

mathEditor.getLatex();
// It will return letex for input formula.

mathEditor.setLatex('\\frac{1}{2}');
// It will set letex in input area.
// It accepts any latex string.

Options

styleMe()

Attribute | Type | Default | Description --------- | ---- | ------- | ----------- width|string|500|It will define minimum width for your editor height|string|40|It will define minimum height for your editor textarea_background|string|#FFFFFF|Background color for your editor textarea eg. 'white', '#FFFFFF', 'rgba(255,255,255,0.5)' textarea_foreground|string|#000000|Text color for your editor textarea eg. 'white', '#FFFFFF', 'rgba(255,255,255,0.5)' textarea_border|string|#000000|Border color for your editor textarea eg. 'white', '#FFFFFF', 'rgba(255,255,255,0.5)' toolbar_background|string|#FFFFFF|Background color for your editor toolbar eg. 'white', '#FFFFFF', 'rgba(255,255,255,0.5)' toolbar_foreground|string|#000000|Text color for your editor toolbar eg. 'white', '#FFFFFF', 'rgba(255,255,255,0.5)' toolbar_border|string|#000000|Border color for your editor toolbar eg. 'white', '#FFFFFF', 'rgba(255,255,255,0.5)' button_background|string|#FFFFFF|Background color for your editor toolbar button eg. 'white', '#FFFFFF', 'rgba(255,255,255,0.5)' button_border|string|#000000|Border color for your editor toolbar button eg. 'white', '#FFFFFF', 'rgba(255,255,255,0.5)'

TinyMCE Support

You can integrate our MathEditor to tinyMCE with easy implementation.
Click here for documentation.

Help us Improve

Donate us

Related Skills

node-connect

347.0k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

107.8k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

347.0k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

347.0k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。