CkEditor integration for moodle 2.0

CkEditor integration for moodle 2.0

by Didier Belot -
Number of replies: 33

Hello !

https://github.com/electrolinux/moodle-ckeditor

Last update contains the latest ckeditor (3.5.2), a beta yui3 style for dialogs, and a (rudimentary) admin settings page.

Looking for help/suggestions for integrating a math plugin, as the fmathformula (generating an image) don't looks the way to go...

Enjoy !

--
didier

Average of ratings: -
In reply to Didier Belot

Re: CkEditor integration for moodle 2.0

by Mauno Korpelainen -

Hi Didier,

Thank You for sharing your work!

I am sure I can help with math plugins... we could start with core Dragmath plugin ( I made a FCKeditor version some years ago and it should be easy to update that plugin to the latest CKEditor code ) and in my test PC I have a couple of other math/graph plugins for tinymce ( depending on Math renderer and filters )

I'll be back with these plugins after some days - I must just study first the codebase of the latest CKEditor smile

In reply to Didier Belot

Re: CkEditor integration for moodle 2.0

by Mauno Korpelainen -

Didier,

I downloaded your latest files but there is some strange problem in initializing CKEditor.

FF gives Error: r is undefined in file lib/editor/ckeditor/ckeditor/3.5.2/ckeditor.js

and when I tested with IE8 script debugging the error comes from

if(r.init)r.init( n );

where init is "null"

I tried to clear all caches and checked the editor settings from administration menu but the problem remained - no CKEditor initialized ???

Previous version worked ok so this problem must come from some undefined thing in new code.

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0

by Didier Belot -

Thanks for noticing !

The "default" skin, as set by the initial admin settings page for ckeditor, was wrong. It's now ok.

You can try right away by putting "yui3" in the skin setting field, or refreshing the git repos

--

didier

In reply to Didier Belot

Re: CkEditor integration for moodle 2.0

by Mauno Korpelainen -

Attached the first version of CKEditor dragmath plugin - it is functional but needs to be localized the same way as tinymce plugin, now this plugin is using english.

Applet was somehow skrinked to 150x150px so I added to the bottom of  skins/yui3/dialog.css

.dragmathbg applet{
width: 541px;
height:350px;
}

and added to administration code of ckeditor (toolbar)

,Dragmath

and to Extra plugins

dragmath

Otherwise you just need to unzip the files to your CKEditor plugins folder.

I will test these math plugins more next week smile

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0

by Mauno Korpelainen -

Update:

To make margin of applet more symmetric use

.dragmathbg applet{
width: 540px;
height:333px;
}

in skins/yui3/dialog.css

Attached the updated version which is now using in applet current selected language if present in dragmath language files and otherwise english - like the tinymce plugin does.

With language selection Français (fr) it looks like this:

Dragmath

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0

by Didier Belot -

Many thanks for the plugin, it's on github now.

In reply to Didier Belot

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mathew Hillier -

Didier, thanks for your hard work on this editor! big grin

This editor may be the answer to my anoyance with the popup html editor in tinymce!

However as a newbie it took me two days of fustration looking in github to fail to find a easy way to download if the owner didn't put up a zip file under the 'download' button. Finaly the penny dropped when reading a blog on a unrelated moodle issue... you need to add /zipball/master/ to the url! @.@ who would have known...

It would be so much easier of github just had a promonent button that says 'get all this as a zip'!

So for all the newbies out there - to download a repository/project as a ZIP file you can add the extra path '/zipball/master/' onto the end of the github url for a repository.... like so:

https://github.com/electrolinux/moodle-ckeditor/zipball/master/

walah - a zip of the whole lot.

Anyway I provide feedback as to progress and let you know if ckeditor works for my moodle 2.0.2, but too busy teaching this month to realy work on it much!

In reply to Mathew Hillier

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Mathew,

I do not see any problem with "Download" on github. In the example of the electrolinux github site, everything is already there on the screen, no need to add anything. See attached screenshots.

Joseph

Attachment 13-08-2011 09-44-00.jpg
In reply to Joseph Rézeau

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mathew Hillier -

