Alpha plugin for FCKEditor

This is the first release of our new plugin for FCK Editor (v 2.6.3). This is tested on Firefox and Safari, IE checks for compliance will follow. Although this version of FCK Editor has now been superseded by CKEditor 3, we recognise that a lot of people still use the older version so first step it to get it working perfectly with FCK v2.#.#, then move to CK v3.#.#

To see this addin in action goto

http://latex.codecogs.com/integration/fckeditor/_samples/default.html

Then look for the small 'fx' symbol which we've placed in the bottom left of the editor bar. Naturally this can be moved to a more appropriate position in the future.

Check out also the other examples in the _samples directory: http://latex.codecogs.com/integration/fckeditor/_samples/html/

To get to the source code for the plugin goto

http://latex.codecogs.com/integration/fckeditor/editor/plugins/equation/

We're listing the directory content for everything under the integration tree, within which we are gradually installing all the common editors in their default state. Please explore as you wish, but remember that this is a PHP server, so none of the files for ASP etc will work.

Any thoughts or help with development much appreciated.

The related instructions for adding the CodeCogd Equation Editor plugin into FCK is:

• First download the fckeditor plugin and tagprocessor plugin, which you'll find in Plugins
• Copy the files and directories into your plugin directories (you should have two new directories), i.e. ~fckeditor/editor/plugins/equation/*.
• Adjust fckconfig.js adding the following line below the other plugins:

FCKConfig.Plugins.Add( 'equation', 'en' )
FCKConfig.Plugins.Add( 'tagprocessors' ) ;

• Also in fckconfig.js, you need to modify your toolbar, and add 'Equation' as an option. i.e.

FCKConfig.ToolbarSets["Default"] = [
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Equation','Table','Rule'],
] ;

If anyone is wondering why we need two plugins, once called Equation and the other TagProcessor, this is just because we want to make it very obvious that there can only be one script handling all Tag Processing for all addins. Had we lump them together then it becomes less obvious.

CodeCogs, you missed additional "s" in http://latex.codecogs.com/integration/fckeditor/editor/plugins/tagprocessors/ url. The link is broken.

In /equation and /tagprocessors direcories you put two different files with the same name: fckplugin.js. Is it correct to copy these two into ~fckeditor/editor/plugins? How should I rename the later (tagprocessor plugin) and what about equation.gif (should I put it right next to .js files)?

Thanks

Thanks for noticing the typo. You actually want the complete directories, including the files within, so there won't be any clash of names etc.

What you see in the integration directories is actually the default installation with all files arranged exactly as they should look on your machine.

Please note these files are work in progress and will change daily until everything is working correct. So if you notice a bug (for example we know it doesn't work in IE very well), then let us know and hopefully we or someone else can report back here when its fixed.

Sory for asking but I'm still confused about directories :) After copying I should have the tree like this:

~fckeditor/editor/plugins/equation/equation/*all files form "equation" directory*
~fckeditor/editor/plugins/equation/tagprocessors/*all files form "tagprocessors" directory*

or like this:

~fckeditor/editor/plugins/equation/*all files form "equation" directory*
~fckeditor/editor/plugins/tagprocessors/*all files form "tagprocessors" directory*

Also in the first line

FCKConfig.Plugins.Add( 'equation', 'en' )
FCKConfig.Plugins.Add( 'tagprocessors' ) ;

";" is missed

Second version:

~fckeditor/editor/plugins/equation/*all files form "equation" directory*
~fckeditor/editor/plugins/tagprocessors/*all files form "tagprocessors" directory*

Just copy everything you see on our server, directories and all, making a carbon copy!

Just completed a minor update to the addin, so it now works in IE - at least those versions I've tested.

Will

Is there any way to insert the equation code in HTML format rather than default in FCKeditor plugin?

Ok, we've created the first version of a new FCK Plugin that we've called equation_html, which can be found in ~/plugins/equation_html/fckplugin.js

This tries to insert pure html directly into the text, i.e.

<img src="http://latex.codecogs.com/gif.latex?..." alt="...">

To use this you'll need to modify fckconfig.js, so you have:

FCKConfig.Plugins.Add( 'equation_html', 'en' ) ;

removing

FCKConfig.Plugins.Add( 'equation', 'en' ) ;
FCKConfig.Plugins.Add( 'tagprocessors' ) ;

There are a couple of negative to this plugin over the original:

• currently can not double click on an existing equation to edit it.
• you can not use LaTeX notation, i.e. \[ .. \] or ... to create equations without using the editor.

If there is enough interest in this new plugin, then we'll make the above modifications.

Many thanks for the code. It looks perfect. The only reason i need in HTML format is because to display the equation in HTML file. for example preview the equation from the fckeditor. Unless there is another better method to view the equation. your opinion are most welcome. cheers

We clearly need to write some instructions when its all finished. However your request did prompt me to wonder if it wouldn't be better to convert everything to html as you request.

Fundamentally, however you can also run our javascript code which you insert into the top of a page and it converts the LaTeX form of the equations into images. This has the advantage that your html is somewhat clean to read, rather than having images dotted all over the place.

Let us know how you get on either way,

Cheers Will

I have modified the plugin to work with CKeditor. Currently, codecogs script to work with FCKeditor http://latex.codecogs.com/editor_json.php?type=url of course expects FCKeditor methods. Therefore, the plugin script used has to 'pretend' it is FCKeditor to work.

For CKeditor:

1. Copy the http://latex.codecogs.com/integration/fckeditor/editor/plugins/equation_html/ directory and files to your CKeditor plugins folder.

2. Replace fckplugin.js there with the attached plugin.js file.

3. Edit the CKEditor config.js file. In the CKEDITOR.editorConfig section, add the following line:

config.extraPlugins = 'equation_html';

4. In the same CKEDITOR.editorConfig section, amend the toolbar section to include the equation editor button ['Equation'] (don't forget to add the correct commas between the toolbar buttons):

CKEDITOR.config.toolbar_Default = [
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['Link','Unlink','Anchor'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['Equation']
  ];

Would be good to get any feedback about this. Thanks.

I am developing LAMS application and we have recently switched to CKEditor 3.x. We've been using Equation plugin for a previous version of FCKEditor and it was working fine. The plugin nodmonkey created was a great start in rewriting the plugin for 3.x version, but some modifications were required. See the script: It allows to double click and edit an existing Equation image, parsing the formula correctly. Unfortunately, there are bugs that need to be fixed on CodeCogs side (?) to make it work properly.

1. Choosing "Colours..." gives you error "insertText is not defined". Should be EqEditor.insert()?

2. Choosing "Functions..." gives you error "EqEditor.insertText is not a function". Should be also EqEditor.insert()?

3. When editing an existing equation, the update() function is not well defined

update : function(text)
	{			
		if (text.length == 0) {
			alert(FCKLang.EquationErrNoEqn) ;
			return false;
		}	
 
		if ( eSelected && eSelected._fckequation == text )
			return true;
 
		FCKEquation.Add(text);
	}

It should have FCKEquation and eSelected set up from oEditor, just like load() function.

As we want to deploy the plugin soon and changes are rather minor, I would really appreciate a quick reaction.

Thanks!