thisroot / summernote-equation-plugin

5 stars 13 forks source link

summernote-equation-plugin

Allows to include equations into the editable content see example or try it online summernote-equation-pligin

Installation:

1) This plugin uses MathJax library. Install and configure it (sample works, but you may optimize parametres)

<link href="https://github.com/thisroot/summernote-equation-plugin/blob/master/dist/main.css" rel="stylesheet">

<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
<script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          extensions: ["tex2jax.js"],
          jax: ["input/TeX", "output/HTML-CSS"],
          tex2jax: {
              inlineMath: [["$", "$"], ["\\(", "\\)"]]
              },
          "HTML-CSS": {
              linebreaks: { automatic: true }
              }
        });
  </script>

2) Insert HTML

 <div class="container">
    <button id="run">edit</button>  
    <div id='text'></div>
 </div>

3) Initialize summernote with params

 <link href="https://github.com/thisroot/summernote-equation-plugin/blob/master/dist/main.css" rel="stylesheet">
 <script src="https://github.com/thisroot/summernote-equation-plugin/raw/master/summernote-ext-equation.js"></script>
 <script>
    $(document).ready(function() {
        $('#run').on('click', function() {              
            $('#texto').summernote({ 
                    toolbar: [
                    ['insert', ['equation']]
                    ],});
         });
    });
    </script>

4) Remember to include css and js libraries (jQuery, Bootstrap, Summernote)
5) You can see it here

P.S: This plug-in works but it have some problems. (stable in Mozilla in Crome some functions dose not work, need to rewrite it) If you want to use it in professional projects, you must improve it. Please write me if you want to make stable version.