Installing the CodeCogs Equation Editor v2.05


Example Screen Shot (Click to see the real thing)

News
Since launching version 2 of our Equation Editor in Jan 2008, over 1200 websites now use CodeCogs to generate their equations!

Introduction

The CodeCogs Equation editor is a free open source editor that produced equations using LaTeX. The editor can be easily extended and adapted for any particular need, allowing it to be embedded into a range of WYSIWYG editors and used in many different scientific disciplines.

Everything you need to install and configure the equation editor on your own website is provided on this page. Alternatively if you don't want to install anything (perhaps you want to create equations on a 3rd party forum or blog), then the editor can be used to construct HTML code (see the yellow box at the bottom of the editor) that generates the graphical equations using the CodeCogs servers. If you are familiar with LaTeX, then you can also write the equations out by hand, avoiding the need to use the editor at all.

For example, the following code:

<a href="http://www.codecogs.com"><img src="http://www.codecogs.com/eq.latex?1+sin(x)" border="0"/></a>
will create:

For faster and more reliable service, you should install the CodeCogs Equation editor on your own server. This can be achieved in one of two ways:

  1. You can install the complete system, include LaTeX and LaTeX Render onto your server. This will almost certainly require you to have root access to your server (i.e. you're running this on your home machine, or you have bought a dedicated server - most web hosting packages don't allow you to install software at root level).
  2. Alternative you can install the front end LaTeX editor and use the CodeCogs servers to render and generate all your equations (this is the default approach). While this method is free, we require you to display a small CodeCogs logo on the corresponding pages that linking back to us.

Details and examples of installing the Equation Editor are given below:

Complete Installation

If you want complete control over the equations generated on your server, then you need to install the following packages:

