If you are a web designer/developer and you haven’t heard of Contentful, then you are in for a treat. Contentful takes the weight out of serving content and makes designing your own content models a breeze. The service is delivered using a REST API architecture, which makes it incredibly easy to grab the content on multiple platforms (web app, mobile app, etc.).

One of the nice features of Contentful is that you can create your own UI extensions to make it easier for marketers, copywriters, designers, and others who will use contentful to enter data. The UI can extend to incorporate API’s from your systems to bring in data, which you can select or other third-party API’s.

Contentful does not have an out of the box HTML editor, instead, they offer up a Markdown editor.

I decided to use the Contentful UI Extension SDK and build my own HTML WYSIWYG editor for contentful. This process wasn’t too hard and I will walk you how you can install my extension and start using it today.

Step 1: Install the Contentful UI Extensions SDK

npm install -g contentful-extension-cli

Step 2: Clone my repository from Github

npm install

Step 3: Optional – Change settings for summernote editor

Summernote allows you to customize all the fields that are available in the WYSIWYG editor that shows up in contentful. Instructions on what settings can be changed is located in the developer deep dive docs at http://summernote.org/deep-dive/

Below is an example of what the default is for the extension, but it all can be customized to your liking.

height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true,
toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough']],
    ['fontsize', ['fontsize']],
    ['insert',['picture', 'link']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph', 'style']],
    ['height', ['height']],
    ['code',['codeview']]
],

Step 4: Update the name of the extension

If you wish to change the name of the extension that will appear in Contentful, you can do so by editing the extension.json file that is located in the root. If you open the file, you will see a few options like the example below.

{
  "id": "summerNoteEditor",
  "name": "Summernote WYSIWYG Editor",
  "src": "http://localhost:3000/",
  "fieldTypes": ["Symbol", "Text"]
}

Step 5: Build the editor and get ready for production

Within the directory, run the following command:

gulp bundle

You will know this worked if you see a /dist directory now in your main directory alongside /src.

Step 6: Obtain your Space ID and Token from Contentful

  • Space ID – You can obtain this by going to Settings > Space and the Space ID will be shown in a text box.
  • Token – You can obtain this by going to APIs > Content Management Token and clicking on Generate Personal Token. Make sure you give it a descriptive name. This token should start with “CFPAT”.

Step 7: Publish your extension to contentful

After you have successfully created your bundle, you can now publish this to contentful and begin using it.

Set Space ID and Token to session in Terminal first.

export SPACE=XXXXX
export CONTENTFUL_MANAGEMENT_ACCESS_TOKEN=XXXXXX

Then run the following command:

contentful-extension update --srcdoc ./dist/index.min.html --force --space-id <space-id>

Step 8: Enable the extension on your field in Contentful

This is the fun part, you are almost ready to start using the field! You just have to enable the extension for the field in contentful.

  • Go to Content Model and click on the field that you wish to change to your new extension.
  • A modal should appear, then Click Settings > Appearance
  • You should see the contentful extension on the right.

If you hit any snags along the way, just let me know and I will try to help you out! Good luck – contentful is a great system!

Categories: CMS

0 thoughts on “How to create a WYSIWYG contentful ui extension”

Leave a Reply

Your email address will not be published. Required fields are marked *