Your screen image now makes me realise what went wrong. smile

I use 'no-script' in firefox that blocks these popup style things. I had allowed github but not akamai. Thus after clicking the download button i just get a screen:no downloads...

However on other projects there were somtimes lists of zip files on this page, leading me to think i was going nuts...

Probably another reason i dont like popups and a nice example of uncessary use of technology (popups) when a plain, usable and accessable html page would have done the job just fine.

Thanks for taking the time smile

In reply to Mathew Hillier

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Vijay N -

Hi Guys,

Moodle 2.0.3 and IIS webserver, Windows 7

I had trouble installing this ckeditor plugin. I followed their steps on the website.

The full path to the ckeditor is moodle/lib/editor/ckeditor

This is how my config file looks:

<?php  // Moodle configuration file
//phpinfo()
unset($CFG);
global $CFG;
$CFG = new stdClass();

$CFG->dbtype = 'mysqli';
$CFG->dblibrary = 'native';
$CFG->dbhost = 'localhost';
$CFG->dbname = 'capella';
$CFG->dbuser = 'capella';
$CFG->dbpass = 'password';
$CFG->prefix = 'mdl_';
$CFG->dboptions = array (
'dbpersist' => 0,
);

$CFG->wwwroot = 'http://localhost/moodle';
$CFG->dirroot = 'C:\inetpub\wwwroot\moodle';
$CFG->dataroot = 'C:\inetpub\moodledata';
$CFG->admin = 'admin';

$CFG->texteditors='ckeditor,tinymce,htmlarea';

$CFG->directorypermissions = 0777;

//$CFG->passwordsaltmain = ',;w]1q_CR-L>=XDn1@T3i/{nu-n@wWZ/';

require_once(dirname(__FILE__) . '/lib/setup.php');

// There is no php closing tag in this file,
// it is intentional because it prevents trailing whitespace problems!
//ini_set ('display_errors', 'on');
// ini_set ('log_errors', 'on');
// ini_set ('display_startup_errors', 'on');
// ini_set ('error_reporting', E_ALL);
// $CFG->debug = DEBUG_ALL;
?>
 
 
Can some one help me with this please?
 
V.
In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mauno Korpelainen -

The guide there is not quite "correct" - don't add those editor tags to site config.php

If you want to use ckeditor with all themes check first that files like lib.php have been extracted/moved to the correct folder lib/editor/ckeditor , login to your site and click Notifications link - moodle should install CKEditor.

Next go to Site administration > Plugins > Text editors > Manage editors and check that CKEditor is at the top and ENABLED.

If you want to use different editors in different themes you can add to theme config.php or theme lib.php for example

$CFG->texteditors = 'ckeditor,textarea';

to some themes and

$CFG->texteditors = 'tinymce,textarea';

to some themes to force those themes use the selected editor (override site setting)

There is no HTMLArea in moodle 2 but you need to have that textarea there!

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Vijay N -

Hi Mauno,

 

I tried your method - the name zip file that got downloaded to my computer from the above link is: "electrolinux-moodle-ckeditor-03812af

I then extracted the zip file and I could see the following files in this folder: 

ckeditor, lang, .gitignore,lib.php, module.js,reademe,settings.php and todo

I then copied all the above files to moodle/lib/editor/ckeditor

I am using binarious theme so as per your above suggestion I have added this line: $CFG->texteditors='ckeditor,tinymce,htmlarea'; 

at the bottom of the config.php file in the binarious theme folder.

I then logged into my moodle site and clicked notification tab - there is no setting shown.

On manage text editors, I dont see the ckeditor.

Not sure why??

 

Any ideas?

 

V.

In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mauno Korpelainen -

Maybe a picture helps:

CKEditor

Check again that files are in correct folder and inside lib/editor/ckeditor you should see

CK2

And DO NOT USE $CFG->texteditors='ckeditor,tinymce,htmlarea';

because there is no htmlarea. Use

$CFG->texteditors = 'ckeditor,textarea';

if you want to force ckeditor.

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Vijay N -

Hi Mauno,

 

