TinyMCE3 Integration

TinyMCE3 Integration

by Glen Davies -
Number of replies: 125
I know some editor replacement options are being worked on for Moodle 2.0, but we are about to lanuch into a major trial of Moodle and are not happy with some of the htmlarea problems/limitations, so I am working on a temporary TinyMCE version 3 integration to tide us over. It uses a method outlined by Mauno Korpelainen at
http://moodle.org/mod/forum/discuss.php?d=76912
of turning off the default editor and adding the required tinymce to the theme header.html file.

I have also integrated slightly modifed versions of the moodle image and file link browser dialogs from htmlarea.

There are still a couple of problems to iron out, but it seems to work ok, and is implemented in a way that should survive any intervening upgrades in Moodle and TinyMCE.

If anybody else is interested details and a demo can be found at
http://www.host4learning.com/moodlemce/

Average of ratings: -
In reply to Glen Davies

Re: TinyMCE3 Integration

by Aaron Fulton -
I've been working on integrating tinymce3 with moodle over the last week as well (quite independently). You can read my howto here http://webtolife.org/webtolife/content/tinymce-and-moodle-howto

In reply to Aaron Fulton

Re: TinyMCE3 Integration

by Aaron Fulton -
Hi all,

I thought it was about time I posted an update about the integration. I have been working with Glen's code and am getting quite close to having it fully integrated into the admin section of Moodle.

I changed the "enable html editor" tick box to a dropdown where you can select no html editor, htmlarea, or tinymce. I have then used select/case statements to add conditionally to the code that renders the html editor. The upshot of this is that I have added tinymce without needing to touch any code that drives the htmleditor (hopefully this will mean that stuff does not break!).

I am part way through hooking up all of the rest of the html configuration screen so it works for tinymce also. Ill post some patches when I'm done.

PS I also see that tinyMCE v3 has now been released!!
In reply to Aaron Fulton

Re: TinyMCE3 Integration

by Marc Grober -
SInce Mauno's xinha is a drop in replacement for htmlarea, could we also put xinha in its own directory and then provide a switch at the locus you propose that simply redirects the flow from /lib/editor/htmlarea to /lib/editor/xinha? This adds another option at what looks like minimal investment and provides transitions options for folks who just won't let go of htmlarea....
In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

I have in fact two versions ready - the full htmlarea replacement (TinyMCE or Xinha so far) is for easy testing and the package version with option to select editor is done so that Xinha is in folder lib/editor/xinha , tinymce in folder lib/editor/tinymce , htmlarea in lib/editor/htmlarea and fckeditor inb lib/editor/fckeditor.

Selection is made currently from user profile (user/editlib.php) dropdown box with options No editor - Htmlarea - TinyMCE - Xinha - FCKEditor and code is separated in two points:

In theme/standard/meta.php I have lines:

<?php
if (!empty($USER->id)) {$eprof = intval($USER->htmleditor);}
else {$eprof = 1;}
include_once($CFG->dirroot.'/lib/editor/'.$eprof.'/meta.php');
?>

and each folder lib/editor/0-4 has different editor functions taken away from weblib.php and optional init code. With custom themes (standard meta not included) it is possible to get custom editor functions as well so editors are both selectable and configurable.

Administration is separated in lib/adminlib.php that has right now code:

<?php
global $USER, $CFG, $COURSE, $HTTPSPAGEREQUIRED;
if (!empty($USER->id)) {$eprof = intval($USER->htmleditor);}
else {$eprof = 1;}
include_once($CFG->dirroot.'/lib/editor/'.$eprof.'/adminlib.php');
?>

and each folder lib/editor/0-4 can have different adminlib.php

Although adminlib.php has changed in different versions of moodle it should be possible to create different versions of editor package for different versions of moodle.

There are still a couple of tiny problems to solve like should we have only one settings for $cfg->editorhidebuttons or should we have different config settings like $cfg->editorhidetinybuttons and $cfg->editorhidehtmlareabuttons ...

An editor swich button in editor toolbar could be possible too ... or at least outside editor like Editor shortcut keys button.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Marc Grober -
Mauno....

I'd like to test out your latest package version but am not sure where it is.

Did you clean out xinha a bit. If some of the extraneous was cleaned out a bit it would make for a quicker download ;=}

I really like the idea of multiple editors and hope that ends up in the 2.0 core if the overhead isn't too much - it would be nice if people developing editors and plugins would consider writing towards common APIs.

btw, spoke to Pete Jipsen today.... he indicates that there may be some improvements coming for asciimathml this summer and he is very interested in latest developments and will try to get involved once the semester is behind him.

In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

I will clean the code of Xinha a little bit today and when next weekly moodle packages are downloadable tomorrow I'll add the code to the latest 1.9 and 2.0 for testing and send you a link so that you can download the package. I can try to get that TinyMCE Asciimathml plugin ready for this package too - if I have time to do it today - and leave fckeditor to wait for a while (configuration of fckeditor is not ready yet)

Right now the full package with htmlarea, tinymce, xinha and fckeditor exists only on my test server and home pc.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Marc Grober -
Well, up to you.... I am not pushing you as you are already cruising at Mach 3.
I have quite a bit of resources unused at the moment on Dreamhost, so if you wish to post anything for testing let me know. Especially with respect to the full package.

re asciimathml, the 2.0.2 files are on sourceforge here: http://sourceforge.net/project/showfiles.php?group_id=106148 and you can just pull the current version of the js out of the zip and place right in the Equation plugin directory and it works just fine.
In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

You will get the full package tomorrow, Marc

My test version has now option to select editor with asciimathml or without asciimathml so you don't need to load asciimathml scripts or filter unless you need them. Maybe the editor selection could be also a part of (course) themes so that such courses that need equations could use equation editor and other courses that do not need mathematics could use other theme without mathematical buttons and scripts (they might have some other optional plugins for language teaching etc).

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Marc Grober -
Mauno,

Maybe I wasn't clear about my concern, or maybe you have out-thunk me....
It looks like you use Equation Editor it inserts a reference to the asciimathml.js that it uses from /lib/editor/xinha/plugins/Equation.

If one has asciimathml set up as a filter, it means that you already have asciimathml.js installed in /filter/asciimath

While it is no present biggie for there to be two versions of asciimathml.js on the system (though there is an obvious risk of eventual conflict....) if one has the filter installed but wants to use the equation editor there should be a way to leave equation editor in, but disable the insertion of the reference... Is that what you have done??

Frankly, the more I think about it, I think I would require the install of asciimathml in /filter/asciimathml and then provide links from there to the Equation Editor plugin . That way the plugin always remains in sync with the base asciimath code. If the user does not want to use the filter, he simply need not turn it on.... Does that make sense to you?

The only gotcha I see in that is how to do symlinks from a zip.... since zips are de rigeur a la moodle...

Thank about that and let me know if you are understanding where I am coming from....

and I am still looking for some help understanding how Equation editor is adding the static reference to the script

Thanks

marc
In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Yes it makes sense - I was just thinking that filter is a site wide setting and we could use editor js file as a "personal filter" that you can turn on and off from your profile - then you don't need the filter at all. Users of IE get unnecessary notes about asciimathml if filter is on for all users...

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Marc Grober -
Actually I would love to see the ability to tag files for filtering so that only the pages you want filtered went through the filter.....

As far as IE, IE users are a special case anyway vis-a-vis asciimathml as the purpose of asciimathml is to create runtime MathML, which IE can't read without a plugin. I guess I am prejudiced as I think of IE as broken.

But yes, personal filtering sounds great.... problem comes when an author is creating material expecting the results to be filtered - so I guess an author will have to advise readers to turn their filter on, and the filter has to be available to everyone

How do you propose to do personal filtering though. And is this getting too complex?

Same underlying concept applies though... it makes most sense to have one copy of a file in the system. Where will the directory live? And, btw, the asciimathml directory has filtering for svg graphing, and a calculator... OY!

So, I guess what should we do near term, mid-term and long term.... maybe near term meaning develo0pmentally now, mid-term meaning for 1.9.x and long term being for 2.0 or later?
In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

I think we can do both. We can let asciimathml filter files to be in filter folder and change code of equation plugin to use the same file as filter. In editor selection drop down list we may give both alternative to use Xinha with asciimathml and xinha without asciimathml the same way as we can use theme selector... and we may also add filter file selection to (course) themes if we want.

In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Marc, it's here: http://moodle.org/mod/forum/discuss.php?d=96160

Note that xinha is in folder xinha and htmlarea in folder htmlarea - take backup of your own modifications before testing.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Marc Grober -
I am interested in the preview problem as plugging the 2.0.2 version of asciimathml into the copy of xinha you pointed me to earlier seemed to work without a hitch. Can you provide more detail about where yu are seeing the problems and what the diffs are between the xinha I downloaded before and what you have posted now?

As far as the warning.... seems you are suggesting that one one has applied your zip as an upgrade there is no going back? Just out of curiosity do you have a list of the files you changed outside lib/editor? Not having eclipse targeted at a live server is the pits.
In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

With the old js file right preview window of dialog window shows preview of equation no matter wher I place the script but the new version does not seem to render preview. It gives otherwise correct code...

I dropped module folder (it was my own modification before) and placed asciimathml to plugins folder only and tested using filter for theme scripts and editor scripts too...maybe I missed some path.

Attached a short patch file. While doing this patch I noticed one missing thing in message editor and updated files message/discussion.php and message/send.php to my test server.
 
In addition to these changes to files of moodle I have of course written tons of code for those files that do not currently exist in moodle and added new files to tinymce and xinha folders - the actual integration files of tinymce (editor theme "standard") and Xinha .

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Marc Grober -
The asciimathml issue with failing to preview seems to come from the failure of this function to insert backticks and I am also seeing some bizarre behavior in that when one goes back into a document to insert another equation one finds that the prior equations have been converted in the document into MathML which is now NOT displaying.

function preview() {
if (document.getElementById("inputText") != '') {
var str = document.getElementById("inputText").value;
var outnode = document.getElementById("outputNode");
var newnode = AMcreateElementXHTML("div");
newnode.setAttribute("id","outputNode");
outnode.parentNode.replaceChild(newnode,outnode);
outnode = document.getElementById("outputNode");
var n = outnode.childNodes.length;
for (var i = 0; i < n; i++)
outnode.removeChild(outnode.firstChild);
outnode.appendChild(document.createComment("`"+str+"`"));
AMprocessNode(outnode,true);

}

Here are examples:

<p> <span class="AM"><span title="`(x+1)/(x-1)`" style="font-size: 1em; font-family: serif;"><span style="font-size: 1em; font-family: serif;"><math title="(x+1)/(x-1)"><mstyle fontfamily="serif" displaystyle="true" <mathcolor="black"><mfrac><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow><mrow><mi>x</mi><mo>-</mo><mn>1</mn></mrow></mfrac></mstyle></math></span></span></span> </p>

<p> <span class="AM"><span title="`int_a^bf(x)dx`" style="font-size: 1em; font-family: serif;"><span style="font-size: 1em; font-family: serif;"><math title="int_a^bf(x)dx"><mstyle fontfamily="serif" displaystyle="true" mathcolor="black"><mrow><msubsup><mo>∫</mo><mi>a</mi><mi>b</mi></msubsup></mrow><mrow><mi>f</mi><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow></mrow><mrow><mi>d</mi><mi>x</mi></mrow></mstyle></math></span></span></span> </p>

<p> <span class="AM">`int_a^bf(x)dx`</span> </p>

Notice that the first two equations have been converted to MathML when xinha is reopened. The third equation is in ASCIIMathML format and will display correctly based on the backticks which are inserted in the page by xinha, but do not appear in Equations Editor (which is may be why Preview fails.) This may be also a malfunction of the Show MathML button. Will keep looking at this.

In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

So a quick look tells that if you want to use the latest version of ASCIIMathML.js you must also change /lib/editor/xinha/plugins/Equation/popups/dialog.html to use correct functions to preview equation. If you use old version of ASCIIMathML.js content of preview window is different.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Marc Grober -
Yes, That is where I have been looking (/lib/editor/xinha/plugins/Equation/popups/dialog.html) and it seems that the function is not picking up the inputText (failing the null string test) but it is clear to me that the editor is also going through and translating what it finds already present in the document. Is this a AMtranslate issue (switch added in version 2)?
In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

The problem comes from this function in ASCIIMathML.js (old function shows preview and mathml tags)

function AMprocessNode(n, linebreaks, spanclassAM) {
  var frag,st;
  if (spanclassAM!=null) {
    frag = document.getElementsByTagName("span")
    for (var i=0;i<frag.length;i++)
      if (frag[i].className == "AM")
        AMprocessNodeR(frag[i],linebreaks);
  } else {
    try {
      st = n.innerHTML; // look for AMdelimiter on page
    } catch(err) {}
    if (st==null || /amath|\\begin{a?math}/i.test(st) ||
      st.indexOf(AMdelimiter1+" ")!=-1 || st.slice(-1)==AMdelimiter1 ||
      st.indexOf(AMdelimiter1+"<")!=-1 || st.indexOf(AMdelimiter1+"\n")!=-1) {
      AMprocessNodeR(n,linebreaks);
    }
  }
  if (isIE) { //needed to match size and font of formula to surrounding text
    frag = document.getElementsByTagName('math');
    for (var i=0;i<frag.length;i++) frag[i].update()
  }
}

It might be possible to change dialog.html to render latex as well because ASCIIMathML.js has those LM functions. Then other browsers than firefox would show equations too...

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration - one asciimathml issue down

by Marc Grober -
We are looking at the two different side of the same issue ;=}

I have been playing with dialog.html because I have been using the current asciimathml.js script and know it has been working fine for all other purposes. ;=}

FYI, asciimathml.js parses and displays both asciimathml text expressions and LaTex text expressions, the former by using amath..endamath or `..` and the latter using the typical $..$ The Equation Editor should be able to do either, as you state, because everything is built into the script; all you would have to do for insertion is have a button that selected what you were tokenizing with, as well as set up dialog.html to handle the tokens. I am hoping we will also have a table for OpenOffice Math this summer for both asciimathml and dragmath (dragmath now does asciimathml)

As to fix, etc..

(1) for the preview issue:
I first added the amath token a text expression I created in the lower left Equation box, and the preview immediately showed up on the right and the showmathml button worked, so my assumption was that the editor in parsing and reparsing was not placing tokens correctly for the 2.0.2 script.

The preview function of dragmath.html is supposed to add the backticks in for viewing, but they are not showing up.... So, I changed the backticks to amath and endamath and voila, the text expression showed up, but was not parsed! Then I added the ticks back in so: outnode.appendChild(document.createComment("amath`"+str+"`endamath"));
and preview works just like its supposed to.....

So, the quick fix is I reversed the extra tokens like so:
outnode.appendChild(document.createComment("`amath"+str+"endamath`"));
Problem solved.

(2) It looks to me like node2string is being called when the Equation editor opens and is what is responsible for converting all the existing text expressions into MathML, which is behavior we do not want. In other words, the second time you try to edit the same document the editor converts the the backticked span into something with math title= followed by the MathML, and THAT should ONLY ever be called as a result running showMathML when the showmathml button is pressed, and then it should be displayed ONLY, not inserted into the text area.....

(3) I just noticed that the equation construction part of the editor (operation.html) is not displaying. Since I have never used Equation before I did not know if that was correct behavior. Is operation.html supposed to be visible somehow??
In reply to Marc Grober

Re: TinyMCE3 Integration - one asciimathml issue down

by Mauno Korpelainen -
I think operatation.html is not used at all. That file is relic from old Equation Editor plugin for HTMLArea v3.0

http://www.cdlonline.org/works/wysiwyg/examples/eq.html 

and Xinha plugin Equation has obviously used code from several prototypes of equation editor (modified by Raimund Meyer ?)

When those files were written Peter Jipsen had not yet added the new features to asciimathml.js and when new asciimathml.js has different behaviour for some function dialog.html can't know it. So we can either change dialog.html to use new function of asciimathml.js or add new functions with new names to dialog.html to do the same tasks as asciimathml.js with different settings (then asciimathml.js stays unchanged)

Or we could have several versions or "modes" of that plugin to produce different code and use different files for various needs. I had not used Equation before either (made the first quick integration to xinha package just for you when you asked about that plugin) but with small fixes it can be a really good plugin. And we can create new plugins to editors - about 1 year ago I made some tests with tinymce 2 and almost any small script or script package can be converted to plugin to do simple tasks like adding something to editor textarea or to filter/replace some content or to add some "helper widgets" to editor.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration - one asciimathml issue down

