Working on the Quick Reply Editor, I have replaced a number of icons (see image below) with Font Awesome Icons. Was planning to replace all of them, but for some reason, replacing a few of them causes the script / template to break (which is odd) so I left them for now.
OK... I found out why I cannot change a few of the icons without breaking things
The original code for the quick editor does a string match on a couple of the HTML strings that represent the original icons. If I change the icon code, the toolbar breaks. This string match is used to insert addition custom icons after the match icon strings.
This is not a problem but I will need to write the PHP code to do a string match using some other string. So my TODO list has increased regarding cleaning up these editors.
OK... I wrote the PHP code and was able to replace two more editor toolbar images with Font Awesome icons (getting round the issues with the original QRE plugin code). The main icon left to do is the "code tag" icon, but I'm not inclined to replace that one yet, since:
it is not easy to find a replacement; and
it is also embedded into may "info" and "hint" areas of the site.
Next, when I have time, I'll transfer and test the same icon changes for the "advanced " editor to make the icons consistent across various site editors.
Also, worked on the same editor to get the font color picker to work in the AAEPE (Advanced and Edit Post Editor) (no joy yet) and to get the attachments to work in QRE (no joy yet). I think the issue is in the two different javascript files used for these two editors. Will need to look deeper into the JS code for these editors. Disabled the PHP and HTML bbcode in the advanced editor since they are mostly misused and we don't need the syntax highlighting for PHP and HTML. The basic code tags work well enough.
The main difference in the two editors are:
Color Picker works in QRE but not in the AAEPE.
Attachments work in the AE but not in the QRE.
AE has post preview mode.
TODO:
Swap the ICODE icon with the CODE gif and add new fa-terminal FA icon for ICODE.
Replace code.gif icon with a screenshot of the new CODE icon for hints and directions.
Maybe reorder the AAEPE icons to match the QRE order to be consistent.
Look into fixing the conflicts or missing functions between the JS code for both editors.
EXTRA TODOs
Create a Bootstrap modal for the editor which explains how to use the two code tags (popup information modal)
Try to get the "upload attachment modal" I wrote to work 100% (not yet available to the site).