Check out my brand new WYSIWYG!
POSTED ON 10TH MAR 2014
No, I haven't gone crazy. WYSIWYG stands for 'What You See Is What You Get'. It is a type of editor whereby what you create in the editor is instantly what you can see in the final blog post. It is commonly found on blogging sites and content management systems. So I decided to improve my own here on my website.
Previously, I was using an editor whereby you edit the HTML code and you could directly see what those changes resulted in on the preview as the changes are being made. Although this allowed for quick and easy code entry, it still had some problems. The first was that the layout was non-responsive for mobile devices, which caused the editor to be difficult to work with on a tablet or mobile phone. Another problem was that in order to change something that you've spotted in the preview, you would have to scroll up and down in the editor window to find it in the code. These issues caused the editing process to take longer than it should, so I decided to make some improvements.
I started working on it from scratch, so it was straight to the whiteboard to map out what I wanted it to do. Firstly, I wanted to be able to change the views between code and preview, as well as having both combined, which would help with mobile device accessibility. Secondly, I wanted the same system as before where I could edit the code and have the preview reflect the changes instantly. I also wanted this in the reverse where I could edit the preview directly and have it change the HTML. With those requirements in mind, I then moved on to interface design. I wanted to be able to see the code and the preview at the same time but be able to scroll independently on either without it affecting the other.
After the main requirements were met, I did a couple of tests to ensure that the scripts were working and difficult to break. I also cleaned up and re-commented my code so that when I come back to it I will understand what it means...
Finally, I integrated it with my server-side PHP code so that it could work with my website, pushed it up and used it to write my '2013 in review' blog post.
So now, with this new editor I should be able to create posts with less hassle than before. A version of this editor is available to play with over here.
I plan to expand it with more features that are commonly found, including being able to insert a hyperlink/image without having to touch the HTML code directly, in the near future.
Thank you for reading,