by Marc Grober -
1) OK, I saw old xinha forum posts about xinha adopting asciimathml as "new equation" and now it makes sense - so we can delete the operation.html file.
2) Does the change I suggested resolve the issue with running "Equation" (hereinafter EqEd for the purposes of disposing of confusion) with tinyMCE or FCKed?
3) I am hoping that Peter Jipsen will be doing some work on ASCIIMathML.js in June. If we identify common issues with integrating EqEd and asciimathml.js into the editors you are working now, I am sure that he would consider, as ascmiimathml.js is his code, describing a standard interface to the js file. He already has quite a few switches in the code, but not so much documentation as to the intended effect. I guess what I am suggesting is that he assume maintenance of EqEd based upon a "standard" interface between Editor and the the other editors (tinyMCE, xinha and FCK) Does that make sense to you?
4) We should have a feature list for Peter, such as a) adding a switch to allow EqEd to insert other, non-ASCIIMathML text expressions such as LaTex, b) reacquiring a text expression for editing an equation (a feature that dragmath does not have which I think EqEd can do), etc.
4) If I spend enough time to figure out what is happening where I can probably also fix the issue with re-editing turning text expressions into mathml... its all in the tokenization in dialog.html I think

In reply to Marc Grober

Re: TinyMCE3 Integration - one asciimathml issue down

by Mauno Korpelainen -

I just started configuring fckeditor to use moodle functionalities and will check all plugins and buttons for fckeditor during the next week. I haven't done asciimathml or dragmath plugin for fckeditor yet but I believe we can use common files for all these editors (applet files for dragmath and asciimathml.js for asciimathml)

Right now integration of tinymce and the coming fckeditor integration are very flexible (fckeditor should be ready for testing next week). I should try to change xinha integration to be easier configurable - in fckeditor and tinymce I can change all settings but not in Xinha.

You are right, dialog.html is the file we should edit to use different functions and properties of asciimathml.js - Some kind of selector or tabs (and different input table according to selection) would be nice.

Marc, if you have time to test possible forms of dialog.html (or dialog.php if we want to use php) for EqEd I could use the next week for different tinymce and fckeditor plugins etc...

In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -
You may go back too - downgrading is possible if you have backup files and upgrading is possible as usually but if you overwrite edited files of this patch with new files you must make the same changes to new files. It would be nice to have one version of moodle where htmlarea is not the default editor - no matter if it is tinymce, xinha, fckeditor or some other editor but upgrading this kind of "non standard integrations" causes always extra work.
In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Marc Grober -
Mauno,

Attached is ASCIIMathMLeditor.js v2.0 obtained from http://www1.chapman.edu/~jipsen/mathml/asciimatheditor/

I am fiddling with dialog.html trying to use the functions from ASCIIMathMLeditor.js but going nowhere fast.
In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Could you attach your latest dialog.html (and other edited files of plugin) here or send it as a zip file attachment to this email address: mauno@hyvinopin.net ? I have not been able to read my employers email since this morning (mail server of city of Hyvinkää has been down all day long)

Xinha has now officially announced the new stable release 0.95 - I will check also the latest changes during this week and try to rewrite some parts of integration

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by shen yiching -
I use moodle184 and follow tinymce3 installion steps . It works fine ,but I have to use the tinymce3 theme(In the theme selector choose the tinymce_integration theme).If I copy the tinymce javascript from the footer.html file to your existing theme,it work abnormal. Right now
,I still cannot upgrade to moodle1.9 . I really did not like the default html editor. what should I do ? 
In reply to shen yiching

Re: TinyMCE3 Integration

by Mauno Korpelainen -
In Glen's Tinymce all the needed changes are in footer.html so either you have not copied correct parts to correct place in the other theme footer.html (themes are different) or the abnormal behaviour is caused by the compressor ( tinyMCE_GZ.init code ) - try to refresh browser/cache/file history - note also that Glen's Tinymce is in folder tinymce3 and not in the default tinymce location.
In reply to Glen Davies

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Hi Glen,

just visited your site and those file and image plugins you have written to tinymce 3 (moodleimage and  moodlelink) + fresh ideas in header.html tinymce init code with function moodlefilemanager look really nice (much better than my plugins). Well done!

I downloaded you files and tested them quickly. You could add file screenshot.jpg (and README) to folder theme/tinymce_integrationor ie will give some messages in theme selector. Path of moodle is not always http://localhost/moodle and it causes some problems for a person who can't change code of header.html and plugins. I have not tested these editors for two months but there were several places in moodle lib file code that needed some more changes: function print_textarea and function use_html_editor in lib/weblib.php, function can_use_html_editor() in moodlelib.php and all the admin/language code written for htmlArea - I have no idea if anybody have had time to check it or rewrite for moodle 2.0 - and some activities like forums, messages and "old Wiki" needed also some changes (Ludo's new Wiki version NWiki worked ok).

Upgrading tinymce or any other editor should not overwrite integration files and if you have not changed the core code of tinymce you should have no problems with that...

Thank you once again for those plugins - I hope they will help developers of moodle core code to offer a fully functional editor instead of current htmlArea. TinyMCE 3.0rc1 (or 2.1.3)  http://tinymce.moxiecode.com/ and FCKEditor 2.5.1  http://www.fckeditor.net/ are both good choices and work with most current browsers without any major bug issues (at least IE5.5+, FF1.5+, Opera 9.5+, Safari3+, Netscape7.1+ and Camino1.0+)

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Glen Davies -
Thanks for the feedback

>Path of moodle is not always http://localhost/moodle and it causes some
>problems for a person who can't change code of header.html and plugins.

Woops, overlooked this, have changed to <?php echo $CFG->wwwroot; ?> and uploaded a 0.2 version of the integration files.
In reply to Glen Davies

Re: TinyMCE3 Integration

by David Bogner -
Picture of Core developers Picture of Plugin developers
Hi Glen,

I just tested the TinyMCE on the site http://www.host4learning.com/moodlemce/

Works fine, I like it much more than the actual editor in 1.8
I don't know if this is the place to post bugs, when testing I encountered following problem (using FireFox 2)

