Questions Tags Users Unanswered

Math editor

Question is answered.
3 answers (2 voices) (7732 views)
Is it possible to create a math editor like include all mathematical symbols in a popup window, and by clicking an image or button the popup window get open for selecting the symbols to my textarea. After selecting the mathematical symbol is seen like <font symbol=√>&#8730;</font>
3 Answers
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
<!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>


As you can see, clicking on the "Symbols" button calls the ShowSymbols function. It creates the symbols popup and show it. Clicking on a symbol in the symbols popup calls the AddSymbol function that adds the selected symbol to the end of the textarea (editor.value += this.innerHTML;) and hides the symbol popup.

If you want to insert the symbol at the caret postion not the end of the textarea, use the selectionStart and selectionEnd properties.
If you want to add a HTML markup to the textarea not a plain text, you should use content editable objects.
Finally, to center the symbol popup on the screen, use fixed position, or if you want to display the popup below the "Symbol" button, then put the Symbol button into a relatively positioned element and add the popup to this relatively positioned element not the body of the document (document.body.appendChild (symbolPopup);).
Thanks for the reply Dottoro. I want all the symbols included in popup window.Now you have include only 3 symbols.I want to include like in the next row i want to include the other three and so on. Please tell me how to do that. Dottoro - tweety -
Please Dottoro, tell me how to print the &#8719; in the textbox. Please tell me. - tweety -
Please anyone tell me how to get the corresponding value of the mathematical symbols inside the textbox, when the symbol is selected. - tweety -
I found out how to do that too. Thanks Dottoro. The code was very helpful to me. I have done what i expect. Thanks again. - tweety -
The above code is, when 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. - tweety -
Please tell me whether it is possible or not. If possible please tell me where to change in the code.Please help me. - tweety -
I'm sorry, but you should understand how JavaScript works. Every JavaScript property and method (onclick, getElementById, etc.) is clickable in the code above pointing to the documentation where you will find detailed descriptions and several examples. Once you understand them, you will be able to find the answers to your questions. - Dottoro -
Perfect!
And you can also use the conditional operator ?: to write shorter code:

1.
2.
3.
4.
function ShowSymbols() {
  CreateSymbolPopup ();
  symbolPopup.style.display = (symbolPopup.style.display == 'block') ? 'none' : 'block';
}
Thanks Dottoro. I have to learn more in javascript. But anyway, now i got the solution simply by including the following code.

1.
2.
3.
4.
5.
6.
7.

function ShowSymbols() {
  CreateSymbolPopup ();
  if(symbolPopup.style.display == 'block') symbolPopup.style.display = 'none';
  else symbolPopup.style.display = 'block';
}
15 30 50 per page

Your Answer

Limit of files to attach: 3 / Max total size: 1024 KB
File:
Description:
remove