Text editors

HTML editor breaks my code

 
 
Picture of Visvanath Ratnaweera
HTML editor breaks my code
Group Particularly helpful Moodlers
Say user one uses only the 'standard web form' to enter HTML. He sets a the following code snippet:
<code>This is line one.
This is line two.</code&gt

Now user two, who uses the (WYSIWYG) HTML editor, opens that page and closes it. Now the user one finds that his 'code' has changed to:
<code>This is line one.This is line two.</code&gt
i.e. all in one line!

Is this possible? This happens in Moodle 2.5, within a 'book' from the Book module.
 
Average of ratings: -
Picture of Daniel Thies
Re: HTML editor breaks my code
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

If you are entering in this as HTML code, then you need HTML line breaks <br> to indicate the next line.  The <code> tags are HTML so you do need to be entering this as raw HTML if you want them to be interpreted as such. This is the <> icon with TinyMCE.

 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: HTML editor breaks my code
Group Particularly helpful Moodlers

Hello Daniel

I got your point. <code> is HTML.

Let me put the question differently: How do I mark up program code when editing HTML in Moodle? Specifically Moodle 2.5, Book module.

I don't want to add <br /> at the end of every line! This is source code cut-and-pased from programs.

In other words, when user one types (no WYSIWYG) $lt;sometag>This is line one This is line two.&lt:/sometag> it must produce two lines, even after user two opens the same in the WYSIWYG editor.

I know <pre> tag, but that has a huge line spacing (in standard Moodle 2.5, apparently not in moodle.org:

This is line one
This is line two.

Or is the Geshi filter the solution? See http://docs.moodle.org/25/en/Code_syntax_highlighting.

P.S. Why does it say: "To achieve good results in Moodle 1.9.4+, use the following steps ..."?

 
Average of ratings: -
Gmads
Re: HTML editor breaks my code
 

Hi Visvanath,

It might not be a viable solution, given its current state, but you could try with the Geshi, editor plugin, M 2.5.

Of course, you could just add some styling to the pre tag, like so:

<pre style="line-height:85%;">
code1
code2
</pre>

 To avoid having to do this each and everytime, you could modify the pre tag definition at the css theme file.

 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: HTML editor breaks my code
Group Particularly helpful Moodlers
Guillermo

Thanks a lot! Yes, the <pre> tag with style is the right one for me. Not that I like the way <pre> format things, but I can fine tune it with CSS. And my co-authors WYSIWYG leaves the pre-formatted part intakt!

On a side note: I went through the two long threads you've linked and was amazed to learn how complicated such a simple looking job could be! From my point of view, I want to type HTML - in my profile "Text editor" is set to plain text area - and want the HTML to stay. If my co-author opens it in WYSIWYG things break. I myself might quickly change to a WYSIWYG editor, for example to insert a picture, breaking my HTML in the process!
sad

 
Average of ratings: -
Picture of Daniel Thies
Re: HTML editor breaks my code
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

I think the reason for the 1.9.4 reference is that the documents for GeSHi are out of date and stagnant. The Moodle Docs page is automatically updated by copying the previous release, new releases may have more updated info, but sometimes the documentation is abandoned with little revision.  From what I can tell from the discussion the filter development was 8 years ago and GeSHi seems to be maintained. 

One way of entering  the code might be to copy and paste in the WYSIWYG mode which should produce the breaks, and the use the code tool to add the appropriate tags.  This may work for instructors, but probably is too complicated for students in an online environment. The best thing might be making a simple editor plugin that opens a popup in which code is pasted or typed, and then inserted into the correct tags after any appropriate filtering. This would be similar to the equation editor dialogue.  

I don't believe GeSHi fixes your problem.  It also requires special tags to be inserted.  However, it might be useful afterwards. The problems with teaching programming in Moodle seem to overlap a lot with Mathematics. There are similar issues with TeX notation and the appropriate filters.

 
Average of ratings: -
Picture of Daniel Thies
Re: HTML editor breaks my code
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Guillermo and I were typing at the same time yesterday. He definitely knows more about this than I. Howewver, after I read through the references he gave it appears there is an updated plugin that installs cleanly for M 2.4 or better. I do not know if there are plans to port Atto.

 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: HTML editor breaks my code
Group Particularly helpful Moodlers
Hi Daniel

There are many solutions, or 'work processes' to this. Indeed Guillermo's method is the right one for me. I am sure there are valid WYSIWYG solutions too.

In fact, I am exploring ways of authoring our document outside of Moodle and 'export' it info Moodle in a compatible format. But that would be a separate topic.
 
Average of ratings: -
Picture of Daniel Thies
Re: HTML editor breaks my code
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

I don't think that the link I have above is using a different method than what Guillermo used.  Marc LeBlond simply put everything into one zip in away that does not break Moodle upgrades.

I tried it, and found it to be very  easy solution.

 
Average of ratings: -
Gmads
Re: HTML editor breaks my code
 

Hello Daniel,

A couple of questions:

1. Does the plugin work only for Moodle 2.6 or does it work also for version 2.5?

2. How did you install it? Could you describe the steps followed?

Thanks!

 
Average of ratings: -
Picture of Daniel Thies
Re: HTML editor breaks my code
Group DevelopersGroup Particularly helpful MoodlersGroup Testers
The version number in version.php file requires Moodle 2.4RC. I tested with 2.4 and 2.7  so I assume it will work with anything in between. To install

 

1
2
cd lib/editor/tinymce/plugins
git clone https://github.com/cleblond/moodle-tinymce_rj_insertcode rj_insertcode

 

Then visit admin notifications as usual.
 
Average of ratings: -
Gmads
Re: HTML editor breaks my code
 

Hi Daniel,

Thanks for answering smile

I don't use git, but now I see that it had to be unpacked under:

lib/editor/tinymce/plugins/rj_insertcode

and not under:

lib/editor/tinymce/tiny_mce/3.5.8/plugins

I did, however, get the usual deprecated warning (it seems that the code hasn't been fixed yet):

Deprecated: Assigning the return value of new by reference is deprecated in lib/editor/tinymce/plugins/rj_insertcode/php/rj_get_highlighted_code.php on line 58

This is because of the ampersand character:

$geshi =& new GeSHi($codeContent, $codeType);

I removed it and now everythings seems to be working fine.

 
Average of ratings: -
Gmads
Re: HTML editor breaks my code
 

Hello Visvanath,

I hadn't tried the exercise but I just did and I didn't get the result you got.

I had the profile of user A defined with Use standard web forms, and of user B with Use HTML editor.

User A created a book with four chapters, all with the following code (copied directly from a text editor):

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>An HTML page</title>
<meta name="description" content="An HTML page">
<meta name="author"      content="Gmads">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>

<body>
<p>Hello World!</p>
</body>
</html>

where a diferent format was selected for each chapter: Plain text format, HTML format, Moodle auto-format and Markdown format.

User B logged in and went to edit each chapter. In each case, the editing page was displayed with the original format used by User A, as shown in the following image:

editor formats

User B changed the "hello" text with "goodbye". Once user A logged in to check the book, everything was as it should. Displaying the source page showed the following code for chapter one:

<h2 class="book_chapter_title ">1 chapter one</h2>&lt;!doctype html&gt;<br />
<br />
&lt;html lang=&quot;en&quot;&gt;<br />
&lt;head&gt;<br />
&lt;meta charset=&quot;utf-8&quot;&gt;<br />
<br />
&lt;title&gt;An HTML page&lt;/title&gt;<br />
&lt;meta name=&quot;description&quot; content=&quot;An HTML page&quot;&gt;<br />
&lt;meta name=&quot;author&quot;&nbsp; &nbsp; &nbsp; content=&quot;Gmads&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/styles.css?v=1.0&quot;&gt;<br />
&lt;/head&gt;<br />
<br />
&lt;body&gt;<br />
&lt;p&gt;Goodbye World!&lt;/p&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

As done and described, I didn't need to add break tags after each line, nor use the pre tag. The text code was simply pasted and saved. I did the test in a Page resource (selecting the Pain text format) and got the same result, that is, the original format was displayed and even after user B changed the code, user A saw everything perfectly.

So, maybe your second user is changing the option at the format list box? Or maybe there's a filter that is interfering?

 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: HTML editor breaks my code
Group Particularly helpful Moodlers
Hi Guillermo

That was thorough! Many thanks!

I wish you hadn't spent that much time with this experiment. I got frustrated with these so called (web based) text editors - they are too delicate. This is my "new" workflow:
- my original is in my local computer, as a text file which I can edit with a 'real' text editor.

- I've chosen AsciiDoc as the markup

- I copy the generated HTML into the Moodle 'Book'

- the co-authors collaborate over a version control system

I'm sure others will profit from your work.
 
Average of ratings: -
Gmads
Re: HTML editor breaks my code
 

Hi Visvanath,

You're very welcome; it was a pleasure. Anyway, it's part of what happens when doing collaborative work, but what matters is that we all learn smile

 
Average of ratings: -
Picture of Daniel Thies
Re: HTML editor breaks my code
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Guillermo, I believe the question is really about the use of the <code> tag to represent a block of programming code. Your document did not have have this particular tag. This is why your results were different. TinyMCE does eat the whitespace, but normally the browser does not display the white space. The <code> tag is normally used for inline code snippets. Block snippets can be represented with white space preserved by combining <pre> and <code> tags. For example

<pre><code>First line
    Second line</code></pre> 

displays as

First line
    Second line

 
Average of ratings: -
Gmads
Re: HTML editor breaks my code
 

Hello Daniel,

 

I think there are two issues here: line breaks and code markup.

I understood the first one to be the main one (in his second post, Visvanath even specifies that any tag may be used) and so I tested to see if line breaks were to be deleted automatically when a user, using the HTML editor, opened a book page and then saved it. In my test (in which I didn't use the break nor the pre tags) that didn't happen and it actually didn't have anything to do with the use of the code tag, as shown in this last test:

User A added the following lines after the first paragraph:

<p>Here is a piece of code:<code>
first line of code
second line of code
etc.
</code></p>

User B changed the "Hello World" text to "Hola Mundo".

When user A came back and went to edit the page, everything was fine (i.e. lines were not automatically joined and the code was as it should):

editing code

This shows that the format originally used is saved along with the content and that this same format is presented to the second user, even if the HTML editor is being used.

 

Regarding markup, I think we all agree about the usage of the pre tag or of the geshi plugin.

Incidentally, using the code tag inside the pre block is irrelevant because the pre tag sets a fixed spaced font (unless its default definition is changed, of course).

 

 
Average of ratings:Useful (1)
Picture of Daniel Thies
Re: HTML editor breaks my code
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Which editor are you using TinyMCE or Atto?

 
Average of ratings: -
Gmads
Re: HTML editor breaks my code
 

TinyMCE, under Moodle 2.5. I still have yet to upgrade smile

 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: HTML editor breaks my code
Group Particularly helpful Moodlers
Hi Daniel

Neat observation! Now you say it, that is the reason I changed from 'code' to 'pre' at the start of the discussion, see https://moodle.org/mod/forum/discuss.php?d=261368#p1132892. My feeling is that, the WYSIWIG editor eats the hard line-breaks in 'code' but not in 'pre'.

That is too risky for me. (Where is that documented? How do I know that after an upgrade I don't have to start from the beginning?) Also due to 'habits' (there is nothing to beat a _real_ text editor - not those so called text editors on Moodle https://moodle.org/mod/forum/discuss.php?d=226174 ), I changed my work flow and no more interested in 'intelligent' GUI editing.
 
Average of ratings: -
Picture of Marcus Green
Re: HTML editor breaks my code
Group Particularly helpful Moodlers

"I got frustrated with these so called (web based) text editors - they are too delicate."

There are no perfect GUI/HTML editors, even with all the resources of Adobe, Dreamweaver has issues in allowing WYSIWYG editing of HTML, Microsofts Word export is famous for the mess it produces. If you have the knowledge and want total control, you need to directly edit HTML codes.

 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: HTML editor breaks my code
Group Particularly helpful Moodlers
Hi Marcus

> There are no perfect GUI/HTML editors, even with all the resources of Adobe, Dreamweaver has issues in allowing WYSIWYG editing of HTML,

Small comfort!

> If you have the knowledge and want total control, you need to directly edit HTML codes.

That was what _I_ was doing, or at least what I believed I was doing. I typed HTML in to my "Plain text area". (See user one in the original post.) It was user two wielding this 'HTML editor' who broke my code.

Now after the exercise it is clear to me. Even the "Plain text area" is not an editor! (How could I fallen in to that! sad )

P.S. I can't explain why the prev. post has a duplicate 36 min later: https://moodle.org/mod/forum/discuss.php?d=261368#p1133972.
 
Average of ratings: -
Gmads
Re: HTML editor breaks my code
 

Hello Visvanath,

As content in a web page is supposed to flow or adjust depending on the browser window height and width, the zoom level, etc., so-called HTML editors do not really need to keep or respect how content was entered.

Duplicate spaces and line breaks are "eaten-up" or discarded when content gets displayed, and so, browser-based HTML editors can, and may, discard them. Then, when a user enters a text like this (without any HTML tags at all):

       Eum   in
causae         fabulas,

nonumy pertinax argumentum
sed id,    quo       ne esse

         denique.

the HTML editor is free to convert it into this:

Eum in causae fabulas, nonumy pertinax argumentum sed id, quo ne esse denique.

or into this:

<p>Eum in causae fabulas, nonumy pertinax argumentum sed id, quo ne esse denique.</p>

as, in any case, it will be displayed like this:

Eum in causae fabulas, nonumy pertinax argumentum sed id, quo ne esse denique.

The pre tag is the only one whose contents are displayed as they were entered, regarding inline spaces and line breaks. If someone wanted the previous text to be displayed as it was entered and without using the pre tag, then non-breaking spaces (&nbsp;) and break tags (<br />) would have to be used, and the user would have to enter something like this:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eum&nbsp;&nbsp;&nbsp;in<br />
causae&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fabulas,<br />
<br />
nonumy&nbsp;pertinax&nbsp;argumentum<br />
sed&nbsp;id,&nbsp;&nbsp;&nbsp;&nbsp;quo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ne&nbsp;esse<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;denique.

Conclusion? It won't actually matter if you try to work with a desktop-based text/HTML editor (e.g. Notepad++, Vim, KompoZer) and then paste the visually-neat-formatted-code (like the sample text I showed at the beginning) into the web app HTML editor (e.g. TinyMCE, Atto), it will still "break-up" because as I initially mentioned, all this basically has to do with how browsers are to display web pages. So it doesn't matter if a plidiv or any other tag (except for a pre tag) is used, duplicate spaces and line breaks may, or may not, be discarded without it really affecting anything because content will get to be displayed in many different devices and settings (which is exactly the same situation with eBooks, and that's why ebook formats are HTML-based, by the way).

Technically, HTML editors are real text editors; HTML is just a markup language, but it is all text, not binary.

Cheers!

 

--- some useful references

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

http://webdesignfromscratch.com/html-css/css-block-and-inline/

http://www.w3schools.com/html/default.asp

 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: HTML editor breaks my code
Group Particularly helpful Moodlers
Hi Guillermo

The definition 'line break' = 'white space' is known to me. That is the case in the TeX family of markup (LaTeX, Beamer, ...) and also in XML/SGML based markup (HTML(5), XML, AsciiDoc, DocBook, ...). When you think of it, if one decides to go for markup, one has to stop "formatting" with hard line breaks!

The dispute is, all these markup languages have a verbatim environment. I thought <code> is verbatim, obviously a mistake: only <pre> is.

As for "formatting" with &nbsp; and <br /> tags, imagine doing that for program code copied in to HTML!

Also note that we are talking about two kinds of editors in one go: the 'Plain text area' (<textarea>) and WYSIWYG (TinyMCE, Atto).
 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: HTML editor breaks my code
Group Particularly helpful Moodlers
Hi Daniel

Neat observation! Now you say it, that is the reason I changed from 'code' to 'pre' at the start of the discussion, see https://moodle.org/mod/forum/discuss.php?d=261368#p1132892. My feeling is that, the WYSIWIG editor eats the hard line-breaks in 'code' but not in 'pre'.

That is too risky for me. (Where is that documented? How do I know that after an upgrade I don't have to start from the beginning?) Also due to 'habits' (there is nothing to beat a _real_ text editor - not those so called text editors on Moodle https://moodle.org/mod/forum/discuss.php?d=226174 ), I changed my work flow and no more interested in 'intelligent' GUI editing.
 
Average of ratings: -
Picture of Marcus Green
Re: HTML editor breaks my code
Group Particularly helpful Moodlers
In my view it is "Horses for courses", i.e. Editors are suitable for some but not others. Experts like yourself are probably best off editing the HTML directly. The move to Atto in 2.7 is bound to break some assumptions and code, but that is the price of progress, and it will also bring significant benefits.
 
Average of ratings: -