I click on "Insert / embedded media", a window opens. Then I click on "Browse". "Instert link" window opens. When I click on "Close" nothing happens. (That's only if I decide not to insert a link. Nevertheless I can close the window, clicking on the typical X Button top right of the window)

Yours,
David


In reply to David Bogner

Re: TinyMCE3 Integration

by Glen Davies -
>I don't know if this is the place to post bugs, when testing I encountered >following problem (using FireFox 2)

I am not sure either - I guess the offical place would be
http://moodle.org/mod/data/view.php?d=13&rid=1119
but now that it is here .......

>I click on "Insert / embedded media", a window opens. Then I click on >"Browse". "Instert link" window opens. When I click on "Close" nothing happens.

Thanks for reporting this. I have fixed it now, but probably won't get another version of the files up until next week sometime - off for a few days.
In reply to Glen Davies

Re: TinyMCE3 Integration

by Stuart Anderson -
Great work!

Whilst I think TinyMCE is a vast improvement over the current moodle editor, I noticed that like the current moodle editor it still mangle <pre> blocks and inserts <br /> to replace new lines. Do all javascript HTML editors do this? Surely <pre> blocks should be left completely untouched?

--Stuart.
In reply to Stuart Anderson

Re: TinyMCE3 Integration

by Mauno Korpelainen -

I guess it depends on configuration of editor or filters of moodle and that's the reason why it would be better to have a possibility to edit configuration settings from administration or some "theme profile"...some setting from http://wiki.moxiecode.com/index.php/TinyMCE:Configuration#Cleanup.2FOutput should make it work as expected...

Edit: does not happen here: http://tinymce.moxiecode.com/example_full.php?example=true which confirms the previous comment.

In reply to Stuart Anderson

Re: TinyMCE3 Integration

by Glen Davies -
I think it is one of Moodle's filters doing this. The TinyMCE editor content seems ok and doesn't convert line breaks to break tags by default, but when saved and viewed the content has them added - and this also happens if I disable the editor and just use a plain textinput box.

I haven't gt time at the moment to confirm this for sure, but will double check it next week some time.

regards
Glen
In reply to Glen Davies

Re: TinyMCE3 Integration

by Sue E -

I'm showing my "newbie-ism" here, but can you please explain a little more about how to integrate this? 

"adding the required tinymce to the theme header.html file"

I'm not sure of what to add where!  I'm using a theme I customized, so don't want to change the whole theme.  I've copied the tinymce3 folder to /moodle/lib/editor, and the tinymce_integration folder to /moodle/theme.

Please help!  Thanks!

In reply to Sue E

Re: TinyMCE3 Integration

by Glen Davies -
Hi Sue

In the latest version of the integration you put the tinymce javascript in the footer.html file of the theme, so:

  1. Open the footer.html file in the tinymce_integration folder
  2. Copy all of the javascript that starts at
  3. <script type="text/javascript" src="http://www.host4learning.com/moodlemce/lib/editor/tinymce3/tiny_mce_gzip.js"></script>
    and goes down to the </body> tag
  4. Paste this script into your own theme footer.html file just above the body tag
Also, on about line 1247 of lib/formslib.php you need to change

var ret = true;

to

tinyMCE.triggerSave();
var ret = true;
Regards
Glen
In reply to Glen Davies

Re: TinyMCE3 Integration

by Sue E -

Ah well, I followed all the install directions above (double checking too) and it doesn't work for me.  I'm using version 1.9 beta, if that makes any difference.   If I select it as a theme, it works.  It does create horizontal scrollbars in the edit mode, though.   I just can't get it to work with my theme. 

The beginning of the script on the footer.html in the files I downloaded from the moxiecode site start with:

<script type=

"text/javascript" src="<?php echo $CFG->wwwroot ?>/lib/editor/tinymce3/tiny_mce_gzip.js"></script>

It's a bit different that on your post.  Does that make a difference?

I'm seeing other posts indicating the need to edit other pages (weblib.php for example) so maybe I'm missing something, especially the php know-how.  Is this something that is just way over my head at this point?   From what I've seen on It looks like a great improvement.

Thanks again.

Sue

In reply to Sue E

Re: TinyMCE3 Integration

by Glen Davies -
Hi Sue
If you attach the footer.html from your theme - or even a zip file of all your theme files if it is not too big - I will have a look at it for you. I am using it on 1.9beta as well so that won't be the issue.
Regards
Glen
In reply to Glen Davies

Re: TinyMCE3 Integration

by Sue E -

Hi Glen,

Here's a zip file with my theme files.  Thank you for taking a look at it!  I also notice that pasting the script into the footer kills my footer info, such as the moodle credits, moodledoc links, etc.  So I must have something messed up.

Thanks again,
Sue

In reply to Sue E

Re: TinyMCE3 Integration

by Glen Davies -
>So I must have something messed up.

It was me that messed up not you. There was a small chuck of php code above the tinymce javascript that also needs to be copied across from the footer file - but you couldn't be expected to know this. I picked it up as I have debugging turned on so it gave a useful error message at the bottom of the screen (as an aside this may be useful for you in the future in diagnosing problems - in Site Adminisration under Server set debugging level to All and check the box to display debug messages - only do this on your test server or while working on issues, turn it off again on when finished on live servers as it is not good practice to have error messages displaying to the world.)

Anyway I will add some comments in the footer.html file in the next release so it is easier to work out which chunk to copy. I have fixed your footer file though and it is attached, so if you put this in your sew theme folder it should work. Also included in the folder is the formslib.php file that needs to be modifed to get forms submission working properly with tinymce (without this patch you need to submit each form twice). Put this file in moodle/lib - backup your existing formslib.php file first just in case.

With any luck Aaron will finish his full integration of tinymce soon which will make things a little easier.

Regards
Glen
In reply to Glen Davies

Re: TinyMCE3 Integration

by Sue E -

Fantastic!  It works! 

I also tried out the debugging settings, and that was handy.  I'll remember that.

Thank you for all your help! 
~Sue

In reply to Glen Davies

Re: TinyMCE3 Integration

by Carlos Merida Campos -
Interestingly while in firefox the CR characters are not converted into < br /> in explorer they are. Has anyone found a fix for this?
In reply to Glen Davies

Re: TinyMCE3 Integration

by James Ballard -
Thanks Glen,

This worked well on our Moodle 1.9 install, however I couldn't seem to find the Spell Check feature. Is this available? If not is it possible?

Yours
James
In reply to James Ballard

Re: TinyMCE3 Integration

by Martin Vögeli -
Hi James smile

I don't know about TinyMCE3 but there are form spell-checkers for browsers:
Best wishes, Martin, writing random answers out of a mood smile
In reply to Martin Vögeli

Re: TinyMCE3 Integration

by Jeff Wood -
Got tinyMCE working in moodle 1.9 -Great work Glen.

I use FF and the built in spell checking doesn't work in the java window sad It will only work in HTML mode and has to be checked manually.

Any other ideas?

Also, i cannot seem to be able to get the "full" browser of tinyMCE (http://tinymce.moxiecode.com/example_full.php?example=true) any ideas on it? I would like to be able to add/remove buttons, but when I try the tool bar disappears completely.

Jeff
In reply to Jeff Wood

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Hi Jeff,

I can't comment spell checking because I have not tested it but this toolbar problem might be caused by some extra or missing char like "," in init code - you could attach your tinymce theme footer.html (or header.html if it's the older version of Glen's integration files)

If theme is using tinyMCE_GZ.init code you could also check http://wiki.moxiecode.com/index.php/TinyMCE:Compressor/PHP

(sometimes Gzip compressor fails to use streamable file for some reason )

Glen's integration is a temporary solution (like my test files) until main developers like Mathieu Petit-Clair & Martin D  get core editor integration ready for moodle 2.0. Although theme integration works pretty well there are still several missing features like language files and administration of init code (buttons and plugins for example).

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Jeff Wood -
Hi Mauno,

Thanks for the info. I am using the footer.htm file Glen has above.

I took a look at the link you mentioned... sadly it is much beyond my level of expertize shy

I think it best for me to wait for the integration in 2.0 as I'm sure it will have the missing items/options you mention and I would like.

Cheers

Jeff
In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Larry Elchuck -
Re: Glen's integration is a temporary solution (like my test files) until main developers like Mathieu Petit-Clair & Martin D get core editor integration ready for moodle 2.0. Although theme integration works pretty well there are still several missing features like language files and administration of init code (buttons and plugins for example).

Mauno, once created for the 2.0 core, do you think it will be backported to 1.9?

thanks
larry

In reply to Larry Elchuck

Re: TinyMCE3 Integration

by Mauno Korpelainen -

I don't know but I hope so - it depends on how Martin wants to make it. I think the best choice would be a selection code for several editors that have different integration files, different administration code, different language files etc. Glen's version of theme integration requires that editor is disabled from administration menu or profile otherwise htmlarea is loaded but then you can't really turn editor off and editor functions defined in moodlelib.php, adminlib.php, weblib.php or editorlib.php have no influence. If there is a simple way to keep both TinyMCE/FCKEditor and HtmlArea it can certainly be backported as well.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Here's one idea that I sent to Mathieu last Thursday - anything is possible but the final solution should be simple to use, select or disable, upgrade and modify - and bug free wink:

"Maybe all editor settings (like configuration init code of tinymce http://wiki.moxiecode.com/index.php/TinyMCE:Configuration ) should be in database.
We could simply have one default "editor profile" (= default settings) for tinymce, one for htmlarea, one for FCKEditor and admins could create new "editor profiles" based on capabilities to see and use certain buttons, plugins, language or filters.
All editors have default profile that works if no other settings have been changed but it would be more practical to be able to change any settings from database the same way you show/hide buttons or select fonts for htmlarea. For FCKEditor most settings are in
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration and for TinyMCE in http://wiki.moxiecode.com/index.php/TinyMCE:Index . In the same way activities could simply use some "editor profile" - for example for security reasons some plugins like file manager or the code that editor produces can be filtered both in editor settings and filters of moodle.
In ideal case files of editors can be upgraded separately without overwriting any "integration files" or custom editor skins and we need just some selection code: which editor to use (or no editor at all), where to find the integration files (lib/editor/nameofeditor?) and init code (and if no custom integration were selected the default integration should be used). It would make both changing and adding new editors easier. If we want to add new skins to editors ("kids style editor" with a few big buttons or professor style skin with all buttons and plugins) there must be some way to change either skin of editor, init code of the editor or the editor itself. Themes are easy to use for this purpose but database is more natural if there are lots of possible changes to make.
In fact it would be possible to have individual theme (possiblity to select not only the name of user theme but to select some properties of theme and editor) for all users as a part of user profile or role."

In reply to Jeff Wood

Re: TinyMCE3 Integration

by Glen Davies -
>I use FF and the built in spell checking doesn't work in the java window sad It >will only work in HTML mode and has to be checked manually.

Sorry about the delay in replying - have been on leave. It seems that there may be some problems with tinymce and firefox spell checking. See
http://drupal.org/node/135150
You could try disabling the advhr plugin and see if this makes any difference (to do this just remove advhr in both places it occurs in footer.html). Sorry I don't have time to test it myself at the moment, but will try to over the next week or so.

I am not sure why changing to the full toolbar would cause you trouble without seeing your footer.html file.

Regards
Glen
In reply to Glen Davies

Re: TinyMCE3 Integration

by Jeff Wood -
Leaves are very good clown no apology needed.

Thanks for the link - I'll have to study them - as I am not a coder/programmer... it takes me a while to muddle my way through.

Jeff
In reply to James Ballard

Re: TinyMCE3 Integration

by Mauno Korpelainen -
In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by James Ballard -
Thanks,

Previous Moodle editor was using aspell via the editorspelling configuration within Moodle. I'm assuming TinyMCE ignores this - just wondering if there were any particular reasons for this.

Yours
James
In reply to James Ballard

Re: TinyMCE3 Integration

by Glen Davies -
>I'm assuming TinyMCE ignores this - just wondering if there were any particular > reasons for this.

The only reason is that I have not had time to look at the spellchecking options in tinymce. Will try and do so in the next couple of weeks.

regards
Glen
In reply to Glen Davies

es回复: TinyMCE3 Integration

by rongguang liu -
        Hello,Glen Davies. I am a teacher of the  middle school  ,in china. I have used moodle for about one year. When I insert flashes, videos ,Mathematical  symbols  into courses I find the html editor is not convient. I must write some codes . 
        I recently find the TinyMCE3 editor is much better than the html editor in  inserting flashes ,videos, into the course ,especially Mathematical symbols .
        I have succeed in replacing the html editor with the tinymce editor .But I find the problem about the tinymce editor .

when I clicked the 【 π】button,It shows the following picture :

It does not show all kinds of  symbols(such as Mathematical symbols).  can you help me ,please,Thanks a lot!


1.jpg
In reply to rongguang liu

Re: es回复: TinyMCE3 Integration

by Glen Davies -
In reply to Glen Davies

回复: Re: es回复: TinyMCE3 Integration

by rongguang liu -

Hello,Glen Davies, first of all ,Thank you  very much for your help me.I do it as you said. It succeed in firefox browser. But IE browser not. why?伤心 how can I solve the problem?

In reply to rongguang liu

Re: 回复: Re: es回复: TinyMCE3 Integration

by Glen Davies -
Sorry about the delay in replying, I have been on leave. Unfortunately I don't know you would be having this problem in IE. DragMath is actually a plugin that is independent of the TinyMCE editor. You may be able to get your problem solved if you post a message to the DragMath forums at
http://sourceforge.net/projects/dragmath/

Regards
Glen
In reply to rongguang liu

Re: es回复: TinyMCE3 Integration

by Mauno Korpelainen -

The problem in Glen's DragMath TinyMCE integration is in the path and in file dragmath.php:

line starting with codebase should be:

codebase="<?php echo $CFG->wwwroot.'/lib/editor/tinymce3/plugins/dragmath/applet/classes' ?>"

and if dragmath is as a plugin in folder lib/editor/tinymce/jscripts/tiny_mce/plugins then codebase should be given by tags

codebase="<?php echo $CFG->wwwroot.'/lib/editor/tinymce/jscripts/tiny_mce/plugins/dragmath/applet/classes' ?>"

Works ok in IE7 as well...thank you for a great plugin!!!

In reply to Mauno Korpelainen

Re: es回复: TinyMCE3 Integration

by Glen Davies -
Thanks for this - why IE7 couldn't cope with a relative path for the code base we'll probably never know. I have fixed this and released a new version of the integration at
http://www.host4learning.com/moodlemce/mod/resource/view.php?id=5
this release also includes the latest tinymce stable build and another bug fix for DragMath on IE7.

Regards
Glen
In reply to Glen Davies

Re: es回复: TinyMCE3 Integration

by Mauno Korpelainen -

IE never stops surprising...and one extra "," can break code big grin

Thanks for the plugin fix - I keep testing your code and I have another version of tinymce on my test site with different integration method to test different settings. The latest version of tinymce compressor had some problems probably with Ajax (error 80020101) so I took compressor code away from my tiny init code.

In fact to include applets, we could use the object element if possible (as the <applet> tag is not supported in XHTML 1.0 Strict DTD)

Something like in http://ww2.cs.fsu.edu/~steele/XHTML/appletObject.html

Still as your dragmath plugin works ok right now there is no hurry to change any code...

In reply to Glen Davies

Re: TinyMCE3 Integration

by Julian Ridden -
Glen, thanks for the awesome work to date on this code. I have been using it for a while with no real issues to report.

This post is really just n FYI to let you know I have posted a write-up on my blog re: your work. http://moodleman.edublogs.org/

Thanks again.

JR
In reply to Julian Ridden

Re: TinyMCE3 Integration

by Glen Davies -
Thanks for the feedback Julian. It certainly isn't a perfect integration by any means, but as a simple hack it is certainly working for us, so I am glad to see it is of use to others also while we wait for an editor replacement in 2.0.

Regards
Glen
In reply to Glen Davies

Re: TinyMCE3 Integration

by Andrew Zaffke -
This might be better as a different forum but it is related.

Glen I was wondering how you got the Dragmath plugin to show up on the editor's toolbar. I am writing a plugin with NanoGong and just can't figure out how to get the plugin to be shown.
In reply to Glen Davies

Re: TinyMCE3 Integration

by Matt Gibson -
Glen, this is amazing! Thanks for the work.

One issue I noticed is that it did cause a 100-300% increase in total load time for my pages(!), which seems to be due to the tinymce init functions running even if there's no text area to work on.

I've solved this by adding an if statement around them so that they only run if the DOM detects a textarea tag.

Attached is the new javascript to be pasted just above the body tag at the bottom of the footer. It seems to leave the pages loading only slightly slower than before (20-40%ish)

Matt
In reply to Matt Gibson

Re: TinyMCE3 Integration

by Matt Gibson -
Something else I've noticed is that the dropdown below the editor window should default to 'HTML format' for things to run smoothly, but it doesn't. I'll have to find a hack for that tomorrow.

Is there any way to make is truly WYSIWYG? The text seems a lot smaller in the editor than it does later on.
In reply to Matt Gibson

Re: TinyMCE3 Integration

by Matt Gibson -
A slightly nicer dragmath icon. Add it to the lib\editor\tinymce3\plugins\dragmath\img\ folder to replace the existing dragmath.gif
Attachment dragmath.gif
In reply to Matt Gibson

Re: TinyMCE3 Integration

by Matt Gibson -
Hmmm..

This seems to jam the browser (IE6) when I go to update a forum. Can anyone confirm this?
In reply to Glen Davies

Select font from drop-down menu?

by Michael Woods -
Picture of Core developers
Hi all,

Firstly, thanks to those who are making this integration happen.

I'm wanting to allow different fonts to be selected. Has anyone done this? I've tried adding the theme_advanced_fonts line under tinyMCE.init but it still doesn't allow me to select a different font. For example:

theme_advanced_fonts : "Arial=arial,helvetica,sans-serif;"

which was suggested at the tinyMCE manual here.

Thanks,
Michael
In reply to Glen Davies

Re: TinyMCE3 Integration

by Marc Grober -
Since DragMath integration was addressed I wanted to pose the question of whether it (and potentially other editor plugins) should be installed somewhere other than in /lib/editor/tinyMCE/plugins/DragMath or more specifically, in a location such as /lib/editor/plugins/ so that if there is an option for users to use different editors or an admin wishes to try out more than one editor one would not need to install DragMath in a separate directory for each editor??

In reply to Marc Grober

Re: TinyMCE3 Integration

by Anthony Borrow -
Picture of Core developers Picture of Plugin developers Picture of Testers
Marc - This is a good question. I'm just wondering if there is any reason why the tinyMCE editor could not simply point to lib/editor/htmlarea/plugins/DragMath? In other words, dragmath was first and that is the default location for integrating dragmath into Moodle. Other editors can simply look there. Would that be reasonable? Peace - Anthony
In reply to Anthony Borrow

Re: TinyMCE3 Integration

by Marc Grober -
Mauno, I and some others have chatted about this (unfortunately it is scattered across quite a few threads)

I thought that some independent plugin directory would be best much as we do with filters, etc. Unless I misintrepreted Mauno [and catch me if I am misstating your observation, Mauno], his position was that the use of plugins was so complex vis-a-vis the peculiarities of each editor that this might become quickly unworkable.

By way of a thought experiment, if you will (and please understand that I still think my position has some merit, but I want to walk through the issues):
xinha has dozens of plugins. lets say we move them all to /plugins or even to lib/editor/plugins. we can't assume that if a plugin is in the directory it is usable for an editor because we could have plugins in the directory that owuld not work with tinyMCE for example. so we would have to have a configuration set-up for each editor that identifies what plugins are appropriate for that editor. additionally, in some instances changes might have to be made to the plugin for different editors (assuming that there may be occasion where glue files - integration - won't due) that means you will have to arguably have multiple copies of the same plugin, with different names, for each editor.

of course, if all editors had a common API for plugins...... as well as for integration into the larger web site.....

I know Mauno has been furiously at work trying to streamline things as well as others, and I am hoping when I get my hands on his multiple package set-up to see how modular he has made things.....

I really don't think that the argument that such and such was here first so things can point here really flies.... with all the work towards 2.0 I think if there were going to be a plugin directory it should be in an appropriate system location as argued above

another level to such discussion can be seen in my comments to Mauno about asciimathml, which has multiple functions.... I suggested that we keep all asciimathml files together and put them in /filter/asciimathml and then link to them so that any plugin would use the most current version of the script which is included in the files in /filter/asciimathml.... You can see that because different ways of looking at things present different takes on install things could get more complex instead of less complex PDQ... and I don;t think no one is interested in that (at least until moodle comes with an autoconfigurator.... ;=} )
In reply to Marc Grober

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Both cases are possible -sometimes you can use common files, sometimes you can't. I agree that asciimathml filter is better than several separate files and dragmath applet files can be at the same folder for all editors - the less files the better. Similar structure for all plugins is easier to handle but there is no rule without exception...

