HTML Editor for Body?

I have a site using basic html in the body with JEKYLL and the default editor only has “rich text” and “markdown” which convert back and forth between eachother.

Anyone know how to convert and use html <-> rich text?

1 Like

hi blair,

to the best of my knowledge the idea of converting between rich text and html is unusual - if you tell me a bit more about what you are trying to accomplish, i can maybe give more applicable guidance?

I would like to edit in “rich text” with the backend output to be HTML that is stored in my files.

Basically a wysiwyg editor that outputs html instead of markdown

hey @blairanderson - thanks for explaining.

basically this: “a wysiwyg editor that outputs html instead of markdown” is the job of a static site generator, given that your browser can’t understand anything that isn’t html, css or js.

so if you are writing a blog posts, it’ll likely get stored intermediately as an md or some other form of file, and then it’ll get turned into html when you publish.

so basically what i am trying to say is - if you are writing in rich text then the output always will be html.

Yes I have deployed netlify-cms to 4 different sites with success. unfortunately 1 of the sites was converted from wordpress, and that output is an html file with frontmatter on top and html content as the body.

Its actually very common for jekyll sites to have use basic html as the body instead of markdown.

Because of this, i would expect netlify-cms to have an installed wysiwyg editor, which lets you just output the html

Hi @blairanderson, can you open a feature request for it in the CMS repo:

We already have some code that outputs markdown to HTML for displaying previews, so that shouldn’t be hard to reuse:

I think the issue would be to parse the HTML to markdown and make serialisation/deserialisation consistent.

YES! I just figured this out taking a cue from gatsby docs. I am using the gatsby-netlify-cms-starter, so not sure if this will/would have helped you @blairanderson , but all I had to do to format html in my markdown files was add dangerouslySetInnerHTML={{ __html: object }} to my PropTypes object.

Here’s a full example:

import React from 'react'
import PropTypes from 'prop-types'`
import Layout from '../components/Layout'

export const IndexPageTemplate = ({
  heading,
}) => (
  <div>
    <section className="section">
      <div className="container">
        <div className="section has-text-centered">
          <h1 className="mb-6 has-text-info" dangerouslySetInnerHTML={{ __html: heading }} />
        </div>
      </div>
    </section>
  </div>
)

IndexPageTemplate.propTypes = {
  heading: PropTypes.object,
}

const IndexPage = ({ data }) => {
  const { frontmatter } = data.markdownRemark

  return (
    <Layout>
      <IndexPageTemplate
        heading={frontmatter.heading}
      />
    </Layout>
  )
}

IndexPage.propTypes = {
  data: PropTypes.shape({
    markdownRemark: PropTypes.shape({
      frontmatter: PropTypes.object,
    }),
  }),
}

export default IndexPage

export const pageQuery = graphql`
  query IndexPageTemplate {
    markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        heading
      }
    }
  }
`
2 Likes