Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Math Editor

  1. #1
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts

    Math Editor

    Hi,
    I want to create a math editor which includes symbols like. sigma,pi etc. By clicking a button the editor is to get open. Please help me how to do it. I googled it. But i didn't get the code for creating a math editor.

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Something like http://www.matheboard.de/formeleditor.php ? That one uses the free typesystem LaTeX which is considered pretty much standard for scientific essays. I'm sure there is some kind of LaTeX to PNG script out there, but it'll have to run the compiler in the background and it surely is PHP or some other server-side language, not JavaScript.

  • Users who have thanked Airblader for this post:

    gayathri (03-22-2013)

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Thanks for the reply Airblader. Like that i want to do. So it is not possible to do in javascript.

  • #4
    New Coder
    Join Date
    Jan 2013
    Posts
    71
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Please try Latex and VTBE math editors ,which will be more useful for you.

  • Users who have thanked RobertWoges for this post:

    gayathri (03-26-2013)

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by gayathri View Post
    Thanks for the reply Airblader. Like that i want to do. So it is not possible to do in javascript.
    It is possible via Ajax requests. There are free LaTeX services online that allow real-time editing.

  • Users who have thanked Airblader for this post:

    gayathri (03-26-2013)

  • #6
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Please give me some samples for the math editor.

  • #7
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Here's an example: https://www.writelatex.com/119810wkjhnv
    Although that's a complete LaTeX service, i.e. for creating whole documents, not just math formulas.

    Again: If you want to do this yourself, you'll need a server with access to running a background service (the compiler) as well as Ajax requests to it. That's not exactly a beginner's task.

  • Users who have thanked Airblader for this post:

    gayathri (03-26-2013)

  • #8
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Ok. THen please tell me how i can modify the following code.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .popup {
                position: absolute;
                left: 100px;
                top: 100px;
                border: 1px solid #000;
                background-color: #f0f0f0;
            }
    
            .popup .symbol {
                display: inline-block;
                padding: 5px;
                margin: 10px;
                border: 1px solid #000;
            }
        </style>
        <script>
            var symbolPopup = null;
            function CreateSymbolPopup () {
                if (symbolPopup) {
                    return;
                }
    
                symbolPopup = document.createElement ('div');
                symbolPopup.className = "popup";
    
                var symbols = [8719, 8721, 8730];
                for (var i = 0; i < symbols.length; i++) {
                    var symbolButton = document.createElement ('span');
                    symbolButton.innerHTML = '&#' + symbols[i] + ';';
                    symbolButton.onclick = AddSymbol;
                    symbolButton.className = "symbol";
                    symbolPopup.appendChild (symbolButton);
                }
                document.body.appendChild (symbolPopup);
            }
    
            function ShowSymbols () {
                CreateSymbolPopup ();
                symbolPopup.style.display = "";
            }
            function HideSymbols () {
                if (symbolPopup) {
                    symbolPopup.style.display = "none";
                }
            }
    
            function AddSymbol () {
                var editor = document.getElementById ('editor');
                editor.value += this.innerHTML;
                HideSymbols ();
            }
        </script>
    </head>
    <body>
        <button onclick="ShowSymbols ()">Symbols</button>
        <textarea id="editor"></textarea>
    </body>
    </html>
    In the above i want to get the symbol's value inside the textbox after clicked. After clicking the symbols button, the editor is opening and after selecting the symbols from the editor the symbol is not seen in the textbox. Instead its corresponding value is seen inbetween some tags like <font></font>
    The corresponding value of the symbol is seen inbetween the tags. Please tell me how to do that.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    you might look into mathml.


    if all you want to do in insert symbols in a textarea, that's easy, and you don't need a server for that.


    ex:

    Code:
    <html>
    <head> 
      <meta charset=utf-8 />
      <title>inserting chars demo </title>
    </head>
    <body>
    
    <div id=controls> <b> Insert: </b>
    <button onclick='insertChar("~")'>~</button>
    <button onclick='insertChar("¬")'>¬</button>
    <button onclick='insertChar("±")'>±</button>
    <button onclick='insertChar("·")'>·</button>
    <button onclick='insertChar("×")'>×</button>
    <button onclick='insertChar("â")'>â</button>
    <button onclick='insertChar("÷")'>÷</button>
    <button onclick='insertChar("˜")'>˜</button>
    
    <button onclick='insertChar("²")'>²</button>
    <button onclick='insertChar("³")'>³</button>
    <button onclick='insertChar("µ")'>µ</button>
    
    
    
    <button onclick='insertChar("Δ")'>Δ</button>
    <button onclick='insertChar("δ")'>δ</button>
    <button onclick='insertChar("π")'>π</button>
    <button onclick='insertChar("σ")'>σ</button>
    <button onclick='insertChar("†")'>†</button>
    <button onclick='insertChar("•")'>•</button>
    <button onclick='insertChar("‣")'>‣</button>
    <button onclick='insertChar("′")'>′</button>
    <button onclick='insertChar("⁄")'>⁄</button>
    <button onclick='insertChar("ℶ")'>ℶ</button>
    <button onclick='insertChar("→")'>→</button>
    <button onclick='insertChar("↔")'>↔</button>
    <button onclick='insertChar("↦")'>↦</button>
    <button onclick='insertChar("⇒")'>⇒</button>
    <button onclick='insertChar("⇔")'>⇔</button>
    <button onclick='insertChar("∀")'>∀</button>
    <button onclick='insertChar("∂")'>∂</button>
    <button onclick='insertChar("∃")'>∃</button>
    <button onclick='insertChar("∅")'>∅</button>
    <button onclick='insertChar("∆")'>∆</button>
    <button onclick='insertChar("∇")'>∇</button>
    <button onclick='insertChar("∈")'>∈</button>
    <button onclick='insertChar("∉")'>∉</button>
    <button onclick='insertChar("∋")'>∋</button>
    <button onclick='insertChar("∌")'>∌</button>
    <button onclick='insertChar("∎")'>∎</button>
    <button onclick='insertChar("∏")'>∏</button>
    <button onclick='insertChar("∐")'>∐</button>
    <button onclick='insertChar("∑")'>∑</button>
    <button onclick='insertChar("−")'>−</button>
    <button onclick='insertChar("∓")'>∓</button>
    <button onclick='insertChar("∖")'>∖</button>
    <button onclick='insertChar("∘")'>∘</button>
    <button onclick='insertChar("√")'>√</button>
    <button onclick='insertChar("∛")'>∛</button>
    <button onclick='insertChar("∜")'>∜</button>
    
    <button onclick='insertChar("∝")'>∝</button>
    <button onclick='insertChar("∞")'>∞</button>
    <button onclick='insertChar("∣")'>∣</button>
    <button onclick='insertChar("∤")'>∤</button>
    <button onclick='insertChar("∧")'>∧</button>
    
    <button onclick='insertChar("⋙")'>⋙</button>
    <button onclick='insertChar("⋘")'>⋘</button>
    <button onclick='insertChar("⋗")'>⋗</button>
    <button onclick='insertChar("⋖")'>⋖</button>
    <button onclick='insertChar("⋐")'>⋐</button>
    <button onclick='insertChar("⋑")'>⋑</button>
    <button onclick='insertChar("⋒")'>⋒</button>
    
    <button onclick='insertChar("⋒")'>⋒</button>
    <button onclick='insertChar("⊙")'>⊙</button>
    <button onclick='insertChar("⊚")'>⊚</button>
    <button onclick='insertChar("⊝")'>⊝</button>
    <button onclick='insertChar("⊜")'>⊜</button>
    <button onclick='insertChar("⊕")'>⊕</button>
    
    
    <button onclick='insertChar("∨")'>∨</button>
    <button onclick='insertChar("∩")'>∩</button>
    <button onclick='insertChar("∪")'>∪</button>
    <button onclick='insertChar("∫")'>∫</button>
    <button onclick='insertChar("∮")'>∮</button>
    <button onclick='insertChar("∴")'>∴</button>
    <button onclick='insertChar("∵")'>∵</button>
    <button onclick='insertChar("≀")'>≀</button>
    <button onclick='insertChar("∬")'>∬</button>
    <button onclick='insertChar("∭")'>∭</button>
    <button onclick='insertChar("∮")'>∮</button>
    <button onclick='insertChar("∯")'>∯</button>
    <button onclick='insertChar("∰")'>∰</button>
    
    
    <button onclick='insertChar("≅")'>≅</button>
    <button onclick='insertChar("≈")'>≈</button>
    <button onclick='insertChar("≐")'>≐</button>
    <button onclick='insertChar("≜")'>≜</button>
    <button onclick='insertChar("≝")'>≝</button>
    <button onclick='insertChar("≠")'>≠</button>
    <button onclick='insertChar("≡")'>≡</button>
    <button onclick='insertChar("≤")'>≤</button>
    <button onclick='insertChar("≥")'>≥</button>
    <button onclick='insertChar("≦")'>≦</button>
    <button onclick='insertChar("≧")'>≧</button>
    <button onclick='insertChar("≪")'>≪</button>
    <button onclick='insertChar("≫")'>≫</button>
    <button onclick='insertChar("≺")'>≺</button>
    <button onclick='insertChar("⊂")'>⊂</button>
    <button onclick='insertChar("⊃")'>⊃</button>
    <button onclick='insertChar("⊆")'>⊆</button>
    <button onclick='insertChar("⊇")'>⊇</button>
    <button onclick='insertChar("⊕")'>⊕</button>
    <button onclick='insertChar("⊗")'>⊗</button>
    <button onclick='insertChar("⊢")'>⊢</button>
    <button onclick='insertChar("⊤")'>⊤</button>
    <button onclick='insertChar("⊥")'>⊥</button>
    <button onclick='insertChar("⊧")'>⊧</button>
    <button onclick='insertChar("⊻")'>⊻</button>
    <button onclick='insertChar("⋈")'>⋈</button>
    <button onclick='insertChar("⋉")'>⋉</button>
    <button onclick='insertChar("⋊")'>⋊</button>
    <button onclick='insertChar("⌈")'>⌈</button>
    <button onclick='insertChar("⌉")'>⌉</button>
    <button onclick='insertChar("⌊")'>⌊</button>
    <button onclick='insertChar("⌋")'>⌋</button>
    <button onclick='insertChar("■")'>■</button>
    <button onclick='insertChar("□")'>□</button>
    <button onclick='insertChar("▮")'>▮</button>
    <button onclick='insertChar("▻")'>▻</button>
    <button onclick='insertChar("◅")'>◅</button>
    
    
    <button onclick='insertChar("[demo long insertion]")'>[demo long insertion]</button>
    
    </div>
    
    <hr />
    
    <textarea rows=20 cols=60 id=demo style='font-family: arial, monospace; font-size: 20px; '>
     this is a test.
    
     x = πr²
    
    </textarea>
    
    <script>
    
    function preEd(ta){
      var v=ta.value, o={};
       o.ss=ta.selectionStart;
       o.se=ta.selectionEnd;
       o.st=ta.scrollTop;
      	var r=[
    		v.slice(0, o.ss),
    		v.slice(o.ss, o.se),
    		v.slice(o.se)
    	], 
    	sel=r[1];
       o.sel=sel;
       o.pre=r[0];
       o.post=r[2];
       o.elm=ta;
      return o;
    }
    
    
    function insertChar(chars){
      var o=preEd(demo);
      demo.value=o.pre+o.sel+chars+o.post;
      demo.selectionStart=o.ss+chars.length;
    }
    
    
    
    </script>
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    gayathri (03-27-2013)

  • #10
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Thanks rnd me. The code was very useful.
    Also Please anyone tell me in my code, the code is working fine. But i need to enter the font tag for more than a textarea. Please tell me how to do that. Now there is only one textarea.

  • #11
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    I simply tried the code

    Code:
    var x = [ "editor", "edit" ];
            function AddSymbol() {
    for ( var t = 0; t <= x.length; ++t ){
    	    var editor = document.getElementById( x[t] );
    	    editor.value = this.value;
    	    HideSymbols ();
    }
    The problem in the code is when clicking the symbol button and selecting the symbol, the symbols are seen in both the textarea.

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    one way around that is to set a global to the active textarea and point to that:


    Code:
    function AddSymbol() {
       var editor = lastText ;
    and then in each textarea, add a focus event to set lastText:
    Code:
    <textarea onfocus="lastText=this">
    as long as they click a textarea before a button it works fine.
    you can set lastText to a default for 100% error free operation.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    gayathri (03-27-2013)

  • #13
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Thanks rnd me. The problem is solved and now the code is working very fine. Thanks a lot.

  • #14
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Please also tell me, by clicking the symbol button the editor is opening. I also want to do it like, again by clicking the symbol button the editor is to get close even if any of symbol is not selected. Please tell me how to do that. Now when the symbol from editor is selected, the editor get closed. I dont want like this. Please tell me how to do that.
    Last edited by gayathri; 03-27-2013 at 12:53 PM.

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    maybe:
    Code:
     function ShowSymbols () {
                CreateSymbolPopup ();
      symbolPopup.onclick=HideSymbols;
                     
      symbolPopup.style.display = "";
            }
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •