Blog

A Preview of the WYSIWYG Editor in Squiz Matrix App

Tue, Jan. 21, 2014

A lot of work has gone into this development in the last few months. We built the Squiz Matrix App WYSIWYG editor from the ground up without using an existing libraries. It utilizes UIWebView to render the preview and editing interface and UITextView for the source view.

Custom Toolbar and Icons

A beautiful set of custom icons were designed just for this editor, and are in simplistic iOS7 style. The editor includes many of the editing features that users would expect. This includes the standard style controls, bold, italic, underline, etc. as well quick line, link, insert image and many more. Using the asset picker is also supported but isn't shown in the demos.

Demo 1

Using the Editor

The editor is used how any other text input area in iOS is used. A selection of text or content is made, then tapping on the toolbar item below will apply that style. A Source View is also included, you can make changes and this will be reflected in the editor preview.

Demo 2

Colors

We wanted to have a really beautiful color picker to make changing colors really simple. So, we used the open-source HRColorPicker which was exactly what we were looking for. Choosing colors for text or background is simple and seamless.

Demo 3

Release

The editor will be released as part of the 2.0 update of Squiz Matrix App for iOS, which includes a beautiful new iOS 7 design. We are working hard to get it finished very soon, but no release date has been set.

Let us know what you think!

Nicholas Hubbard
Owner

Comments

Tuguldur
Feb 3, 2014
OMG! This is just awesome Nic! I wish a better WYSIWYG editor was available to matrix core open source community!
Nicholas Hubbard
Feb 3, 2014
Thanks! Worked really hard on this. Just finished a new Source View syntax highlighting feature, will update with details soon.
Patricio Lagos
May 22, 2014
Great, great work. There is a way to insert local images, I mean, from iPhone Camera Roll ??? Thank you very much. Again, great work
Nicholas Hubbard
May 22, 2014
It doesn't current support this, but I am not sure how we would make it work if it did. The image would still need to be uploaded somewhere and have a URL so that it could be displayed.

Add Comment