Index » Products » LaTeX Equation Editor »

Activate editor onclick

$fiore\′s Photo$

6 Dec 12, 5:26PM

(5 replies)

Activate editor onclick

Hi, maybe it's a trivial question, but I'm trying to associate to a button the embedded of the editor in my web page.

I wrote this code, but it doesn't work.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://latex.codecogs.com/css/equation-embed.css" />
    <link rel="stylesheet" href="css/stile.css" />
 
    <script type="text/javascript" src="http://latex.codecogs.com/js/eq_config.js" ></script>
    <script type="text/javascript" src="http://latex.codecogs.com/js/eq_editor-lite-11.js" ></script>
    <script >
        function aggiungi(){
        	var edit ="<div id="editor"></div><textarea id="testbox" rows="3" cols="40"></textarea><img id="equation" align="middle"/>";
	    	document.getElementById('glob').innerHTML = edit;
 
		EqEditor.embed('editor');
        	var a = new EqTextArea('equation', 'testbox');
             	EqEditor.add(a,false);
    	}
    </script>
</head>
<body>
<div id = "glob" />
    <button id='mat' onClick="aggiungi();" >Edit</button>
</body>
</html>

When I click on the button i see two error:

Uncaught TypeError: Cannot set property 'onfocus' of null
Uncaught TypeError: Cannot set property 'innerHTML' of null

How can I do??

$CodeCogs\′s Photo$

CodeCogs

7 Dec 12, 3:50PM

I have to confess. This should be trivial but clearly is not. I'm looking into it now and we should get back to you shortly.

$fiore\′s Photo$

fiore

11 Dec 12, 3:55PM

thank you for the answer.... is there any news??

$CodeCogs\′s Photo$

CodeCogs

11 Dec 12, 10:22PM

Currently we use javascript function document.write(...) to inject into your page a script that contains the entire editor. This in turn uses document.getElementById(..) to locate your div and put the toolbar there.

The problem document.write(...) can only be used when the page is being loaded. Once the page is loaded, you can not subsequently use document.write(...) without simply erasing the page. We're working on a solution to replace document.write(...) and instead the script directly into the head of the document, much like a Json request. Now we know the problem we hope to have a solution soon; its just testing across browsers that take the time.

$CodeCogs\′s Photo$

CodeCogs

11 Dec 12, 11:52PM

Heres how to load the CodeCogs Equation editor on request from a button click or at any other time after the main page is loaded. We've tested this on most major browsers and it seems to work.

We won't incorporate this immediately into the main package, since we're mid way through a major overhaul, with a new platform due to be released early next year.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://latex.codecogs.com/css/equation-embed.css" />
   <!-- <link rel="stylesheet" href="css/stile.css" /> -->
 
    <script type="text/javascript" src="http://latex.codecogs.com/js/eq_config.js" ></script>
    <script type="text/javascript" src="http://latex.codecogs.com/js/eq_editor-lite-11.js" ></script>
 
    <script type="text/javascript">
        var Eqloaded=false;
        function loadCCEditor(id, SID, design, language)
        {
          if(!Eqloaded)
          {
            var fileref=document.createElement('script')
            fileref.setAttribute("type","text/javascript")
 
            var url='http://latex.codecogs.com/editor_embedded_json.php?id='+id+'&SID='+SID+'&design='+design;
            if(language!=undefined && language!='') url+='&lang='+language;
 
            fileref.setAttribute("src", url)
            document.getElementsByTagName("head")[0].appendChild(fileref)
            Eqloaded=true;
 
            var a=new EqTextArea('equation', 'testbox');
            EqEditor.add(a,false); 
          } 
          else alert('Editor already loaded')
        }
    </script>
</head>
<body>
  <div id="editor"></div>
  <textarea id="testbox" rows="3" cols="40"></textarea>
  <img id="equation" align="middle"/>
  <br/>
  <button id='mat' onclick="loadCCEditor('editor')">Edit</button>
</body>
</html>

If you want to incorporate a button to close the editor, and if you think there is a possibility of the user wanting to reopen the editor then I would suggest that you simply hide <div id="editor"></div>. For example, something like the following would do this:

Add to the end of the <script> block above:

var ccVisible=true;
function CCEditorToggle(id)
{
  document.getElementById(id).style.display=ccVisible?"none":"block";   
  ccVisible=!ccVisible;
}

and in the <body>

<button onclick="CCEditorToggle('editor')">Toggle</button>

Let us know if you need any further help

$fiore\′s Photo$

fiore

15 Dec 12, 3:57PM

thank you very much, it works