Hooray, it worked...basically there were 2 problems that took place earlier -

1) The path above was inside the ckeditors folder so it looked like : moodle/lib/editor/ckeditor/ckeditor and then the above files.

2) the above texteditor setting as you have highlighted was not set. This is now fixed.

 

Now this leads me to the next question. I tested a course page summary by editing it. 

1) I cannot copy or cut any highlighted text (by right clicking the mouse or touch pad on laptop) - this is the same problem I have with tinymce editor.The issue only occurs in latest version of google chrome, Firefox and IE 7 or 8. IE 9 appears to work fine. Any ideas how to fix this. I need to use. The only option is using keyboard - but I was  hoping for answer on using the mouse actions.

Also I am currently looking for html editors that are not build on Javascripts - the reason for this is that one of my departments have a tight security problem and they have blocked javascripts from being used in their network. This means that when running html editors in their network - the toolbar is disabled and all you see is text mode version which is an empty text box. Are there text editors out there that donot rely on javascripts?

Thanks in advance for help.

 

V.

In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Alex Walker -

I can answer your copy/paste question.

The WYSIWYG editor in Moodle replaces your browser's default right-click with its own menu, which is actually a part of the webpage rendered using HTML/CSS/JavaScript. This custom right-click menu uses JavaScript calls to interact with your system's clipboard.

These days, it's considered bad manners (and a security risk) for web pages to be able to read from and write to the clipboard. Because of this, a lot of browsers these days are blocking JavaScript clipboard calls by default.

We've seen this in Moodle 2.1.1 with the standardeditor, viewed in new versions of Firefox. Moodle's editor actually detects when you try and paste in Firefox, and redirects you to a page with details on enabling JavaScript's clipboard access: https://developer.mozilla.org/en/Midas/Security_preferences

Unfortunately, there's no way around this except getting users to disable clipboard protection. Most users won't go to that level of effort. The only option is to get used to pressing Ctrl + V, or somehow disabling the editor's right-click menu so the default system menu is shown.

As for your question about a JavaScript-free rich text editor. Unfortunately, I don't think that's going to be possible. Without using JavaScript or plugins like Flash or Java, all you can really do is have the standard text box. Plain old HTML and CSS just don't offer those features.

In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mauno Korpelainen -

If files were in correct place moodle should have checked and noticed any new plugins (activities, editors, filters...) and moodle should have asked you to save/modify default settings of CKEditor once you clicked Notifications link or visited admin/index.php

And you should see CKEditor in administration menu under plugins/text editors...unless something else breaks html before these checks. Did you see any error messages in site debugging or browser error console?

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Colin Fraser -
Picture of Documentation writers Picture of Testers

Just downloaded and installed it, worked first time, even edited the toolbar, as I wanted the font list and font size in, spell checker, colour text and background, as well as the sub- and super- script buttons.  Have not tested it extensively, Didier, but did not throw up any errors.. so far so good. See how it performs with a couple of pages I want to write on Forensics over the next week. Let you know...

EDIT: BTW, Mauno is right, the README instructions are wrong, I looked in the Admin> Plugins > Text Editors menu and it showed up perfectly, used Manage Editors to make it the default, and settings to add in buttons. All worked like a charm, so did not bother with the instructions in README. Then I read Mauno's comments..smile Glad I didn't follow the instructions...  

In reply to Colin Fraser

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Vijay N -

Hi Mauno,

 

Hooray, it worked...basically there were 2 problems that took place earlier -

1) The path above was inside the ckeditors folder so it looked like : moodle/lib/editor/ckeditor/ckeditor and then the above files.

2) the above texteditor setting as you have highlighted was not set. This is now fixed.

 

Now this leads me to the next question. I tested a course page summary by editing it. 