You will then have to make the following modification:

  1. You must modify you .htaccess file (in your sites root) so it includes the following:
    RewriteEngine On
    RewriteRule ^eq\.latex?(.*) /components/equationeditor/rawequation.php [L,NC]  
  2. In 'rawequation.php', modify the 4th line and specify the position of your freshly installed LatexRender, i.e
    define('LATEXRENDER','/latexrender/latex.php');
  3. In 'equationeditor.php', modify the 2nd line with your servers url, i.e.
    define('EQUATIONENGINE','http://www.codecogs.com/eq.latex');
    Note: the eq.latex, equates directly to the rewrite rule you set up in (1), so if you change one you must change both.
  4. In 'js/eq_editor.js', you need to search for the function 'function renderEqn(callback)' and adjust the two separate lines:
    img.src='http://www.codecogs.com/eq.latex?' + val;
    document.getElementById('eqcoderaw').value='<img src="http://www.codecogs.com/eq.latex?' + val+'"/>';
    so they refer to your servers url. As in (3), if you use a different rewrite rule in (1) then adjust as appropriate here also.
  5. You must allow apache and php to write to the '/latexrender' directories, i.e.
    cmhod 777 latexrender
    chmod 777 latexrender/tmp
  6. In /etc/php.ini turn off Magic Quotes (they are due to be depricated anyway: http://uk3.php.net/magic_quotes.
       magic_quotes_gpc = Off
    
Not working?

If you want to test your installation then log into your server shell and type "latex", you should see something like "This is pdfeTeX, Version 3.141592-1.21a-2.2".

For the most part on Unix you should be able to install LaTeX using "yum", i.e. "yum install latex" and also "yum install latex2html" (Might be able to miss out the first step), then use "whereis latex" etc to find the location of "latex", "dvips" and "convert" and set the paths in the file "class.latexrender.php". For Windows installations check out MiKTeX described at LaTeX Render.

Please remember for all of this, you most certainly need to have 'root' access to your server. Check with your web server provider, if you're still unsure then you most probably don't have access and you should consider using the 'Light installation' below.

If having installed LaTeX successfully, then why not donate some of your spare computing power and allow others to use your server to create equations on their website. If you would like to do this, then please email us at: CodeCogs

Light Installation

The light installation can be installed onto any PHP enable website and merely required that you download and install the core equation editor files: Please register and login to download the equation editor code.

No modifications to the downloaded code are necessary as all the equations will be rendered using the CodeCogs servers, therefore you do not need to configure and install LaTeX and LatexRender. However we do politely ask that you display the following small banner on the main pages that use equation generated by our servers:

CodeCogs - An Open Source Numerical Library

This logo is created using this code:

Please note: We reserve the right to disable the rendering of equations to any website at any time. CodeCogs (and Zyba Ltd) intend to run this free service for the forseable future (certainly for the next two years), however this service is intended for small websites with light usage, if you expect to be making heavy demands on our servers then warn us. We will suspend this service to anyone we feel is abusing our generosity and will certainly be less considerate to those who do not recognise our contribution to their website.

If you don't want to display our banner, then you should not install the equation editor in this way and you should set up your own LaTeX rendering engine (see Complete Installation above).

To avoid disruption or miss-understandings, we recommend that you also email us your contact details (or CodeCogs login) together with details of your website url to: CodeCogs Services.

Integration Details

Regardless of how you ultimately install the equation editor, the CodeCogs Equations editor can be launched in four main ways:

  1. In it simplest form, you can launch the equation editor simply by loading 'equationeditor.php' within your browser, e.g. The following line
    <a href="http://www.codecogs.com/components/equationeditor/equationeditor.php" target="_blank">
    Launch CodeCogs Equation Editor</a>
    
    which creates: Launch CodeCogs Equation Editor
  2. Usually however, you want the result from the equation editor to be entered into a 'input' or 'textarea', for this purpose you would design you page in this way:
    <a href="http://www.codecogs.com/components/equationeditor/equationeditor.php?target=testbox" target="_blank">
    Launch CodeCogs Equation Editor</a>
    <textarea id="testbox" rows="3" cols="40">
    </textarea>
    which creates:
  3. In these past two examples, the editor is launched in its own completely new browser window. While acceptable, it is usually nicer if it is opened within a popup window of an appropriate size. To achieve this, you first need the following piece of javacript, which you should add to the head section of your main HTML document (that open the editor),
    <script type="text/javascript">
    var popupwindows = new Array();
    function popupnr( url, windowname, refocus, width, height )
    {
    	if(typeof(popupwindows[windowname])!='undefined')
    	  newwindow = popupwindows[windowname];
    	else newwindow=null;
    
      if (newwindow==null || newwindow.closed || !newwindow.location) 
    	{
    		newwindow=window.open(url,windowname,'width='+width+',height='+height+',status=1,scrollbars=no,resizable=1');
    		if (!newwindow.opener) newwindow.opener = self;
    		popupwindows[windowname]=newwindow;
    	}
    	if (window.focus) { newwindow.focus() }
    	return false;
    }
    </script>
    Now, when you need to launch the equation editor you can use:
    <a href="http://www.codecogs.com/components/equationeditor/equationeditor.php" 
      onclick="return popupnr(this, 'equation', 1, 700, 450 )">
    Launch CodeCogs Equation Editor</a>
    
  4. You'll notice in this last examples the equation placed in the textbox is in a DOxygen form, using \f[ ...\f] or \f$ ... \f$ to signify the start and end of the equation. Perhaps not ideal for you, but the equation editor was initially designed for CodeCogs! As alternatives:
  5. FCK Editor. The Equation Editor will also work with the WYSIWYG FCK Editor.

Customising

This equation editor is designed to be flexible and allow the equation symbols to be expanded and adjusted as need be. In the directory '~/equationeditor/panels' you will find all of the existing panels. If you would like to create your own, we recommend copying one of these and then modifying it. The structure is fairly obvious:

Please send us any new customisations that you develop so we can add them to the base design or offer them to other users as alternate configurations for other industries and applications.
Please support this service. If we can raise enough money we'll create a dedicated server just for rendering LaTeX.

Credits

The CodeCogs equation editor is written by Will Bateman with advice and assistance from Steve Mayer. It also contains many neat Javascript enhancements by Thornahawk, which make the toolbar buttons more interactive.

Version History

Others Sites Using the Editor

If you are already using our equation editor, then please let us know so we can add you to above list and give users a range of alternatives.

Page Comments

Math foru\′s Photo
12 Jul 08, 1:45AM
(3 replies)
problem with rawequation.php or latexrender ?
Hi,
As you can check here http://www.mathforu.com/equationeditor/equationeditor.php it doesn't work when using the backslash symbol (with frac for instance).
Plain formulas without backslash work fine (2^3 for instance).
It also works fine when I make work the equation editor with my current mimetex.cgi instead of eq.latex (redirected to rawequation.php)
Any idea of what to do ?
will\′s Photo
12 Jul 08, 7:15AM
I'm fairly certain your problem is within rawequation.php

Fundamentally there is nothing wrong with it, but I suspect you have 'magic quotes' turned on which is nipping around and turning all '\' into '\\' . Compare the following:

http://www.codecogs.com/gif.latex?1\\sin 2
1\\sin 2

http://www.mathforu.com/eq.latex?1\sin 2
1\sin 2

Notice I've added an additional '\' in the equation I send to CodeCogs to achieve the same result.

----

As a test. In rawequation.php, can you try this (add second line):
$text = trim($_SERVER['QUERY_STRING']);
die($text);

Then run rawequation directly from the webbrowser with http://www.codecogs.com/gif.latex?1\sin&space2 and you'll see exactly what is being passed into rawequation.

As for a fix, my bet is go into /etc/php.ini and turn MAGIC QUOTES OFF, as in
magic_quotes_gpc = Off

You'll notice here http://uk3.php.net/magic_quotes that magic quotes will be deprecated in the future, so you shouldn't really rely upon them. One other alternative, is leave Magic Quotes as is, and do
$text = trim($_SERVER['QUERY_STRING']);
$text = stripslashes($text);
But I wouldn't guarantee this will work, but please try.

To help others, can you report back what works or not?
Math foru\′s Photo
13 Jul 08, 8:06AM
Bingo ! It works great when magic_quotes_gpc = Off
Thank you for this editor, very good tutorial, and great support !
CodeCogs\′s Photo
13 Jul 08, 8:48AM
Remember to Dig us... Please :)
CodeCogs\′s Photo
11 Jul 08, 12:30AM
Equation Editor v2.1
A new level of flexibility has been added to CodeCogs, which allows the following image formats to be generated:

