Text editors

Removing/stripping of code

 
Picture of Jamie Hibbard
Removing/stripping of code
 

I am trying very hard to understand why the editor (atto and TinyMCE) are removing my code.

1/ I have added an iframe in html block which works. but every time I go in to edit it remove the whole frame.

2/ I have just created a page http://moodle.langstone-jun.portsmouth.sch.uk/course/index.php?categoryid=107 with some tables using the table editor in Atto, I did add width="100%" to the table to strech it out as Atoo has no ability to edit this. I go back in to add something to the table, and all my tables are removed.

3/ I embed a Youtube video and go to edit and the code is removed for that too. Guess its the same as 1 using iframes.


Why is this happening and how can I stop it? If I use plain texteditor i get my iFrames code fine but the Tables are still removed/


Thanks


Jamie

 
Average of ratings: -
Picture of ryan sanders
Re: Removing/stripping of code
 

there is a few types of "editors within editors"

  • no html editor simple "textarea"
  • atto editor
  • atto editor -> click more buttons -> click <> to see html version,      click <> to go back to markup
  • tinymce editor
  • tinymce editor -> i forget, but same as atto editor.    for seeing html

the html option in the editors = basic textarea.   

at moment i see "bullets" but as soon as i switch over to...html (click <> in atto) i see....

<ul><li>no html editor simple "textarea"<br></li><li>atto editor<br></li><li>atto editor -&gt; click more buttons -&gt; click &lt;&gt; to see html version, &nbsp; &nbsp; &nbsp;click &lt;&gt; to go back to markup<br></li><li>tinymce editor</li><li>tinymce editor -&gt; i forget, but same as atto editor. &nbsp; &nbsp;for seeing html<br></li></ul>

===============

javascript / html wysiwyg editors get a little critical when converting between markup vs html view.  and you may need to work in "html" for some things. 

not sure, how much moodle has hacked up tincymce,  but there use to be a few settings, in a config file for it, for conversion settings. 

===============

not sure but moodle role may play in how much is removed,  and/or filters applied within moodle of how much stuff is removed.   

students = lot of stuff stripped.   editing teachers most likely get more privileges via roles of what is stripped. 

 
Average of ratings: -
Picture of Jamie Hibbard
Re: Removing/stripping of code
 

Thanks for the reply Ryan

It is the <> html area in which I type code.


This is fine. I save it and it displays as coded.


I then "edit category" again and all the html code I typed is gone. It's like it parsing it not understanding and just stripping it out. 


I am a site admin so permissions should not even come into it.

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Removing/stripping of code
 

Test Justin's Generico filter: https://moodle.org/plugins/view.php?plugin=filter_generico

It's a nice workaround for this kind of cases

example

example

By the way if you only need to embed YouTube videos you could as well use Multimedia plugins filter and add plain links to Youtube - moodle can create the embedding code for you https://docs.moodle.org/28/en/Youtube_videos_repository

 
Average of ratings: Useful (1)
Picture of ryan sanders
Re: Removing/stripping of code
 
i remember looking at same issue many times in other software (joomla, drupal, vbulletin, phpbb, other) (years ago),  i want to say it was a setting that needed to be enabled.  my memory is old, so i might suggest looking at "actual permissions" in moodle.  and see if there is a "bit mask" permission that simply needs to be applied.


what the heck... lets see if i can put a quick table here in this reply,  and see what happens when i edit it. 

the code "markup"

<tablestyle="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

the code "html"

Jill Smith 50
Eve Jackson 94

EDIT:  the table and code is all there....

saw a form post a while back that www.moodle.org is running moodle 2.8.x  version if memory serves me right.

 
Average of ratings: -
Picture of ryan sanders
Re: Removing/stripping of code
 

wonder if you are hitting "character limit"   database -> table -> field size   i think is 10,000 characters.   when you start adding in tables... and hyper links, it can eat up that 10,000 character limit in a heart beat.  have hit character limits in other software a few times over. 

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Removing/stripping of code
 

There are actually several good reasons WHY editors or core moodle strip tags.

Editors have validation rules that check source and iframe & script-tags are under special control in core tinymce javascript file. If you need to add iframe-tags you can disable editor from your user profile. Pressing <> in editor does not prevent validation - editor just switches to "html-mode".

