TinyMCE3 and forms.

TinyMCE3 and forms.

by ~ Longbarrow ~ -
Number of replies: 9

Hello,

We're using TinyMCE3 with Moodle 1.9 and I'm trying to get a form into an html block.

I create a block and paste the form code into the code view of the editor but when I go back to the design view and/or save it, the form doesn't appear. When I check the code view in the editor again TinyMCE3 seems to have 'deleted' it. All the surrounding code is there but any form elements have disappeared.

Am I doing something wrong? Is there a setting I've overlooked? Is there a way around this?

Any ideas would be gratefully received! :D

Average of ratings: -
In reply to ~ Longbarrow ~

Re: TinyMCE3 and forms.

by Mauno Korpelainen -

I'm not sure if it is TinyMCE that cuts your tags.

TinyMCE has a rule set for valid elements

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements

that can be changed in init code but I suppose moodle is changing those tags.

Can you send an example as attachment (.txt file) - I could test it with that Glen's integration.

For example $ALLOWED_TAGS in lib/weblib.php controls elements of some activities but it should not cut tags from html blocks...

Average of ratings: -
In reply to Mauno Korpelainen

Re: TinyMCE3 and forms.

by ~ Longbarrow ~ -
Thanks - txt file attached.

:D


Average of ratings: -
In reply to ~ Longbarrow ~

Re: TinyMCE3 and forms.

by Mauno Korpelainen -

OK - the problem is default valid elements rule set in TinyMCE. Moodle 2.0 is using the full rule set but this Glen's version is using default rules and cuts those tags.

One way to fix this is to upload attached file to your theme folder ( /theme/tinymce_integration/fullrule.php ) and add to your init code for example after row theme_advanced_statusbar_location : "bottom", the folowing tags:

<?php include_once($CFG->dirroot.'/theme/tinymce_integration/fullrule.php'); ?>

You can edit that file - it has one none standard rule for embedding:

+"embed[align<bottom?left?middle?right?top|archive|border|class|classid"
  +"|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name"
  +"|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
  +"|onmouseout|onmouseover|onmouseup|src|script|style|tabindex|title|type|usemap"
  +"|vspace|width],"

that you can take away if you don't need embedding code ( I added that to be able to use embed code in addition to object tags in media plugin altghough it is not XHTML strict valid code )

Note that you should change init code only for that part that starts with

if (!empty($COURSE->id) and has_capability('moodle/course:managefiles', get_context_instance(CONTEXT_COURSE, $COURSE->id)))...

and not the other init code starting with else... unless you want to allow students to add forms.

Average of ratings: -
In reply to Mauno Korpelainen

Re: TinyMCE3 and forms.

by Mauno Korpelainen -
Or try this rule set that does not have embed tags - it should be the same as http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements#Full_XHTML_rule_set:
Average of ratings: -
In reply to Mauno Korpelainen

Re: TinyMCE3 and forms.

by ~ Longbarrow ~ -

Hi again Mauno,

Thanks for helping out. That worked brilliantly! :D

Average of ratings: -
In reply to ~ Longbarrow ~

Re: TinyMCE3 and forms.

by ~ Longbarrow ~ -
Hi again,

I've just realised that since I made the changes we can't put youtube or flash videos into Moodle using the editor. (I've kept in the embed code in fullrule.php).

It seems that no urls are transfered through.
The first section of code below is the source code which results from my latest attempts, the second section is a youtube video which we put in before we made the modifications to the editor.

doesn't work:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="233" width="213">
<param name="src" /><embed height="233" src="/" type="application/x-shockwave-flash" width="213"></embed>
</object>


works:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="249" height="205" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="src" value="http://www.youtube.com/v/d2gDp3a65Lo" /><embed type="application/x-shockwave-flash" width="249" height="205" src="http://www.youtube.com/v/d2gDp3a65Lo"></embed>
</object>

No URLs seem to have been passed through.

I'm thinking that the problem is missing code fromt he fullrule.php file, but I don't understand it enough to know what.

Any ideas?

Thanks



Average of ratings: -
In reply to ~ Longbarrow ~

Re: TinyMCE3 and forms.

by Mauno Korpelainen -

There is also that extended_valid_elements : "...", code that can be used to add tags to default rule...

 http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/extended_valid_elements

So you obviously need to either add the rules for form elements with extended_valid_elements or edit the full rule set to allow embedding youtube videos.

A rule like

+"form[accept|accept-charset|action|class|dir<ltr?rtl|enctype|id|lang"
  +"|method<get?post|name|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
  +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onreset|onsubmit"
  +"|style|title|target],"

means that you tell all allowed tags inside the main element (in this case form[...] ) separated by |

The corresponding rule for fieldset is

+"fieldset[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
  +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
  +"|title],"

The whole rule set is ment to cut all non valid XHTML tags away and this way validate the code you insert but all code we need is always valid XHTML thoughtful

Average of ratings: -
In reply to ~ Longbarrow ~

Re: TinyMCE3 and forms.

by Mauno Korpelainen -

... but it is strange that URL is stripped away... Did you embed the code directly or with media plugin of TinyMCE?

Edit: Try http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/media_strict (should work!)

Put

media_strict : false,

to your init code

and if you don't see media plugin in tinymce you can add it to init code with http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/media

Average of ratings: -
In reply to Mauno Korpelainen

Re: TinyMCE3 and forms.

by ~ Longbarrow ~ -
Hi

Thanks again for helping.

Yes, I'm using the media plugin to embed the YouTube vids.

I tried using

media_strict : false

in the init() but it didn't seem to make any difference.

After a bit more testing I've realised that the first time I embed a vid it works in Firefox 2. But if I go back into the label which I embedded it in and save again (even without making any changes to the label) all the urls are stripped again.
The video which I embedded using FF doesn't show up at all in IE 7. (These are the only 2 browsers I've tested in so far.)

Anyway, I've realised that I don't need a solution at the moment - we got the form into the block using your method and now I've just hidden the fullrule.php include code in the init(). As long as I don't need to edit the form I'll be ok. And if I do need to edit it I'll just un-hide the fullrule.php include code, do the edit and then hide the code again.

Thanks so much for your help. I really appreciated it and I understand a little bit more about TinyMCE now. :D
Average of ratings: -