OpenLatexEditor question

Under Quick Installation (using javascript only) on page:

http://www.codecogs.com/components/equationeditor/equation_install.php

The code is: <a onclick="OpenLatexEditor('testbox','latex','')">Launch CodeCogs Equation Editor</a> <textarea id="testbox" rows="3" cols="40"></textarea>

It says:

"Notice that to launch the editor you use LatexEditor(target, type, language), where target is the id of the input box where the equation should be placed; type defines the output formating for the equation"

The type can be any of the follow:

latex or (default)

Question:

How can I get the editor to return instead of ?

Thanks, msgray

Thank you for your query. Unfortunately Will. is away at present but I am sure will be able to help you on his return early in the New Year.

Hi,

Hope you've solved your problem by now. The install instructions were a little inaccurate (fixed now) however hopefully you were able to follow the example. You want

OpenLatexEditor('testbox','latex','')

To change between returning instead of [1+sin(x)] you need to select 'inline' within the actual editor, since these actually mean different things. i.e. \ is an inline equation, while \[1+x\] should appear on a separate line.

If there is sufficient demand then I can build in an additional switch to set the defaults to either one? Do you think this is needed.

Regards, Will

Hi Will,

Thanks for the reply. I wasn't aware of the inline solution.

However when you tick inline it automatically ticks compression also. In that mode it results in two different size fonts, say in a fraction the top and bottom fonts are different.

The editor then must be closed and reopened and then you must click inline then immediately untick compression. It then comes up with an acceptable

$\displaystyle \frac{22}{7}$

. Note that the result in your post 1+x (which didn't happen)is not acceptable for my purposes which is for use in a TiddlyWiki.

> If there is sufficient demand then I can build in an additional switch to > set the defaults to either one? Do you think this is needed.

Yes I do think it would be worthwhile. Also needing to tick inline is not obvious to the casual user and perhaps could be put into inline mode automatically with the switch.

There are other suggestions I might have as I go that might be solutions of general use also.

I am trying to construct a TiddlyWiki for quick formula generation. It is still a very raw testbed but have a look at: http://twmath.tiddlyspot.com/. Needless to say it's best in FireFox, like most things :-)

Thanks again, Morris

It appears your forum recognizes code. How do I delimit it?

Morris

Hi, to write code in the forum use the keywords \code followed by \endcode

I think we can very quickly adjust the editor for your needs. I see your using yourequations.com; they have gone down the route of needing double dollars (<div class="orangebox">[$$Missing Equation End: $]</div>) either side of an equations. Its an alternative, LaTeX standard which we can also consider. I've also been meaning to implement our own equivalent of the yourequations javascript that automatically scans the html looking for equations and converts these into equations - perhaps I can sort this out sooner than later.

Also we nearly have a plugin for the FCKEditor running. You might like this if you're looking for a WYSIWYG html editor. See http://test.izyba.com/eqeditor_integration/fckeditor/_samples/html/sample01.html and look for the 'fx' symbol in the bottom left. (Needless to say it probably only works in Firefox also!)

If you're on skype perhaps you can call me on willzyba and we can discuss implementation options - I'm always keen to get user feedback and I've a little time today. Will.

Hi Will,

I was using yourequations.com because I found it first. I have no idea how much specialized code they have since I am concentrating on TiddlyWiki. So I will be using CodeCogs and follow your developments along until my needs differ from now.

I've just discovered that you can use the raw editor code in TiddlyWiki. i.e.

[img[http://codecogs.izyba.com/gif.latex?f(x)=\displaystyle\frac{(x
+1)^2}{(x+1)}=(x+1)]]

It also works as well with <div class="orangebox">[Missing Equation End: $]</div> either side of the code. So along with knowing about 'inline' now that issue is resolved for me.

I have installed a plugin in TW Math that allows any tiddler to be published as an HTML page so all equations will be TiddlyWiki markup and the publishing with take care of HTML needs.

So my wish list now only includes having the TiddlyWiki markup, as above, enclosing the equation editor code and being inserted as you now do into a textarea. I don't know how much work that would be and whether it is too specialized to include in the editor. But seeing how you wrap it in HTML and swf code TiddlyWiki markup, square brackets and one word, looks easy:-)

Ultimately I would wish to insert the TiddlyWiki wrapped final code directly into a tiddler in TiddlyWiki. However the experts on TiddlyWiki may need to be consulted to see if it's practical.

The other thing is the issue of compression being automatically ticked when inline is I don't know whether that's intended or a bug. And I also have not been able to successfully get the editor to add the code to the clipboard.

One last thing, does the forum have a preview mode before posting, if so I can't find it.

Best regards, Morris

Hi, I'm actually updating all out equation editor documentation as we speak. If you check the Installation page for the editor, then you'll hopefully find a couple of alternatives for creating equations, including how to form image tags.

For your TiddyWiki needs, I'll create a new 'type' called 'tw', which will return the image in the format you set out above, i.e. try this:

<html>
<script type="text/javascript" src="http://latex.codecogs.com/editor.js"></script>
<body>
<a onclick="OpenLatexEditor('testbox','tw','')">Launch CodeCogs Equation Editor for TiddyWiki</a>
<textarea id="testbox" rows="3" cols="40"></textarea>
</body>
</html>

Notice also now if you specify

OpenLatexEditor('testbox','tw','',true)

then the editor will launch with inline ticket. As for how inline and compression are ticket together, this was done deliberately. Usually when you writing equation inline with other text you want it compressed also. Hence why you use \inline to compress (or better to say suppress) equation height.

Incidentally looking at your image tag example, you're used codecogs.izyba.com. izyba is our test site; we'd preferable it if you use http://www.codecogs.com/gif.latex? to generate equations. Eventually we'll also set up http://latex.codecogs.com/gif.latax, which is a new dedicated domain for the equation work.

As for the forum. No. No preview. If you make an mistake go back and edit it! Happy New Year, Will

Many thanks Will for your quick response to my wish list I am absolutely delighted. It works fine.

As far as using codecogs.izyba.com that is what is being returned by the editor, even for the recent TW modifications.

Because of that and in reference to the URL I'm using, for I was using the script (don't know where I got it: http://www.codecogs.com/components/equationeditor/equationeditor.js

So I changed it to: http://latex.codecogs.com/editor.js as suggested above however that obviously didn't change the return codecogs.izyba.com. Is it because you are using the test site or is it something I can change?

Also the New Installation instructions you mentioned shows the editor return as:

[img[http://www.codecogs.com/gif.latex?1+sin(x)]]

instead of the %nn codes which make it near impossible to check your formula for errors.

Where I live it is about 55 minute until midnight so you need not answer until next year :-)

All the best for the new year.

Morris

Ok, I've turned off the encoding of the elements of the equations, like brackets, so you shouldn't see %nn any more. We need to test to see if this works correctly across a range of browsers - it should be ok.

Sorry for the confusion with codecogs.izyba. Thats been fixed our end. As I said, evenutally we'll be moving entirely to http://latex.codecogs.com/gif.latex?..

Don't know much about TiddlyWiki, but are you doing anything clever in order to integrate our editor into it. We should at least be able to have some text near the edit boxs that launches the CodeCogs editor and returns the appropriate code.

Will

Thanks for that Will, the encoding change makes all the difference. I'm pretty sure it will be all right for other browsers. I'm sure you will let us know when the new server is up and running too.

I've taken TW Math http://twmath.tiddlyspot.com/ to the next level. So have a look at it as a new user and see if it's understandable.

As far as my cleverness (or lack of it:-) is concerned. TiddlyWiki has a tiddler called MarkupPreHead where you can insert the

<script type="text/javascript" src="http://latex.codecogs.com/editor.js"></script>

This allows the editor to be launched from within TiddlyWiki like any other HTML page does.

For a little more about TiddlyWiki see a Google Knol I did on it at: http://knol.google.com/k/morris-gray/tiddlywiki/2xrq5wlfxgkip/2# http://tinyurl.com/7tqkew Be warned TiddlyWiki is addictive for there is little that can't be done with it.

Thanks again for all of your help and willingness to make changes to the editor for me. I'm sure many TiddlyWiki users will appreciate it too. We've accomplished much in the two years we have been cooperating on it :-)

Regards, Morris

Hi, Your adaptions to TiddlyWiki sound great.

I've set up latex.codecogs.com; which will be used now for all equation rendering. Hoepfully I've set everything up rightly, but let me know if you have any problems.

I've also added a link to your TWMath page from our Editor installation page.

Cheers Will

Hi Will,

Thanks very much for the link. I've added powered by CodeCogs to TW Help earlier today also.

I've converted a local version of TW Math to the new server URL and it seems to be no difference so far, congratulations. I haven't uploaded it to the web yet as Murphy may not have had a look at it yet and you know how he fickle he is :-) How long will you be running in parallel?

I released TW Math to the TiddlyWiki community for comment today and it has been viewed by people in 10 different countries so far.

If you feel confident that I should go live with the new URL I will, I probably wouldn't get any feedback if it breaks.

Morris

Hi Will,

As if you haven't done enough already...

I noticed on one of the sites you've linked they can get back to the editor with code inserted via a link. Can I do that and get back to the TW inlne editor? That would be very handy.

<a class="tex" href="http://www.numberempire.com/texequationeditor/equationeditor.php?tex=%7B%7B41%7D%5Cover%7B24%7D%7D" target="_blank">Edit</a>

Morris

Hi, Ok, that should have been a quick addition but has taken me 2hrs! Look at the documentation page. I've added a new parameter called latex, i.e.

OpenLatexEditor(target,mode,language,inline,latex)

You can type in any latex you want to appear in the editor when it opens. Thus, what you'll need to do now is modify the image tags that are created so they have an onclick event:

<img src="http://latex.codecogs.com?gif.latex?1+sin(x)" onclick="OpenLatexEditor('testbox','html','',false,'1+sin(x)')" />

or you can launch it using the <a> tag in a similar way:

<a onclick="OpenLatexEditor('testbox','html','',false,'1+sin(x)')"<img src="http://latex.codecogs.com?gif.latex?1+sin(x)" /></a>

Now both of these are starting to get messy. I see with TiddlyWiki that you've actually coming up with a completely new markup language, namely:

[img[...]]

What you could consider is a new tag for equations. For example in phpBB, they use [tex]...[/tex], you could have

[latex[1+sin(x)]]

Then we can automatically change all of this to one or other of the above and the users wouldn't have to be concerned with how or why.

W.

Sorry Will, Messy is not what we want. I've done a demo in TW Math.

I am very happy with the simple TiddlyWiki markup we already have. The re-editing of formulas is a nice luxury and should be easier than that if I can make myself clear.

There is no need to launch the TW version of the editor or to return the formula to a textbox. Opening the editor with the desired code already inserted is all that need be done, identical to Numbers Empire. After reediting the user just copies the changed formula from the editor's edit box and pastes it back into TW where they wanted it changed. (They could click the add to clipboard button but I've never seen it work in any version of Equation Editor I've seen)

Please follow this link where there are working models of what I had in mind. You can see the code and click on the links and see it work as I described.

http://twmath.tiddlyspot.com/#ReEditFormula

Morris

Hi, You can do exactly the same with us now, try:

http://www.codecogs.com/components/equationeditor/equationeditor.php?tw&latex=1@plus;sin(x)

The only thing to be wary of, and I'm not sure what number empire does with this, is you can't use '+' in a url to a webpage with some browsers. Its a problem will any and all webpages. What we do is replace '+' with '@plus;', and make a conversion back on the server side.

We're aware that the copy-to-clipboard board problem. W

Thanks for that Will. It works great with the textbox included.

I don't know if it's possible to have the smaller popup window open instead of a full page or not for the sake of consistency with the normal editor. Don't spend a lot of time on it if it is hard to do.

A few things I noticed was one which is little thing, the heading of the textbox shouldn't have HTML in it since it's TiddlyWiki markup. Also the textbox has a little graphic beside with overlapping page symbols that creates a popup with embed code for swf in it.

TW Math has moved from under construction to almost beta stage, Have another look to see the results of some of your hard work. The 'See Quick Demo' should tempt even the most disinterested to try it:-) let me know your overall impression.

http://twmath.tiddlyspot.com/

Thanks again, Morris

Both errors are fixed.

As for the popup, there are instruction on: http://www.codecogs.com/components/equationeditor/equation_install.php Look at step 3 under integration details for the Standard Installation.

I should point out btw; that when you can you're better of launching the editor using the javascript code OpenLatexEditor. The only reason for writing this; is that it means we can copy the final equation code directly into your textbox on your website. Opening the page directly by going to the CodeCogs url; will mean you get the editor (at output yellow box at the bottom), by copy to document can never work - this is an internet security feature which stop one website playing with the content of another, and reasonably so.

I've had a look at your demo. It looks great, but I think we could improve the integration. If I click on 'new tiddler' or 'new journal' then I'm confronted with three input boxes, the last of which being the main text. Can we add a new text button, next to 'tags' button. Say 'EqnEditor', which launches our editor using the javascript OpenLatexEditor(...). You should know the name of the text box below, so now you can have people write equations and have it entered directly into the document they are writing.

Its possible I've missed something. Have I? Will.

Hi Will, No you haven't missed anything. It's a great idea.

So I have done exactly that. To preserve the normal new tiddler I created a new class of tiddlers 'new equation' that not only includes the launch box for the equations editor in edit mode; but, also a mini wysiwyg editor for TiddlyWikis as well.

As this focuses my mind it seems I should create a general purpose TiddlyWiki with this package integrated in it ready for use.

I think this is exactly the improved integration you had in mind, take a look. http://twmath.tiddlyspot.com/

Morris P.S. I think google-analytics seriously slows the editor down sometimes.

What you've done is better. But I think we can go further. I see that TiddlyWiki has a toolbar with options for Bold etc on it.

I don't know a great deal about TiddlyWiki, but this seems to have worked - however you cleverer fokes should check this over. Ok. In the file you had online (if you've edited this then the line numbers may have changed). But at around line 5218, find

<div title="QuickEdit_image" modifier="YourName" created="200801120913" modified="200810142209" tags="QuickEditPackage" creator="YourName">
<pre>/%

Immediately before this, insert the following

<div title="QuickEdit_equation" modifier="YourName" created="200801111625" modified="200810170644" tags="QuickEditPackage" creator="Will Bateman">
<pre>/%
|Name|QuickEdit_equation|
|Source|http://latex.codecogs.com.com/integration/TiddlyWiki.php|
|Version|1.0.0|
|Author|Will Bateman - CodeCogs.com|
|License|http://www.codecogs.com|
|~CoreVersion|2.2|
|Type|script|
|Requires|QuickEditPlugin|
|Overrides||
|Description|definition for toolbar button for equation editing|
 
Usage:
QuickEditToolbar: &lt;&lt;tiddler QuickEdit_equation&gt;&gt;
OR
EditTemplate: &lt;span class='toolbar' macro='tiddler QuickEdit_equation'&gt;&lt;/span&gt;
 