If some "normal" html tags get stripped there is usually something wrong in source - some attributes may not be valid or some tags are used in a wrong way.

 
Average of ratings: -
Picture of Vani Bheemreddy
Re: Removing/stripping of code
 


Hi 

here is the code that i used in HTML mode, but when I go to 'Edit category', the 'gradient' style is gone.

Any idea how to go about this?


<table align="center">

<tbody>

<tr>

<td style="background: linear-gradient(to right, #0053aa,black);"><span style="color: #ffffff; font-size: x-large;"><strong>Heading 1</strong></span></td>

</tr>

<tr>

<td><span style="font-size: medium;">Some content</span></td>

</tr>

<tr>

<td style="background: linear-gradient(to right, #0053aa,black);"><span style="color: #ffffff; font-size: x-large;"><strong>Heading 2</strong></span></td>

</tr>

<tr>

<td><span style="font-size: medium;">Some content</span></td>

</tr>

<tr>

<td><span style="font-size: medium;">Some content</span></td>

</tr>

</tbody>

</table>

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Removing/stripping of code
 
It is not caused by editors. Some parts of moodle use HTML purifier that strips "tricky" css properties - see one example of this kind of issues https://tracker.moodle.org/browse/MDL-31577

I am not sure if it is possible to change the configuration of HTML purifier for example in lib/weblib.php - I have not seen any configuration option in administration menu for HTML purifier in moodle 2 - but if you choose to start editing weblib.php take a copy of that file first wink
 
Average of ratings: -
Picture of Jamie Hibbard
Re: Removing/stripping of code
 

But it doesn't do it on save, as you can make lots of changes and view it. it is doing it when you edit again. 

Would love to be able to turn this off

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Removing/stripping of code
 

One workaround could be to save that code (with actual content) for example to some test course topic (can be hidden from students) and when you need to edit that catagory copy and paste the existing code to your category description.

The stripping (made by HTML purifier) is done when you press Edit this catagory - not when you save it.

 
Average of ratings: -
Picture of Richard Oelmann
Re: Removing/stripping of code
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Another workaround - in the html just add a class rather than the style tag, then add the style itself to the customcss of your theme if you have access (and if it has one).

 
Average of ratings: Useful (2)
Picture of Mauno Korpelainen
Re: Removing/stripping of code
 
Excellent workaround! HTML purifier does not strip class
 
Average of ratings: -
Picture of Vani Bheemreddy
Re: Removing/stripping of code
 

Thanks all for your responses.

I did give this workaround a try. Created a class in core.css of the current theme and gave the 'gradient' style in it. In the HTML code, added that class instead of the style tag. What I noticed is that the class is not removed from HTML code, I am also seeing the style in normal view mode of the category as usual. But, I am not seeing that style when in the editor box in 'Edit category settings' page. Is this expected with this workaround?

Thanks again!!


 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Removing/stripping of code
 

It depends on your editor choice. If you have selected Atto (default editor) it takes custom css (at least in themes like Clean, More, Essential,...) and adds custom css to the bottom of all css in cached css file - and you should see the styles in content area of Atto.

If you select TinyMCE from your user profile (old default editor) it needs a different editor.css stylesheet included to your theme /style/ folder and theme config.php ( $THEME->editor_sheets = array('editor'); ) and you need to add the same css class also to this stylesheet to see it in action in content area of TinyMCE.

In plain textarea you see only html.

 
Average of ratings: Useful (2)
Picture of Vani Bheemreddy
Re: Removing/stripping of code
 

That's right. 

So, although this workaround seems to fix my issue for the moment, if user wants to add a different style(Ex: gradient with diff colors may be) in future then a new class need to be created in core.css file. Which means for every new style that gets removed, a new class needs to be created.

I think I will have to look at the weblib.php code and see which part of it is actually removing some of the styles and if there is a way to change the code to avoid that behavior. Would be happy to listen from anyone who figured this out already. I will definitely post when I find something useful.


 
Average of ratings: -
Picture of Richard Oelmann
Re: Removing/stripping of code
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Or you create a set of maybe a dozen 'house style classes' and issue a style guide with those styles - have some degree of consistency across the site, as well as making it easier for the user (tutor creating content)

 
Average of ratings: -
Picture of Richard Oelmann
Re: Removing/stripping of code
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

OR - another alternative might be to look at Justin's Generico filter to add styles?

