Roll your own custom rich content editor in Shopify

Shopify Admin comes with a built-in rich content editor. It has all functionalities a content marketer would need: entering text, uploading videos and images, inserting hyperlinks. But it has never been only about the features.

Picture someone who spends working hours writing a blog post, Shopify's provided editor does not feel right. It is small by default. It does not provide a structure for the writer to rely on anything other than a blank space. Its toolbar is clustered with context-less buttons. If you're writing content for a living, using the default editor is like using a broken pen.

Instead, the ideal tool for the job would probably have:

• A fluid user interface: something like the Ghost blog editor, with which writers can easily flow from one paragraph to the next. Only the keyboard will do. Having to pause to use the mouse would be a hurdle.
• Contextual menu: a set of action items that appear right where we need them.
• Embeddable internal objects: wouldn't it be great if readers are presented with a product card with a buy now button write when they are reading about how nicely a water-proof jacket feels.

In order to build such an editor, we need to do the main tasks:

• Firstly, an admin link extension that allows store owners to open up the new editor from article, product detail or collection page.
• Secondly, and most importantly, the editor interface. We talked about how we would like the editor has the look and feel of Ghost blog editor. So we may want to look deeper into that for inspiration.
• Lastly, from the output of the new editor, save it to Shopify's data objects, be it an article, a product or a collection.

The first task is pretty straight forward. The other two are not so. We would need to explore more in later posts. Like which libraries to base the editor on. Stay tuned.