In reply to Glen Davies

Map Module issue

by Jaap Marsman -
Hi Glen,

The TinyMCE integration works wonderful, however two modules give issues:

1. Storytelling (I've already fixed that by having that course revert to another theme, using the default HTML Editor. It has issues, but the Storytelling activity is working.)

2. The Map Module
It works very well, loads the Google Map and allows you to add stuff to it. However, you cannot use TinyMCE for the Description box. So we're limited to text-only at the moment. It would be wonderful to have TinyMCE enabled there as well, so I can put small pictures into the description.

I've rummaged around in the map-module files, but can't quite find a fix. Any help would be most welcome!
In reply to Glen Davies

Re: TinyMCE3 Integration

by Anton Roeder -
That's a nice piece of work, thank you.

I have one problem with it, however:

I integrated tinymce3 in moodle 1.8.4 by just copying the needed script to footer.html (since I use a custom theme, this was the best fit for my needs). It works fine except that when I copy+paste some text from a MS Word 2007 document into a new forum post (that's the only place I tested so far), it gives me an error, saying that text is required in the "Message" part of the post. So basically it doesn't notice I pasted anything into the message pane. This doesn't happen when I paste from a text editor.
One think I noticed is that the bottom line of the tinymce-pane shows the following:
Path: p » p.MsoNormal
which it doesn't do when pasting from text editor (obviously, since it says "this paragraph was copied from MS Office", as far as I understand).

Any ideas on why this happens and how to fix it?

I was hoping to workaround a paste-from-word issue (
http://tracker.moodle.org/browse/MDL-16621) in htmlarea by using tinymce3, but obviously non-functional pasting from word makes this rather useless ;)

Cheers, Anton
In reply to Anton Roeder

Re: TinyMCE3 Integration

by Jonnie Elovsson -
Hi,

Can someone please post a tutorial how to use TinyMCE3 instead of the original
HTML-editor. I´ve read through this post and I´m not sure if I get it all.

Would really appreciate this, since the original editor comes from another time and another web....

Jonnie
In reply to Jonnie Elovsson

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Glen used theme integration and he has more info /short and easy tutorial in http://www.host4learning.com/moodlemce/ and http://www.host4learning.com/moodlemce/mod/resource/view.php?id=6

I made several types of test integrations (user/theme based selectable editors) but core default editor of moodle 2.0 will have a different approach so I suggest you try Glen's solution. All you need to do is upload the files to correct folders and possibly edit the integration theme and init code if you like.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Jonnie Elovsson -
OK.

I want it to work with my theme.
I want to use it with my theme.
So I understand I have to copy and paste the javascript from the footer.html to the footer.html in my Theme.

Where exactly does this script begin and where exactly does it end?

Appriciate your help

Jonnie
In reply to Jonnie Elovsson

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Copy this code from Glen's footer.html before </body> tag to your custom theme footer.php before </body> tag:

<?php
$zlib_on = ini_get('zlib.output_compression');

if (empty($zlib_on)) {
?>
<script type="text/javascript" src="<?php echo $CFG->wwwroot ?>/lib/editor/tinymce3/tiny_mce_gzip.js"></script>
<script type="text/javascript">
tinyMCE_GZ.init({
 plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,'+
        'searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,moodleimage,moodlelink,dragmath,inlinepopups',
 themes : 'advanced',
 languages : 'en',
 disk_cache : true,
 debug : false
});
</script>
<?php
} else {
?>
<script type="text/javascript" src="<?php echo $CFG->wwwroot ?>/lib/editor/tinymce3/tiny_mce.js"></script>
<?php
}
?>
<script Xlanguage="javascript" type="text/javascript">
<?php
if (!empty($COURSE->id) and has_capability('moodle/course:managefiles', get_context_instance(CONTEXT_COURSE, $COURSE->id))) {
?>
 tinyMCE.init({
  relative_urls : false,
        remove_script_host : true,
        document_base_url : "<?php echo $CFG->wwwroot; ?>",
  editor_selector : "form-textarea",
  mode : "textareas",
  theme : "advanced",
  convert_newlines_to_brs : false,
  plugins : "safari,spellchecker,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,preview,media,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,moodleimage,moodlelink,dragmath",
  
  theme_advanced_buttons1_add : "fontsizeselect,forecolor,backcolor,dragmath",
  
  theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,replace,separator,ltr,rtl,separator",
  theme_advanced_buttons2_add: "fullscreen",
  theme_advanced_buttons3_add_before : "tablecontrols,separator",
  theme_advanced_buttons3_add : "moodleimage,emotions,iespell,media,advhr",
  theme_advanced_disable : "help,underline,image",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  moodleimage_course_id: <?php echo $COURSE->id; ?>,
  theme_advanced_resize_horizontal : true,
  theme_advanced_resizing : true,
  file_browser_callback : "moodlefilemanager",
  apply_source_formatting : true
  
 
 });
    function moodlefilemanager(field_name, url, type, win) {
   
             tinyMCE.activeEditor.windowManager.open({
               file : "<?php echo $CFG->wwwroot ?>/lib/editor/tinymce3/plugins/moodlelink/link.php?id=<?php echo $COURSE->id; ?>",
               width : 480, 
               height : 380,
               resizable : "yes",
               inline : "yes", 
               close_previous : "no"
           }, {
               window : win,
               input : field_name
           });
           return false;
    }
<?php
} else {
?>
 tinyMCE.init({
  relative_urls : false,
        remove_script_host : true,
        document_base_url : "<?php echo $CFG->wwwroot; ?>",
  editor_selector : "form-textarea",
  mode : "textareas",
  theme : "advanced",
  convert_newlines_to_brs : false,
  plugins : "safari,spellchecker,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,preview,media,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,dragmath",
  
  theme_advanced_buttons1_add : "fontsizeselect,forecolor,backcolor,dragmath",
  
  theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,replace,separator,ltr,rtl,separator",
  theme_advanced_buttons2_add: "fullscreen",
  theme_advanced_buttons3_add_before : "tablecontrols,separator",
  theme_advanced_buttons3_add : "emotions,iespell,media,advhr",
  theme_advanced_disable : "help,underline",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  moodleimage_course_id: <?php echo $COURSE->id; ?>,
  theme_advanced_resize_horizontal : true,
  theme_advanced_resizing : true,
  apply_source_formatting : true
  
 });

<?php
}
?>
</script>

You can find more info about init code from http://wiki.moxiecode.com/index.php/TinyMCE:Configuration

( By the way the company that has released TinyMCE - Moxiecode Systems -  is located in Skellefteå, Sweden and also the other popular open source editor FCKEditor - future CKEditor - comes from Sweden... wink )

In reply to Glen Davies

Help! Can't get TinyMCE to show up!

by Stanley A -
Hello everyone. I followed the instructions at http://www.host4learning.com/moodlemce/mod/resource/view.php?id=6 and got everything uploaded and selected the integration theme. However, TinyMCE still isn't showing up! I have HTMLarea disabled and it's not showing up either, but I can't figure out how to get TinyMCE running. I've even tried older versions of the integration package with no luck. Can anyone help?
In reply to Glen Davies

Re: TinyMCE3 Integration - Full Screen Mode

by Mark Hudson -

Hi

Is there a way to have full screen mode open in a new window like the default HTML editor.

Not urgent, but if I accidentally close the full screen window (as I can with the default editor) I end up exiting my browser, so it can be irritating.

Mark

In reply to Mark Hudson

Re: TinyMCE3 Integration - Full Screen Mode

by Mauno Korpelainen -

It's simple - you only need to add

fullscreen_new_window : true,

to editor init code (what ever integration of tinymce it is...)

http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/fullscreen

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration - Full Screen Mode

by Mark Hudson -

Hi & thanks for the fast reply!

I am a bit new at this file editing and cannot find the file I need to edit. I am looking in lib/editor/tinymce3 but can't see any init file. Is it somewhere else?

Mark

In reply to Mark Hudson

Re: TinyMCE3 Integration - Full Screen Mode

by Mauno Korpelainen -
In Glen's integration check theme/tinymce_integration/footer.html...
In reply to Mauno Korpelainen

Re: TinyMCE3 Integration - Full Screen Mode

by Mark Hudson -

Many thanks, I've got that working now, and a few other buttons that seem useful.

One that doesn't work though is the "add layer". Well it kind of works in that it appears whilst editing but it doesn't maintain its position relative to the rest of the web page content after saving. I am guessing that it is because it's a div element with some absolut positioning parameters and these change are no longer 'valid' when not in the editor?

If anyone has a solution, that would be very much appreciated.

Mark

In reply to Mark Hudson

Re: TinyMCE3 Integration - not getting WYSIWYG

by Mark Hudson -

Another question....!

Why am I not getting true WYSIWYG?

The text size I see in the editor is different from what I see after saving?

The image below shows the differenece I am getting.

This doesn't happen with the defualt HTML editor, and although I am only doing all this in a test moodle setup, I am beginning wonder what TinyMCE offers that isn't the same or better in the current/default editor?

Mark

Attachment not_WYSIWYG.gif
In reply to Mark Hudson

Re: TinyMCE3 Integration - not getting WYSIWYG

by Mark Hudson -

And after a bit more testing....

All font sizes are wrong ....as summarised in the picture below. The default size when editing is size 1 but becomes size 2 when displayed. All other fonts appear one size smaller than when editing.

Tested at "host4learning", just in case it was just my installation but it is the same there.

Attachment fontsizes.gif
In reply to Mark Hudson

Re: TinyMCE3 Integration - not getting WYSIWYG

by Mauno Korpelainen -

It's easy to say that all font sizes are wrong - but which ones are wrong and compared to what?

In moodle default font size depents on theme and css files. Htmlarea has separate css file and in tinymce default font sizes are defined in editor theme (advanced) and skin unless you define different custom css in content_css file given in init code.

So basicly the editor (textarea) is just showing the font size you have given for example in .../tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css and body tag there:

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}

Another thing that matters is how font sizes for drop down list are defined in htmlarea.php or editor_template.js (tinymce) - default font size in tinymce is 14 pt (4 / medium) and it's not the same as 10 px + different browsers may show different font sizes in a different way, read for example http://www.thesug.org/blogs/kyles/Lists/Posts/Post.aspx?List=89c8858b%2D90d2%2D4750%2Da11a%2De599248e6c69&ID=22

In TinyMCE and FCKeditor default font sizes are smaller than in Htmlarea or Xinha - most likely because developers of those editors have prefered different font sizes - just like some Moodle Themes have smaller default fonts than standard theme's default font.

One easy way to test different (customized and more wysiwyg) skin is to copy and rename folder tinymce/jscripts/tiny_mce/themes/advanced/skins/default (or o2k7) for example to "mark", edit the css files and change skin in init code with:

 skin : "mark",

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration - not getting WYSIWYG

by Mark Hudson -

Hi & thanks for replying again!

So it's something to do with CSS 'conflicts'? I will follow your helpful instructions/advice to see if I can fix this. It seems strange though that even the demo site setup especially for this integration at host4learning also has this issue.

Re which fonts change size, ALL fonts in the drop down list appear when viewed after saving appear 1 pt smaller than set in the editor (as shown in the image in my last post)

Mark

In reply to Mark Hudson

Re: TinyMCE3 Integration - not getting WYSIWYG

by Mauno Korpelainen -

The final result is always a combination of many things... and in css the last tags can override previous tags. What browser do you have?

Try to add

convert_fonts_to_spans : false,

to init code and set default font of Glen's theme to 100% in styles_tinymce3.css of his theme (body tag)

I could test that later today...

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration - not getting WYSIWYG

by Mark Hudson -

That worked for all fonts that I choose from the drop down list - so this is a BIG help! THANK YOU!

The default size is still pt1 (when editing) though and that still appears after saving as 2pt. I can cope with this for now though if I just select a font size before typing.

Mark

Browser is IE7 (most of the time)

In reply to Mark Hudson

Re: TinyMCE3 Integration - not getting WYSIWYG

by Lael ... -
Mark,

I am not showing any list of fonts after attempting the integration. Should they drop down from the styles list?

Lael
In reply to Lael ...

Re: TinyMCE3 Integration - not getting WYSIWYG

by Mauno Korpelainen -
Lael,

if you can't see some buttons or drop down lists they are probably missing from your tinymce init code

http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

If you need to add Font selection list add the following code

theme_advanced_buttons1: "fontselect,fontsizeselect,formatselect,styleselect",

and select font families to your list with tags like

theme_advanced_fonts: "Trebuchet=Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;Wingdings=wingdings",
In reply to Mauno Korpelainen

Re: TinyMCE3 Integration - not getting WYSIWYG

by Lael ... -
Mauno, thanks for your response.

Font selection is working great - but both on the demo, and on my install I can't get the styles selection to work. I took it out of the init code, but it still appears.

Do you know how to use it/ make it work (There is no response when you click on the button), or how to remove it?
In reply to Lael ...

Re: TinyMCE3 Integration - not getting WYSIWYG

by Mauno Korpelainen -

http://moodle.org/mod/forum/discuss.php?d=113870

(both cases) and if you use Firefox remember to refresh your browser or clear cache.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration - not getting WYSIWYG

by Lael ... -
Brilliant!

Thank you so much!
In reply to Glen Davies

Re: TinyMCE3 Integration

by Lael ... -
General FYI: The installation instructions (http://www.host4learning.com/moodlemce/) say:

Also, on about line 1247 of lib/formslib.php you need to change

var ret = true;

to

tinyMCE.triggerSave();
var ret = true;

This doesn't still seem to be the case. Seems to be line 1349 now (1.9.4).


In reply to Lael ...

Re: TinyMCE3 Integration

by Mauno Korpelainen -
Glen has made his instructions following the lines of the file from the earlier version of moodle where his integration was made - line numbers may of course be different in different versions when ever people add new code to core files.
In reply to Glen Davies

Re: TinyMCE3 Integration

by Lael ... -
Now I am having a different issue. I didn't realise I hadn't tested in IE - and the editor doesn't show up. It works fine in FF.

I've looked at the theming code, but can't figure out what might be causing the issue. I am using the clouds v4 theme.

Are there any things that might cause this behaviour in only one browser? How do I bo about identifying them?
In reply to Lael ...

Re: TinyMCE3 Integration

by Mauno Korpelainen -

Hard to say - I suspect some javascript error. If you had IE8 you could use developer debugging option to see IE errors - or try Firefox error console. It is possible that you see no errors in FF, but also possible that FF just skips the errors and IE can't handle them.

You could also try to set debugging to ALL from your administration menu - moodle might show some error messages too if some activity is causing the problem.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Jason Lohrenz -
I'm unable to download any of the versions of the TinyMCE integration plugin for Moodle 1.9.

I get the file, but regardless of the unzipper I try (WinRAR, WInZip, etc..) they all state 'unexpected end of file reached'.

Any help is appreciated!
In reply to Jason Lohrenz

Re: TinyMCE3 Integration

by Mauno Korpelainen -

It looks like Glen has not upgraded his site for months and site has been hacked by spammers - that spam code corrupts files that you try to download.

I will send Glen right now a message - don't try to download anything from that site before Glen has cleaned and upgraded his site.

In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Jason Lohrenz -

Well he must have just updated it.  Removed the links and says he is no longer maintaining and points to a URL for the 'clean' install w/ 1.9.

That is too bad.  Oh well.

In reply to Jason Lohrenz

Re: TinyMCE3 Integration

by John St -
I put together a complete 1.98 and tinymce 3.25. Haven't tested it too extensively but it seems to work and install okay. Here is the URL:

http://www.stabinger.us/downloads.html#tiny
In reply to John St

Re: TinyMCE3 Integration

by John St -
Upgrade tinymce version to 3.3.5.1 and fixed a JS error.

Download here or use the url from above.

I'm working on getting the tinymce gzip compressor to work, but so far no luck...
In reply to John St

Re: TinyMCE3 Integration

by John St -
Fixed safari/chrome support and fixed filebrowser image preview. Download is still above...
In reply to John St

Re: TinyMCE3 Integration

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
I have been exchanging emails with John St. and I can tell you he has been more than helpful. If you download his TinyMCE integration, you can hack your current install by following these steps to integrate TinyMCE:
BIG THANKS TO JOHN who helped me get through it.

First Replace your existing files with these:
lib/editor (entire folder pretty much)
/lib/adminlib.php
/lib/depreceatedlib.php
/lib/editorlib.php
/lib/moodlelib.php
/lib/weblib.php
/message/send.php
/admin/settings.php
admin/settings/appearance.php
lang/utf-8/(added tinymce lang file)

Then add this to your config.php file just below this line:
require_once("$CFG->dirroot/lib/setup.php");
add this:
$CFG->validateforms = 'server'; //new line
$CFG->defaulthtmleditor='tinymce'; //new line

John also has some killer themes and a stellar Chat Room activity mod that uses jquery and Ajax and uses the current chatroom database. It gives the chat room activity a much needed facelift and improvement.
In reply to Chris Kenniburg

Re: TinyMCE3 Integration

by John St -
Great work Chris! I updated the files today to include the table controls in tinymce. I hope to do some updating to the filebrowser at some point so that it (at least in appearance) will resemble the moodle2.0 filebrowser.

I think it will be far less jarring for users to make the switch to the next version if they can get used to using the same HTML editor in the older version(s).
In reply to John St

Re: TinyMCE3 Integration

by Larry Elchuck -
Thanks for your work, John

Will it suffice to replace only the tinymce folder to add these newer changes to a currently running install (like the CVS version of Moodle that I adapted last night) of your tinymce3 integration?

Might be helpful to indicate the change files in each update that you perform

larry
In reply to Larry Elchuck

Re: TinyMCE3 Integration

by John St -
The only file changed in this case was lib/editor/tinymce.js.php

This is not a critical change, just a change to configure the buttons.
In reply to John St

Re: TinyMCE3 Integration

by John St -
I created some mods so that the nanogong plugin works in my tinymce version.

Nanogong files are uploaded to a nanogong_files folder in the course moodledata dirs.

Here are the install directions:
Under admin security site policies- enable trusted content

add the nanogong filter to the /filters/ dir. Enable the nanogong filter in admin settings.

copy the nanogong folder into the tinymce plugins folder (/lib/editor/tinymce/jscripts/tiny_mce/plugins/)

replace tinymce.js.php (in /lib/editor/) with the tinymce.js.php in the download.

Let me know how it goes...

Link to zip
Average of ratings: Useful (1)
In reply to John St

Re: TinyMCE3 Integration

by Geoffrey Rowland -
Picture of Plugin developers
Hi John

Just to my thanks for your sterling work with this. It's much appreciated!
In reply to Geoffrey Rowland

Re: TinyMCE3 Integration

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Thanks for the work on Nanogong as well John. As for the file browser, I wouldn't change it. I kinda like your file browser and I am not sold on what I see for 2.0 just yet. I think the improvements to 2.0 are going to be most impressive, but to get those features I think I would be more inclined to just upgrade. If you do decide to make those changes I would make it a separate download.

I really love your integration just the way it is.
In reply to Chris Kenniburg

Re: TinyMCE3 Integration

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
OK so I just installed the Nanogong plugin... Does the plugin delete the files automatically?

I added a recording to a forum post and then deleted the forum post with the audio attached. Does deleting the forum post also delete the audio file?

Great work john!

Just curious.
Chris
In reply to Chris Kenniburg

Re: TinyMCE3 Integration

by John St -
Hmmm, good question... I don't know (and I assume it probably does not). I originally (and still do on our production server) had it set to upload all nanogong files into a nanogong_files directory that existed outside of the course directories.

To make this work, I had to hack file.php, something that I did not want anyone else to have to do (for security reasons, etc.). But, it did make it easy to manage the files.

So, I changed it to upload into the course data directories. But if it doesn't delete the audio file, that might be an issue...
In reply to John St

Re: TinyMCE3 Integration

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
It's not a big deal and it may be related to the Nanogong Mod more than anything you might have done. I was just curious if this was standard behavior. I had the nanogong activity installed, but never did the filter or editor integration until you posted it for TinyMCE.
In reply to Mauno Korpelainen

Re: TinyMCE3 Integration

by Blair F. -
Picture of Particularly helpful Moodlers
I can't find any easy instructions on how install and use TinyMCE3. Everything I find either doesn't work or has broken links (as mentioned by a previous post). Can anyone point me in the right direction?
In reply to Blair F.

Re: TinyMCE3 Integration

by charles Requena Palomino -
I have the moodle well integrated and ready to install, http://chafarleston.netau.net/archives/ already everything just to install if you want to integrate with most themes have to add the following code in the theme header.html intal the path is / moodle / themes / his_theme, this is the code:

<!-- TinyMCE -->
<script type="text/javascript" src="<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript">
tinyMCE_GZ.init({
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
themes : 'simple,advanced',
languages : 'en',
disk_cache : true,
debug : false
});
</script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
file_browser_callback : 'moodleFileBrowser',
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,


// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",

});

function moodleFileBrowser (field_name, url, type, win) {

if(type == 'file'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/link.php';
var width = 480;
var height = 400;
}
if(type == 'image'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/insert_image.php';
var width = 736;
var height = 430;
}
if(type == 'media'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/insert_image.php';
var width = 736;
var height = 430;
}
var courseid = <?php print_r($COURSE->id); ?>;

tinyMCE.activeEditor.windowManager.open({
file : cmsURL + "?id=" + courseid,
width : width,
height : height,
resizable : "yes",
inline : "yes", // This parameter only has an effect if you use the inlinepopups plugin!
close_previous : "no"

}, {
window : win,
input : field_name,
});
return false;
}
</script>
<!-- /TinyMCE -->


Remember that the code goes between the tags <head> code here</head>

anyway also attached the code



excuse my English
In reply to Blair F.

Re: TinyMCE3 Integration

by charles Requena Palomino -
I have the moodle well integrated and ready to install, http://chafarleston.netau.net/archives/ already everything just to install if you want to integrate with most themes have to add the following code in the theme header.html intal the path is / moodle / themes / his_theme, this is the code:

<!-- TinyMCE -->
<script type="text/javascript" src="<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript">
tinyMCE_GZ.init({
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
themes : 'simple,advanced',
languages : 'en',
disk_cache : true,
debug : false
});
</script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
file_browser_callback : 'moodleFileBrowser',
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,


// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",

});

function moodleFileBrowser (field_name, url, type, win) {

if(type == 'file'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/link.php';
var width = 480;
var height = 400;
}
if(type == 'image'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/insert_image.php';
var width = 736;
var height = 430;
}
if(type == 'media'){
var cmsURL = '<?php echo $CFG->wwwroot; ?>/lib/editor/tiny_mce/insert_image.php';
var width = 736;
var height = 430;
}
var courseid = <?php print_r($COURSE->id); ?>;

tinyMCE.activeEditor.windowManager.open({
file : cmsURL + "?id=" + courseid,
width : width,
height : height,
resizable : "yes",
inline : "yes", // This parameter only has an effect if you use the inlinepopups plugin!
close_previous : "no"

}, {
window : win,
input : field_name,
});
return false;
}
</script>
<!-- /TinyMCE -->


Remember that the code goes between the tags <head> code here</head>

anyway also attached the code



excuse my English