https://moodle.org/plugins/search.php?s=generico&search=Search+plugins

 
Average of ratings: -
Picture of Vani Bheemreddy
Re: Removing/stripping of code
 

Hi Mauno

Referring to your line "..you need to add the same css class also to this stylesheet to see it in action in content area of TinyMCE..."

Can we import an external css file in editor.css instead of adding class in it. The external css file contains the style class.

Ex: @import "<path to css file>";

 



 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Removing/stripping of code
 

You probably can but if that external css file contains urls for images etc it may fail because moodle is using special syntax in css files to store files to cache.

If you want to use external css in tinymce content css you can also try adding that file to content_css setting in tinymce init code like https://moodle.org/mod/forum/discuss.php?d=269176#p1163890

 
Average of ratings: -
Picture of Jamie Hibbard
Re: Removing/stripping of code
 

So I played around a bit more to find out when the table was being stripped it wasn't at the 100% mark,

It did not like me changing the font size in the Caption cell


TEST
Header Header2



TEST

Header Header2 TEST
Header Header2
Header Header2

 
Average of ratings: Useful (1)
Picture of Jamie Hibbard
Re: Removing/stripping of code
 

I have looked at weblib.php

And by adding

return false;

at line 1616 & 1617 

I am now getting the code I type in back, unedited/stripped.


This is the solution for me

 
Average of ratings: Useful (1)
Picture of Mauno Korpelainen
Re: Removing/stripping of code
 

Jamie,

check this link before you totally disable HTML purifier (you did not mention the version of your moodle so I had to guess what your weblib.php has in lines 1616 & 1617)

HTML purifier is used in moodle for security reasons and you can probably configure some parts of it to allow certain tags or attributes but if you disable function is_purify_html_necessary($text) { } you most likely set your site open for XSS exploits.

 
Average of ratings: Useful (1)
Picture of Richard Oelmann
Re: Removing/stripping of code
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers
Please be careful!
I would not recommend that approach to anyone - I believe you are potentially opening a whole can of worms with regards to the security of your site! If you are happy with that and you have considered the pros and cons, that's your decision - but making other future readers of the forum aware of the potential.
 
Average of ratings: -
Picture of Dubbo Feng
Re: Removing/stripping of code
 

The wired thing is it only happens in category description.

If it is a security concern, it should happens in all text editing area.

I finally solved it by editing course\editcategory.php

Basically bypass the "file_prepare_standard_editor" function.

I am using moodle 3.1


commented line 83-91

/*$mform->set_data(file_prepare_standard_editor(

    $category,

    'description',

    $mform->get_description_editor_options(),

    $context,

    'coursecat',

    'description',

    $itemid

));*/

and added:

$category->descriptiontrust = 1;

$category->description_editor = array("text" => $category->description, "format" => 1, 'itemid' => $itemid);

$mform->set_data($category);



 
Average of ratings: -
Picture of Dubbo Feng
Re: Removing/stripping of code
 

Sorry, I tried to delete my last post but failed. 

This is the wrong method.

We can not bypass the file_prepare_standard_editor function, because it does very important thing. Like change  @@pluginfile@@ to absolute URL.

Please ignore the above post.

 
Average of ratings: -
Picture of Dubbo Feng
Re: Removing/stripping of code
 

I did some more hack.

Tried to add an option 'descriptiontrust' => 1,

In courses\classes\editcategory_form.php line 107-113

public function get_description_editor_options() {

        global $CFG;

        $context = $this->_customdata['context'];

        $itemid = $this->_customdata['itemid'];

        return array(

            'maxfiles'  => EDITOR_UNLIMITED_FILES,

            'maxbytes'  => $CFG->maxbytes,

            'trusttext' => true,

            'descriptiontrust' => 1,

            'context'   => $context,

            'subdirs'   => file_area_contains_subdirs($context, 'coursecat', 'description', $itemid),

        );

    }



Seems work. Not sure if it will affect any other functions.

 
Average of ratings: -
Picture of Dubbo Feng
Re: Removing/stripping of code
 

If still not working.


Try set :


            'trusttext' => 0,

            'noclean' => 1,


in function get_description_editor_options() 

 
Average of ratings: -
Picture of C Behan
Re: Removing/stripping of code
Group Particularly helpful Moodlers

In your Editor Preferences, switch to Plain Text Editor. Code doesn't get stripped out for me this way.

 
Average of ratings: -