To read more about this, see the main new article http://www.codecogs.com/pages/forums/pagegen.php?id=1047
rustam\′s Photo
27 Jun 08, 10:07PM
(7 replies)
complete installation problem
Trying to install renderer and editor locally, but still there are some problems with paths. While equationeditor seems to work fine (with renderer running on codecogs) renderer installed locally doesn't work. Spent a few hours, still looking for the cause. Renderer is not well parameterized, cause too many pathname fixes are needed. Anyone had the same problem? Seems that while equationeditor was updated latexrenderer remained old version. Could someone provide more information on complete installation plz?
will\′s Photo
30 Jun 08, 9:48AM
Hi, If you download the version to latexrender that on the equationeditor installation page this should be up to date. I will however double check later today.

Are you sure you have you copy of LaTeX installed correctly, have you run from the command line the commands to find out where LaTeX is installed? The main problem people have is setting up the .htaccess file, which is required to make the necessary redirects.

Let me know whats works. Also if you think the instructions are unclear, then please recommend improvements. Will
rustam\′s Photo
30 Jun 08, 10:02AM
LaTeX binaries work from console just fine, and .htaccess has required redirects. I'm looking for possible solution... I think that customized latexrenderer has some incompatibilities with latest equationeditor. For example is refers to "tmp" while actual folder name is "tmp-pictures", also in latexrenderer files there are some hard coded paths, and LATEXRENDERER var. is not used and some others. Could you please review latexrenderer package for recent changes that are not reflected in equationeditor or vica-versa?

Thank you.
will\′s Photo
30 Jun 08, 9:55PM
Hi, I've uploaded the latest files, so what you download is identical to that used on CodeCogs.

The tmp-pictures directory is miss-leading. It shouldn't be there (sorry!). The script should automatically create the directory into which is drops the equations. The reason for this, is when we call latexEqn (in latex.php), we're able to specify the subdirectory to use. We utilise this within CodeCogs to separate the equations we generate for the different websites. What you need to check is that you have given php write permissions to your '\latexrender' directory. 'latexrender' btw I would install at the top level within your website along side index.html etc.

There should however, also be a \tmp directory, into which the underlying routines called by latexrender class can operate. This was omitted in the original version.

If you have set the write permissions correctly, then you should see the directory \latexrender\equations created.

Hopefully this will get you going a bit further. Let me know what works or doesn't.
will\′s Photo
30 Jun 08, 10:12PM
Instructions above have been updated to include
chmod 755 latexrender
chmod 755 latexrender/tmp
rustam\′s Photo
8 Jul 08, 8:20PM
Thank you, I followed your instructions and it works. I faced only one problem: when I change equation size from 12pt to any other it says "Invalid eqation". Could you please help me with that?