**** INSERT EQUATION ****
%/&lt;html&gt;&lt;hide linebreaks&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;tiddlyLink&quot;
	title=&quot;embed an equation - [img[http://latex.codecogs.com/gif.latex?]]&quot;
	onclick=&quot;config.quickEdit.id='eqntarget'; OpenLatexEditor('eqntarget','tw',''); &quot;
&gt;equation&lt;/a&gt;&lt;/html&gt;</pre>
</div>

Now at about live 4880, you should something like this:

%/<<tiddler QuickEdit_replace>>/%
%/<<tiddler QuickEdit_split>>/%
%/<<tiddler QuickEdit_sort>>/%
%/  /% (SPACER)
%/<<tiddler QuickEdit_link>>/%
%/<<tiddler QuickEdit_macro>>/%
%/<<tiddler QuickEdit_image>>/%
%/<<tiddler QuickEdit_tiddler>>/%
%/<<tiddler QuickEdit_file>>/%
%/  /% (SPACER)
%/<<tiddler QuickEdit_format>>/%
%/<<tiddler QuickEdit_align>>/%
%/<<tiddler QuickEdit_color>>/%
%/<<tiddler QuickEdit_font>>/%
%/<<tiddler QuickEdit_css>>/%

At the end of this list add:

%/<<tiddler QuickEdit_equation>>/%

And obviously write at the top of the file, near line 43, you need to add within <head> section

<script type="text/javascript" src="http://latex.codecogs.com/editor.js"></script>

As you have already done.

I think that just about wraps that up. I'm not entirely happy with my addin, only because I have to set the id for the edit box, which I set to 'eqntarget'. Initially this is undefined. It raises an interesting point about how my editor it integrated into systems like this; perhaps there is a cleaner way to pass through a pointer to the object where the code is dropped. But for the mean time I hope this works ok for you.

I've put the amended TiddlyWiki here http://latex.codecogs.com/integration/tiddlywiki/twmath.html

(this file is a bit of a mess with other trials/errors I was playing with - would be nice to have a clean version at some point here).

You're right TiddlyWiki is addictive - its a very impressive system Regards Will.

Well you've done it now Will. It's all over for you. You are about to be sucked into the TiddlyWiki vortex.

You weren't aware of this, but you've modified the core of a TiddlyWiki which is a serious no-no. And is not at all necessary. So as punishment I will give you a shot of TiddlyWiki addiction:-)

I've taken your Jack The Ripper programming from the carcass of my TW Math and made a tiddler from it:-) "line numbers", "pass through a pointer to the object"....<sigh> You C++ people are so.... so pre-911, like out of date man...

So now you will know the beauty of TiddlyWiki. You do all communications with the core via tiddlers. Put JavaScript on a tiddler and tag it systemConfig and it becomes a plugin. Put CSS on a tiddler and put it in StyleSheet and it styles anything you want. Put HTML on a tiddler and it becomes whatever you can do with HTML, oh the ecstasy of it all....

You ask what can TiddlyWiki do? Anything! As one developer said after looking at my TW Help site "..makes one wonder what the heck php, pearl, cgi and all that other stuff is fer! lol."

So our three days work is now a tiny tiddler that creates a tiny button for a little plugin. It's what I dreamed of all along but of course it's obsoleted a raft of TiddlyWikis and possibly a whole new industry but you can't stop evolution.

See the Equation Button tiddler here http://twmath.tiddlyspot.com/

Go here and get a brand new empty TiddlyWiki http://tiddlywiki.com/

Before you do anything else go and read this http://twhelp.tiddlyspot.com/#TiddlyWikiWoes be sure to click some of the embeded links :-)

Become a TW developer by studying this to get started http://www.tiddlywiki.org/wiki/Main_Page

Go to my TW Help site and browse for a day or two. http://twhelp.tiddlyspot.com/

Thanks a lot Will, I guess we've 'buttoned' up this project.

I'm heading for bed, Morris

Hi, Thanks for that. Lets just say I knew their must be an easier way - but I rarely like to read manuals. 'Searching' through the code is often a quicker solution and it does mean I learn how the backend works ;)

Will you submit the equation tiddler to http://tiddlyvault.tiddlyspot.com/

Take care Will. p.s. New version of editor will be coming online over the next few days; Also implementing MnSymbols which should extend the quality and type of equations we can create.

Hi Will,

I was working on a more comprehensive math TiddlyWiki when I realized I already had a solution to a certain class of user so I integrated it into the more general note taker TWT-Notes.

http://twt-notes.tiddlyspot.com/ just start a new tiddler... CodeCogs Editor is there awaiting to be used.

I have created a CodeCogs equation plugin for TiddlyWiki to use in it and once I run it for a while I'll release it to the wild. Oh, It took me quite a while to find the hidden mod to the TiddlyWiki core you did. So to take the path of least resistance I hijacked the whole of the config.macros.edit.handler for the plugin.

Am looking forward to your changes/additions to the editor ( just don't muck up what we've done for TW :-)

Am also looking forward to getting my nights and days back into the right order :-)

Regards,

Morris