The problem is that in IE, the browser implements color commands with font tags (<font color=...>).
We specifically strip font tags to avoid abuse when pasting from word (the world has seen enough of Tahoma).
This solution instead uses Rangy to set inline styles on the selection. This works in all browsers nicely.
I also updated the toggleInlineSelectionClass function to use the same rangy function. This solves problems with
whitespace squashing in ie.
We set a min-height and a height in JavaScript to force the editor
to start at a certain height, but then it can be expanded thanks
to the CSS property resize. Though as IE does not support the resize
property we ignore we do not set a height so that the editor expands
as we type.
This removes alot of complex, hard to test, hard to debug code from the editor so
we can focus on the things we want to spend time on. Rangy seems a good choice for
browser support, stability and features.
Remove flaky inline menu icons - instead clicking on the table button, when
you are in a table shows the context menu for the current cell.
I removed all the special code for 'atto_control' - because it did not work very well. Having non-contenteditable
nodes inside a contenteditable region seems in expose bugs in different browsers.
1/ Set the aria-labelledby attribute on the contenteditable div (find the label from
original textarea)
2/ Store/restore the selection for the contenteditable div when it is focused. This allows
you to select some text, then go to the toolbar and click a button, and the selection
will be restored before the button effect is applied.
3/ Add an accessibility helper plugin.
From testing in all screenreaders, I found that all of their support for contenteditable is not great.
They treat it like a textbox - which means you can type and edit text, but it tells you nothing about
the styles, links or images in the editor. So I added a button to the toolbar, that is only accessible
when navigating via keyboard, that opens an accesssibility helper dialogue. The dialogue shows the list
of current styles, a global list of all links, and a global list of all images. Choosing an image or link
from here, will focus on the editable region, and select the link/image.
4/ Add an accessibility checker plugin to Atto.
Checks for images with no alt, images and links with filenames as alternate text/link text, and contrast ratios
less than WCAG 2.0 AA.
The previous change on this issue accidentally fixed a selector,
so the repository API was recieving a valid node instead of null.
This means that it calls it's undocumented and dodgy callbacks on the node,
which are really calls directly to the TinyMCE API (just well buried).
But - by not setting the editor_target property, the api will not do
the secret handshakes.
If plugins try and do this themselves with Y.one, they will fall foul of the
qtype essay page bug which uses : in the id for form elements.
This is an alternative solution, to escaping the ids, which seemed unreliable for older
version of ie.
The cleanup rules are pulled from both testing of live docs, and the
jquery clean plugin. I tested with googledocs, libreoffice, word 2003
and word 2013.
Rewrite the atto plugin loader so that:
A) We have a real settings.php page and can edit the toolbar.
B) All plugins are loaded at the same time (not serially)
C) All plugins share the YUI sandbox (more performance boost).
I had to change the loading API for this - but there are not non-core uses yet,
this is the best time to break it.
