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=√>√</font>
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);).