1) I cannot copy or cut any highlighted text (by right clicking the mouse or touch pad on laptop) - this is the same problem I have with tinymce editor (error pop up msg "currently not supported by your browser, please use keyboard shortcuts".The issue only occurs in latest version of google chrome, Firefox and IE 7 or 8. IE 9 appears to work fine. Any ideas how to fix this. The only option is using keyboard - but I was  hoping for answer on using the mouse actions.

Also I am currently looking for html editors that are not build on Javascripts - the reason for this is that one of my departments have a tight security problem and they have blocked javascripts from being used in their network. This means that when running html editors in their network - the toolbar is disabled and all you see is text mode version which is an empty text box. Are there text editors out there that donot rely on javascripts?

Thanks in advance for help.

 

V.

In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mauno Korpelainen -

Well there are a couple of editors that do not use javascript - they use mostly java and flash - but are you sure that also java and flash are not blocked? Is there some particular reason to block all javascripts? I could imagine that script tags were blocked in content but blocking javascript from the whole site (core code) sounds strange...

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Vijay N -

We are not sure about java and flash not being blocked, but javascript is the main issue at the moment - the IT guys at their end take secuirty very strict. 

Would you be able to share some of these editor names please?- hopefully it will easy to integrate with moodle?

Also have you got any tips on fixing the copy, paste functions via mouse actions - I am trying to make it user friendly for end users. ?

In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mauno Korpelainen -

I believe it's easier to make your IT guys to accept the fact that most web applications nowadays do use javascript - and they also control the use of javascript / stript unwanted javascripts from students material -  and even if moodle can be used without javascript it is not a nice user experience to use moodle without javascript smile

That copy/paste issue is not only a Chrome issue, all browsers have different security policy and also Firefox should by default prevent copy/paste with mouse - see  for example https://developer.mozilla.org/en/Midas/Security_preferences

There are all sorts of work arounds for each browser - for example https://chrome.google.com/webstore/detail/mkklbhjangmgebkkjkgcaehkjiemjkpm for Chrome - or flash based enable copy/paste with actionscript, but changing such things is not at all good... for real security reasons.

You can use google to find out some examples about java or flash/flex based online richtext editors - for example http://metaphaseeditor.com/ - but it is not so simple to just add an editor to moodle. What makes things complicated is that moodle has repository for files, translation system, custom emoticons, different settings, yui... and if you want to try implementing a java based editor to core code of moodle you should find a proper way to implement most of these features to this java based tool as well - without javascript.

 

In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mauno Korpelainen -

I don't fully understand how this department with security problems has "blocked javascripts from being used in their network". Can you explain it with some more details?

If you use your personal browser isn't it simply possible to visit any external editor like http://www.tinymce.com/tryit/full.php and copy/paste the basic html to any textarea - of course without the customized plugins available in moodle itself.

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Alex Walker -

There are corporate firewalls / transparent proxies out there that remove inline JavaScript and calls to .js files before they're delivered to the client.

There's such a proxy designed for home use, called The Proxomitron. It's capable of removing JavaScript, removing embedded sounds, blocking ads at a proxy level etc.

In reply to Alex Walker

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Vijay N -

Thanks Mauno,

The above details are correct. But as Alex has mentioned - its not feasable to negotiate with the IT department about opening access to javascript as they have their security reasons.

On this note, is it then easy to backport to the editor used by Moodle 1.9 on a Moodle 2.0? - I never had this problem moodle 1.9 editor.

V.

In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Mauno Korpelainen -

The default editor of moodle 1.9 - HTMLArea - IS using javascript so I wonder how your IT department did not block that wide eyes

No - seriously - your IT department has some strange and wrong reasons to block TinyMCE. Could you ask them to explain those "security problems"?

Maybe they have read some security report about some 3rd party plugins of tinymce - I have found 2 such reports and moodle does not use those plugins and never has used them. The risk is not in editor - the risk is in wrong kind of implementation of non-checked scripts and plugins that may allow all kinds of file inclusions or attacks.

Use of javascript itself is not a security risk when it's properly controlled. In moodle the "limit" is set to roles and in theory teachers and administrators can add malicious code if they know how to do it and moodle strips all such tags from students code that can contain some security risk. Nothing has changed in user policy from moodle 1.9 to moodle 2 - there are only more settings to control site security policy in moodle 2 but both versions of moodle use javascript in editor.

In reply to Mauno Korpelainen

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Vijay N -

Thanks Mauno,

 

sorry I didnot make clear earlier for the Moodle 1.9. The reasons for moving to moodle 1.9 was not to do with IT department - javascript issue. It was to do with the copy/paste functionality via the mouse action. Moodle 1.9 is not inside their network at the moment. 

The only reason I brought up Moodle 1.9 htmlarea editor was because I never had a problem to copy/cut/paste text using the mouse/touchpad. I never used the keyboard for this at the time.

 

I will also take it as personal task to try and add the above java/flash editor that you have mentioned above to the Moodle 2.0 instance and see if I can get it to work and then contribute my finding over here - or may document it - fingers cross if it works. smile

V.

In reply to Vijay N

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Alex Walker -

This is probably because htmlarea didn't override the right-click menu.

In all other respects, it's not as good as the new editor. For one, it doesn't work well across different browsers. I've had problems with it not showing up in Safari or Firefox.

In reply to Alex Walker

Re: CkEditor integration for moodle 2.0 - getting ZIP files from github!

by Vijay N -

Oh, I totally forgot about the big bummer of an issue with htmlarea of moodle 1.9 - browser compatability issue. ....thanks for reminding - yes your right it doesn't work on anything accept IE.

So that leaves me to try and find out a good html editor that I can run on Moodle 2.0 and support the ability to do copy/paste functions via mouse action.

 

V.

In reply to Didier Belot

Re: CkEditor integration for moodle 2.0

by luke low -

Hi, May I know if I want to embed dragmath into ckEditor alone, what else do I need to add into config.js besides" config.extraplugins = 'dragmath' "

I mean, the name and items thing....

Thanks!

In reply to Didier Belot

Re: CkEditor integration for moodle 2.0

by Debbie Mowry -

Thank you for the work you've done on this. I am one who prefers the CKeditor over the TinyMCE editor and this saves me some work.

There is one thing I am having difficulty with and that is changing the Styles drop-down menu. I can see where you've included the ability in the admin settings:

Either this is unneccesary because you should:

  • edit the default.js file (not my first preference)
  • there needs to be some directions of where to save the new .js file because having it in the same location as the default doesn't work
  • or there is some piece of code that is at issue somewhere that doesn't allow it to take.

If I have time to figure out where the php or js error lies I will but for the sake of being able to allow people to work in a dvelopment environment I'm simply going to edit the default.js styles because so far nothing I have tried works.

I'll update if I figure out what I'm doing wrong,

Debbie

Attachment stylesinadmin.png
In reply to Debbie Mowry

Re: CkEditor integration for moodle 2.0

by andrew midgley -

I realize this is an old thread now but I am desperate to add ckeditor to my moodle site. I have managed to install ckeditor in moodle 2.7 however, when i open up a page with a text editor i receive the following js error.

CKEDITOR is undefined (line 44: module.js)

    CKEDITOR.replace(editorid,options);

Any ideas what might be causing this?

It is also worth pointing out that my joomla site is not on the root but within a folder called moodle. I have already updated all references to accommodate this.


Andy

In reply to Didier Belot

Re: CkEditor integration for moodle 2.0

by Ellen Spertus -

I have not been able to integrate CkEditor with Moodle 2.9.1+.

Per the instructions, I git clone'd moodle-ckeditor from "https://github.com/electrolinux/moodle-ckeditor" into the "lib/editor" directory.

I renamed the downloaded directory from "moodle-ckeditor" to "ckeditor".

I added this line to config.php:

$CFG->texteditors='ckeditor,tinymce,htmlarea';

When I navigate  to Admin > Plugins > Text editors > Manage editors [http://mills-cs.org/admin/settings.php?section=manageeditors], I only see the original 3 editors: TinyMCS HTML editor, Plain text area, and Atto HTML editor.

FWIW, when I experimentally removed "tinymce," from the shown line of config.php,  it still showed up on the "Manage editors" page.  That makes me think that $CFG->texteditors is not being used.  I do know it is being read, because I get an error on the "Manage editors" page if I put a syntax error into that line.

Thank you for any advice.