I want to add some installations notes for Ubuntu users.

1) by default latex and imagemagick binaries are installed in correct locations.
sudo apt-get install texlive-latex-base
sudo apt-get install imagemagick
above will install required binaries

2) enable mod_rewrite
cd /etc/apache2
sudo ln -s ../mods-available/rewrite.load rewrite.load

3) allow overriding

fore default document root (/var/www)
sudo vim /etc/apache2/sites-available/default
change
AllowOverride None
to
AllowOverride all
P.S.: I've installed equationeditor to [docroot]/libraries folder, but latexrenderer was installed in [docroot]
will\′s Photo
8 Jul 08, 10:24PM
In class.latexrender.php, you'll find the following function
function setFontSize($size)
{
  $this->_font_size= $size;
  if($size<10 || $size>12)
    $this->_latexclass='extarticle';
  else
    $this->_latexclass='article';
}
In other words for font sizes outside of 10 to 12pt, you need to have the extarticle latex package installed.

I can't for the life of me remember if we needed to install extarticle or not - its possible one of the other developers did for another reason so I just found it there. I'll ask about. A link though you should read: http://www.tug.org/teTeX/tetex-texmfdist/doc/latex/extsizes/readme.extsizes

Thanks also for the install instructions. I'm gradually working on the installation details for a number of major gui browsers. Once this is complete I'll move your instructions in there also, so send any other notes you see fit also.
rustam\′s Photo
15 Jul 08, 5:49PM
Thanks Will, you put me in right direction. extarticle class is located in extsizes which is available along with many other latex goddies in package called texlive-latex-recommended.

sudo apt-get install texlive-latex-recommended

Now it all works fine!
mathscours\′s Photo
25 Jun 08, 2:42PM
Thanks
Great equation editor. I use it on my french site http://www.maths-cours.fr works fine!
mathson\′s Photo
28 May 08, 1:58PM
many thanks
hoanbq\′s Photo
20 Apr 08, 1:43PM
(1 reply)
Typing Error
An typing error in JavaScript code in Integration Details item 3

<script type="type="text/javascript">
CodeCogs\′s Photo
20 Apr 08, 3:08PM

Thanks for that. Fixed.

kamaris\′s Photo
5 Apr 08, 8:36AM
(1 reply)
how to install equation editor plugin to fckeditor
hello,

I am using fckeditor and I am trying to install the equationeditor plugin but the fx button does not appear in the fckeditor toolbox.

Also I have difficulty to install the complete latex extender at the server that uses windows. Finally I can not find the (You must modify you .htaccess file (in your sites root) so it includes the following:

RewriteEngine On RewriteRule ^eq.latex?(.*) /components/equationeditor/rawequation.php [L,NC] )

Please help me with these problems and sugest me an alternative solution.
will\′s Photo
5 Apr 08, 9:22AM
Hi,

I forgot to add a key element to the FCK instructions (opps). You need to add 'Equation' to your tool bar somewhere, as in the following example:
FCKConfig.ToolbarSets["Default"] = [
	['FitWindow','-','Source'],
	['Cut','Copy','Paste','PasteText'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Equation','Gallery','Table','Rule'],
] ;

You won't need to install latex or change the .htaccess file unless you want to generate the equations from your server. A lot of people can't install this software, so by default this system will use our server at CodeCogs to generate your equations, meaning you don't have to worry about this stuff.

---- I'm going to update the FCKEditor plugin shortly and make it more universal (currently its design for CodeCogs!). Just trying to find the time between my real work! However if you can't wait, then the above should get you going. Just remember to to do the following before trying to display the equation anywhere else:
$html=  preg_replace('/\\f$(.*?)\\f$/','<img src="http://www.codecogs.com/eq.latex?\inline $1" />', $html);
$html=  preg_replace('/\\f[(.*?)\\f]/','<img src="http://www.codecogs.com/eq.latex?\$1" />', $html);
s.sharma\′s Photo
9 Mar 08, 1:22PM
(1 reply)
Thanks
Fantastic equation editor. Been looking for ages like this.
agrajag9\′s Photo
29 Mar 08, 5:15PM
I love this thing! I found it through Thornahawk's Numerical Analysis Notes and have since added it to my site: http://www.a9development.com/equationeditor/equationeditor.php I use it mainly in my forums: http://www.a9development.com/forum/

  You must login to leave a messge


Bookmark page with: