Text editors

Atto editor EXTENSIVE markup

 
Picture of Bob Puffer
Atto editor EXTENSIVE markup
Plugin developersTesters

This has probably been brought forth before but if so it deserves another airing. Using 2.93, maybe it's gotten better. Here's the text:

Thank you for taking care of the pre-registration assessments.  Because you live so far from campus, your registration will take place on FRIDAY, AUGUST 26 (one day before the official Orientation period begins for first-year students). Please plan to be on campus by noonFriday, August 26.  We look forward to seeing you then and getting your registration complete for the fall semester.

Here's the markup:

<p><span style="color: rgb(34, 34, 34); font-family: arial, sans-serif; 

font-size: small; font-style: normal; font-variant: normal; font-weight:
 normal; letter-spacing: normal; line-height: normal; orphans: auto; 
 text-align: start; text-indent: 0px; text-transform: none; 
 white-space: normal; widows: 1; word-spacing: 0px; 
 -webkit-text-stroke-width: 0px; display: inline !important; 
 float: none; background-color: rgb(255, 255, 255);">Thank you for 
 taking care of the pre-registration assessments.&nbsp; Because you 
 live so far from campus, your registration will take place on&nbsp;
 </span><span style="color: rgb(34, 34, 34); font-family: arial, 
 sans-serif; font-size: small; font-style: normal; font-variant: 
 normal; font-weight: normal; letter-spacing: normal; line-height: 
 normal; orphans: auto; text-align: start; text-indent: 0px; 
 text-transform: none; white-space: normal; widows: 1; 
 word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: 
 rgb(255, 255, 255);"><span class="aBn" data-term="goog_1227801475" 
 tabindex="0" style="border-bottom-width: 1px; border-bottom-style: 
 dashed; border-bottom-color: rgb(204, 204, 204); position: relative; 
 top: -2px; z-index: 0;"><span class="aQJ" style="position: relative; 
 top: 2px; z-index: -1;">FRIDAY, AUGUST 26</span></span></span>
 <span style="color: rgb(34, 34, 34); font-family: arial, sans-serif; 
 font-size: small; font-style: normal; font-variant: normal; 
 font-weight: normal; letter-spacing: normal; line-height: normal; 
 orphans: auto; text-align: start; text-indent: 0px; text-transform: 
 none; white-space: normal; widows: 1; word-spacing: 0px; 
 -webkit-text-stroke-width: 0px; display: inline !important; 
 float: none; background-color: rgb(255, 255, 255);">&nbsp;
 (one day before the official Orientation period begins for first-year 
 students). Please plan to be on campus by&nbsp;</span>
 <span style="color: rgb(34, 34, 34); font-family: arial, 
 sans-serif; font-size: small; font-style: normal; font-variant: 
 normal; font-weight: normal; letter-spacing: normal; line-height: 
 normal; orphans: auto; text-align: start; text-indent: 0px; 
 text-transform: none; white-space: normal; widows: 1; word-spacing: 
 0px; -webkit-text-stroke-width: 0px; background-color: 
 rgb(255, 255, 255);"><span class="aBn" data-term="goog_1227801476" 
 tabindex="0" style="border-bottom-width: 1px; border-bottom-style: 
 dashed; border-bottom-color: rgb(204, 204, 204); position: relative; 
 top: -2px; z-index: 0;"><span class="aQJ" style="position: relative; 
 top: 2px; z-index: -1;">noon</span></span></span><span style="color: 
 rgb(34, 34, 34); font-family: arial, sans-serif; font-size: small; 
 font-style: normal; font-variant: normal; font-weight: normal; 
 letter-spacing: normal; line-height: normal; orphans: auto; 
 text-align: start; text-indent: 0px; text-transform: none; 
 white-space: normal; widows: 1; word-spacing: 0px; 
 -webkit-text-stroke-width: 0px; display: inline !important; 
 float: none; background-color: rgb(255, 255, 255);">,&nbsp;</span>
 <span style="color: rgb(34, 34, 34); font-family: arial, sans-serif; 
 font-size: small; font-style: normal; font-variant: normal; 
 font-weight: normal; letter-spacing: normal; line-height: normal; 
 orphans: auto; text-align: start; text-indent: 0px; text-transform: 
 none; white-space: normal; widows: 1; word-spacing: 0px; 
 -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
 <span class="aBn" data-term="goog_1227801477" tabindex="0" 
 style="border-bottom-width: 1px; border-bottom-style: dashed; 
 border-bottom-color: rgb(204, 204, 204); position: relative; 
 top: -2px; z-index: 0;"><span class="aQJ" style="position: 
 relative; top: 2px; z-index: -1;">Friday, August 26</span></span>
 </span><span style="color: rgb(34, 34, 34); font-family: arial, 
 sans-serif; font-size: small; font-style: normal; font-variant: 
 normal; font-weight: normal; letter-spacing: normal; line-height: 
 normal; orphans: auto; text-align: start; text-indent: 0px; 
 text-transform: none; white-space: normal; widows: 1; word-spacing: 
 0px; -webkit-text-stroke-width: 0px; display: inline !important; 
 float: none; background-color: rgb(255, 255, 255);">.&nbsp; 
 We look forward to seeing you then and getting your registration 
 complete for the fall semester.</span><br></p>


 
Average of ratings: -
Picture of Visvanath Ratnaweera
Re: Atto editor EXTENSIVE markup
Particularly helpful Moodlers
it that well-formed? That's insane! Who typed that in a https://en.wikipedia.org/wiki/Text_editor ?
;-P
 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Atto editor EXTENSIVE markup
Core developersDocumentation writersParticularly helpful MoodlersPlugin developers

Clearly that is not typed by a human.

That is the sort of mess you get when you copy and paste. Atto is based on HTML5 content-editable http://www.w3.org/TR/html5/editing.html#contenteditable.

Different browsers implement that sightly differently, particularly with regards to what happens when you copy and paste. Some browsers (e.g. Chrome) try harder to keep the style of what you pasted similar to what you copied. That tends to lead to lots of mess like the above in the HTML.

Other browser (e.g Firefox) seem to give cleaner HTML, but that means styles are less likely to be preserved.

 
Average of ratings: Useful (1)
Picture of Visvanath Ratnaweera
Re: Atto editor EXTENSIVE markup
Particularly helpful Moodlers
Tim Hunt wrote:
> Clearly that is not typed by a human.

I am relieved. I got scared thinking that there are super-humen amoung us!
smile

> Different browsers implement that sightly differently, particularly with regards to what happens when you copy and paste.

This must have been some GUI. If the said editor was a text editor, the author would have seen the explosion in mark-up.

If "copy and paste" behaves that way I expect "drag and drop" to be worse. The other day, a teacher alleged that an image in a quiz has suddenly vanished. My text editor showed that the URL of the image was something webkit-fake-url://HUGEHASHORSOMETHING/image.tiff. That is what Safari does with drag-and-dropped images! (Here's an example: "Pasted images disappear from quiz. Help! (Atto problem?)" https://moodle.org/mod/forum/discuss.php?d=269988.) The complication was that the author did not have a local copy!

> Other browser (e.g Firefox) seem to give cleaner HTML, but that means styles are less likely to be preserved.

Tell that to a Apple devotee!
sad
 
Average of ratings: Useful (1)
Picture of Mauno Korpelainen
Re: Atto editor EXTENSIVE markup
 

Visvanath, some browser "bugs" are obviously just "features" big grin

https://bugs.webkit.org/show_bug.cgi?id=49141

 
Average of ratings: Useful (1)
Picture of Mauno Korpelainen
Re: Atto editor EXTENSIVE markup
 

I am not sure if this original problem is caused by webkit / Safari or the way how Atto has used browser commands but somebody has at least tried to change that Style behaviour https://webkit.org/blog/1737/apple-style-span-is-gone/

 
Average of ratings: -
Picture of Visvanath Ratnaweera
Safari can not drag and drop images to Moodle WYSIWYG editor(s)
Particularly helpful Moodlers
Mauno

From the "feature" https://bugs.webkit.org/show_bug.cgi?id=49141, final comment 2016-02-11 05:17:49 PST:
"Guys, this bug is 5 years old and Safari is the only browser which is not capable of pasting images. It affects a lot software like JIRA, Google Docs, Online Office, CKEditor and many many more. Is there any plan to fix that?"

And there is something called "Apple style span" https://webkit.org/blog/1737/apple-style-span-is-gone/. Imagine that, this is not the era of IE4 which bulldozed W3 standards.
sad

Anyway, I don't use Safari, and the teacher I mentioned was not helpful at all. (Initially alleged that the image "suddenly vanished". Refused even to say that he was working in Safari and drag-and-dropping images, neither disclosed whether he is in Atto or TinyMCE. Perhaps that is the psychology of the iFollowers.) Personally, I don't use any GUI editor, unless I am forced to (like uploading images to Moodle). So I have no clue what is happening. Just glad there are people around who understand.

P.S. I noticed that we've side-tracked. I have the discussion a new name, in case the Moderator decides to split the discussion here https://moodle.org/mod/forum/discuss.php?d=328446#p1321651.
 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Safari can not drag and drop images to Moodle WYSIWYG editor(s)
 
In my opinion your comment about drag and drop (images) was not side-tracked. The point that this "feature" has been non-fixed in Safari for 5 years just tells that browsers have always had some custom methods to handle different tasks.

I think the main source of problems is execCommand - http://help.dottoro.com/ljcvtcaw.php

TinyMCE used to have different buttons (plugins) for "Paste from Word" and "Paste text" & different buttons for cleaning unwanted styles - or you can also use HTML button in Atto ( < > ) - but typically somebody is always unhappy, no matter what solution you suggest. Some people want to use editor, some don't. Some people want to copy/paste styles, some don't.
 
Average of ratings: -
Picture of Ken Task
Re: Atto editor EXTENSIVE markup
Particularly helpful Moodlers

Am kinda confused ... an issue?

From where is the text shown generated?

In looking through the massive markup clip, elements referencing webkit can be seen.
Webkit was Googles (thus Android browser and Chromes) chosen layout engine. I might be wrong, but didn't Apple also use webkit in their native browsers for iphones/ipad's? 

In Moodle's language editor, as you know, one can change what an 'element' says, etc..  Could use copy and paste from something that was using webkit engine into the dialog box for the changes?  Those dialog boxes don't display a Atto editor and if it did, is there a 'webkit tidy' button for Atto.   So whatever is copied and pasted is accepted.   Filtering doesn't catch webkit elements?  Recorded into the DB so whenever that is displayed to a client the markup contains webkit markup.

Is this the issue?

'spirit of sharing', Ken


 
Average of ratings: -
Picture of Richard Oelmann
Re: Atto editor EXTENSIVE markup
Core developersParticularly helpful MoodlersPlugin developersTesters

Thank you for taking care of the pre-registration assessments.  Because you live so far from campus, your registration will take place on FRIDAY, AUGUST 26 (one day before the official Orientation period begins for first-year students). Please plan to be on campus by noon, Friday, August 26.  We look forward to seeing you then and getting your registration complete for the fall semester.

And the atto code for the same text if its just typed in or copied from a plain text editor

<p>Thank you for taking care of the pre-registration assessments.&nbsp; Because you live so far from campus, your registration will take place on FRIDAY, AUGUST 26 (one day before the official Orientation period begins for first-year students). Please plan to be on campus by noon, Friday, August 26.&nbsp; We look forward to seeing you then and getting your registration complete for the fall semester.<br></p>

Presumably using the clear formatiing tool in Atto would help get rid of some of the imported code, or maybe that is the issue being reported? Certainly copying and pasting via a plain text editor does (the same as I have always advised my staff with TinyMCE if copying from Word etc.)

 
Average of ratings: -
Picture of Bob Puffer
Re: Atto editor EXTENSIVE markup
Plugin developersTesters

This was imported via a the plain text button.  I think it likely that where the editor came up is that the text was imported via plain text, removed and then imported again via plain text.

 
Average of ratings: Useful (1)
Picture of Richard Oelmann
Re: Atto editor EXTENSIVE markup
Core developersParticularly helpful MoodlersPlugin developersTesters

If it was imported using the plain text button and retained all that formatting, then it definitely needs reporting as a BUG in the tracker, with testing details so it can be replicated and corrected.

 
Average of ratings: Useful (1)
Picture of Mihai Bojonca
Re: Atto editor EXTENSIVE markup
Testers

Bob, were you able to find a fix for the issue ? I am seeing the same behaviour. 

1. Create text in ATTO anywhere in moodle

2. Copy the text

3. Paste the text in the same window as plain text or simply paste it

If you toggle code view you can see the original code very clean however everything that was pasted afterwards is all marked up extensively.


As we are working with multilingual filters we find that as very inconvenient. 


We use MOODLE 3.0.2 with essential theme and OpenSans as default fonts in headers and body.

Please advise.

 
Average of ratings: -
Picture of David Scotson
Re: Atto editor EXTENSIVE markup
Core developersDocumentation writersParticularly helpful MoodlersPlugin developers

Are you using Chrome as a browser?


You may be affected by this bug MDL-50795 "Copying and Pasting within or between Atto boxes adds background color definition in Chrome".


The current resolution of the bug is just to remove the background color part, but the bug also discusses lots of other bits of style that get added. If that is the same thing you may wish to ensure that they open a follow-on bug to discuss what to do about the rest of the styles that get cut'n'pasted into Atto.


 
Average of ratings: Useful (1)
Picture of Bob Puffer
Re: Atto editor EXTENSIVE markup
Plugin developersTesters

Yes, I am using Chrome as a browser.


I've seen less of this, not nearly as severe as my example but still there seems to be a good deal more markup than needed when things get a bit complex

 
Average of ratings: -
François Lizotte
Re: Atto editor EXTENSIVE markup
Particularly helpful Moodlers

Any news on this issue?

I just discovered it this morning testing stuff with Atto using Chrome. Now I notice that the problem doesn't occur here when copying and pasting in a forum post.

Edit: I just read the tracker (https://tracker.moodle.org/browse/MDL-50795). Need to upgrade from 3.0.3.




 
Average of ratings: -