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.

A screenshot of my old online post editor

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.

At 7:30pm one Saturday evening, I poured a cup of tea and started writing the code. I began by creating the layout I wanted and that worked well despite screen dimensions. I had created the JavaScript so that when the HTML code was edited, it would update the preview instantly. I then reversed the code so that it would look at the preview, get the source HTML from it and then put it in the editors main text box. I had a bit of a problem with controlling the flow of updates but that was remedied promptly by toggling, based on what element was in focus. I then added the script which changed the layout of the editor page.

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...

A screenshot of my new online post editor

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,
Dan

Tags: website, development, optimisations

Did you like this post?

If yes then head to my blog archive where you'll find all of posts to this websites on record.

Equally if you didn't like this post then perhaps you can find something better there.

Title

Posted dd mmm yyyy

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

Posted dd mmm yyyy

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copyright Daniel Ward 2012-2017

Login - Back to the top

Valid XHTML 1.0!