Customizing Ghost's editor: pros and cons

We’re using a setup where our frontend is implemented in Gatsby and back-end is Ghost. Our writers are confused because they now see 3 different styles for articles:

  • when they write in Ghost’s editor
  • when previewed inside Ghost’s Casper theme
  • when rendered in Gatsby using blog’s styles

I want to provide Medium like experience for them where what your write is what you see. Hence I’m thinking about two approaches:

  • customizing Ghost’s editor
  • building a custom editor based on some open-source project and using Admin API to communicate with Ghost

I assume the second approach would require a lot more efforts, but I’m not sure if customizing Ghost editor is something that is easy to do? Any guidance and thoughts on that are highly appreciated.

Assuming most posts look the same, is there a reason you can’t upload a Ghost theme with a post template that looks like a post template in your Gatsby frontend that you use? That would account for the different views the editors are seeing between “prod” and “staging”. Content-wise, there shouldn’t be much of a difference compared to the theme output - most of the changes relate to external content (e.g. iframes aren’t loaded in the Editor but are loaded in previews)

You could eliminate the Ghost theme layer with redirects or JavaScript and redirect people from the Handlebars theme site to the Gatsby instance? At least then you’re hiding a layer that they don’t need to see.

yeah, but I’d need to develop that theme first, right?

Thanks for the comments.

yeah, I’d need to have preview mode with Gatsby then, it’s something that only seems to be supported through Gatsby Cloud, but it’s an option, although the editor would still remain with different styles

@vikaspotluri123, @DavidDarnes so what are you thoughts on styling Ghost editor?

You would, but it could be as simple as taking the gatsby theme you have right now, copying a majority of the static output, and replacing the variable content part with theme variables.

Regarding styling the editor, I’ll let David respond to that, but imo, the editor is designed to let you focus on writing, while previewing is designed to have you focus on design / experience

Pretty much the same comments as @vikaspotluri123 on modifying the editor. Modifying core is really something I don’t recommend, it can lead to maintenance issues and essentially causes you to opt out of updates :slight_smile:

@DavidDarnes, @vikaspotluri123

thanks for your thoughts, guys! I decided to try to implement gatsby preview extension. I haven’t found one for Ghost. I’ll probably need to make small changes to ghost-admin in the section related to Preview button. So far it seems like it might work, one thing I’m curios about is that if there’s any way to get previewUrl from Admin API for draft posts? It seems to be used inside the theme, but I don’t see it in posts returned through the API:

.

In the Admin client, it’s a computed property:

2 Likes

thanks a lot @vikaspotluri123, I decided to simply add a different URL to Preview inside Admin section to direct the user to a different frontend where I’ll show the preview. I’ll probably describe my approach in a blog post for others.

on the other note, do you maybe know when the membership API will be made public? I’ve been waiting for decoupled membership functionality since the release of v3 :slight_smile:

I can’t speak for the core team, but I highly doubt it’ll be made public anytime soon since the entire feature is in beta. As more stuff gets added to Ghost, the API can change or the output structure can be updated

1 Like

yeah, I see, thanks, I decided to go around this :).