I want to keep the TinyMCE editor for my text fields except for in one area where I want HTML tags to be printed literally (its the Part 1 text box when using a formula question type)....
Is there a way to set TinyMCE so it won't print the HTML tags literally and use what is put in the field as plain text instead? Even when I switch to code view and paste it there it will still mess it up when the question is saved.
Any guidance is appreciated, thanks.
Hello Matt,
In most, if not all, question types and with the Atto and TinyMCE editors, you can directly type tags such as <p>, <br>, etc., while in display mode, as shown here. This appearance is preserved when you save the question. Notice the difference when you switch to the source code mode: the '<' character is represented as the HTML character entity reference '<', and the '>' character is represented as '>'. However, real HTML tags in the source code are displayed as '<p>', '<br>', etc.
Do you mean syntax highlighting. For that there is an additional plug-in, the filter Syntax Highligher.
No not that, when I paste any javascript or HTML code into the textarea field it will output literally when saved. Only way around it is to go into my profile and change to no editor when saving questions which is cumbersome.
If you are using the TinyMCE editor and you want to add HTML, you have to first select "View" then "< > Source code" in the editor's menu.
If you are using the Atto editor and you want to add HTML, you have to first click on the "⮧" button then on the "< / >" button in the editor's menu.
And this is what not works smoothly in the newest TinyMCE in Moodle 4.3.4:
empty lines,
either tag p
empty lines,
either tag p
or tag br
(can't type them fully, as it doesn't display them here)
are visible when typed either in the WYSIWYG editor (enter or shift enter) or in the source code,
but not printed out after saving.
They are still there, in the code, just not displayed.
I am putting this here as the subject of the thread seems adequate.
This is the reason I am considering going back to Atto.
And this is definitely TinyMCE related:
when switched back to Atto, all empty lines are printed fine after save.
When switching to TMCE again, they are shown fine until opened in Tiny, and saved.
Then they are gone from the output.
Does anybody know any workaround?
There are obvious pros to use TinyMCE, and I would like to keep it if possible.
Atto saved an empty paragraph as
Tiny knows the line breaks are there because when you edit the page, the
You can get it to behave the way you expect by pressing Enter to create the paragraph then Shift-Enter to add the
<p><br></p> and because the <br> element was there, the browser rendered the paragraph on screen as a blank line. Tiny only saves them as <p></p> and consecutive empty paragraphs are not rendered in the browser (or rather, rendered with no height).Tiny knows the line breaks are there because when you edit the page, the
<br> elements are being placed in, but they are not there when the saved page is rendered. There is almost certainly some trickery in the background converting carriage return characters to <p><br></p> in the editor but just <p></p> when the saved copy is viewed.You can get it to behave the way you expect by pressing Enter to create the paragraph then Shift-Enter to add the
<br> elements creating the spaces, but this does feel like a bug that perhaps should be logged in the tracker.
Bob, thank you, works!
I wouldn't have found that workaround ever.
In re to tags, also page break is not rendered, neither alone nor within 'p' tag.
I wouldn't have found that workaround ever.
In re to tags, also page break is not rendered, neither alone nor within 'p' tag.
Hey Piotr. Can you clarify what you mean by page breaks not rendered?
Ca răspuns la Bob Gilmore
Odp: Re: Odp: Re: Odp: Re: HTML tags in TinyMCE Editor...
de către Piotr F-
Sure,
Page > Content > text > Menu > Insert > Page break
Page > Content > text > Menu > Insert > Page break
Nothing happens, there is no reaction (not sure what kind of should be).
<p dir="ltr" style="text-align: left;">saga</p>
<p dir="ltr" style="text-align: left;"><!-- pagebreak --></p>
<p dir="ltr" style="text-align: left;">dsfasf</p>
<p dir="ltr" style="text-align: left;"><!-- pagebreak --></p>
<p dir="ltr" style="text-align: left;">dfasd</p>
<p dir="ltr" style="text-align: left;"></p>
<p dir="ltr" style="text-align: left;"></p>
<p dir="ltr" style="text-align: left;"><!-- pagebreak --></p>
Ca răspuns la Piotr F
Re: Odp: Re: Odp: Re: Odp: Re: HTML tags in TinyMCE Editor...
de către Bob Gilmore-
Oh, haha! Ive never even noticed that!
Those <!-- pagebreak --> pieces are just comments and don't do anything, so the option is basically inserting empty paragraphs. It should replace them with some CSS or indicate some CSS applied to those paragraphs.
This seems like an oversite when Tiny was implemented, either that the options shouldn't be there or that the correct HTML/CSS should be implemented for the Tiny plugin to operate.
Ca răspuns la Bob Gilmore
Re: Odp: Re: Odp: Re: Odp: Re: HTML tags in TinyMCE Editor...
de către Bob Gilmore-
Logged https://tracker.moodle.org/browse/MDL-81728 for this one.
Using Shift-Enter is a well-known trick to force
a new empty line in some text editors. Thanks for mentioning it here.
The point here is, it should work alone, not within 'p' tag.
In that case, placed in empty space, after save, it is changed by Tiny into 'p' tag,
and still not rendered.
The only trick is, to hit
Enter, then immediately after,
Shift+Enter,
then it works.
In that case, placed in empty space, after save, it is changed by Tiny into 'p' tag,
and still not rendered.
The only trick is, to hit
Enter, then immediately after,
Shift+Enter,
then it works.
Another buggy thing:
Course > Wiki
put some text into a page,
save,
format a given paragraph as <h6>,
after saving, it is rendered as <h3>, with h3 formatting,
and in dev tools it IS visible as h3.
Course > Wiki
put some text into a page,
save,
format a given paragraph as <h6>,
after saving, it is rendered as <h3>, with h3 formatting,
and in dev tools it IS visible as h3.
When accessed via Tools > source code, it is <h6> though.
So it looks like Tiny during rendering turns all <h6> into <h3>.
I checked with Page resource, all fine, as it should be, <h6> rendered properly, keeping its own formatting.
what version of Moodl is that on? We are currently doing some work on bootstrap 5 migration so its possible its CSS related.
Version 4.3.4+ (Build: 20240425)
Can't move to 4.4 - plugins not updated yet.
As mentioned (not clearly, sorry), if Page resource is used in the course, h6 is rendered OK, and in dev tools visible as h6.
The problem, so far, has been noticed in Wiki resource only.
Can't move to 4.4 - plugins not updated yet.
As mentioned (not clearly, sorry), if Page resource is used in the course, h6 is rendered OK, and in dev tools visible as h6.
The problem, so far, has been noticed in Wiki resource only.
I haven't tried this specific example, but the wiki activity is aggressive with what html elements it accepts.
Newer elements like section, article and any inline CSS is stripped completely.
Newer elements like section, article and any inline CSS is stripped completely.
Other element are converted to something simpler when rendering the wiki.
There is a reason for this. Students can edit the wiki as well as teachers. Teachers can add trusted content, but students definitely shouldn't be able to due to the potential of security issues.
So the problem becomes if a student edits a page with trusted content already there and saves it, the trusted content gets removed.
This tracker outlines it some.more.
The question here could be is it being to aggressive and should more elements be accepted. Maybe time for another tracker to investigate.
Thanks, clear.
However, with admins formatting that should be no security concerns.
However, with admins formatting that should be no security concerns.