Write better articles with the improved editor

Write better articles with the improved editor

We have good news for everyone creating content on their community. We are working on a new version of the content editor and are making improvements so you can write better and nicer articles for your users to read. This new version is available in your staging environment as of today

The goal of this early staging release is to allow you to get familiar with the upcoming changes, get your feedback and suggestions for improvements before we make it publicly available.

 

Where can I see the new editor?
The new editor is enabled in the 'New article' page. When you edit an existing article in the topic moderation page, or in the community itself you will also see the new editor.

New editor in Article page

Creating other topics or writing replies will still use the default editor. We chose to release the new editor for articles only so we could focus development efforts on a single use case, add requested formatting capabilities faster and deliver value to you. The new editor will be made available everywhere across the platform in a later stage.

 

What is supported in the new editor
All the formatting capabilities that were in place already are still there. On top of that we added additional formatting capabilities in the form of:

  • Multi
    • level
      • lists
  • Code blocks with code syntax highlighting
  • Image captions
  • Inline code formatting
  • Text color
  • Text background color
  • Horizontal lines

We made some adjustments to the output of the content to optimize the reading experience for your users. We changed font-sizes and font-weights, line-spacing and whitespace between elements.

 

What is not supported in the new editor
Due to the technical changes needed for this new editor the following functionalities are not supported with this new editor

  • Articles created with the new editor can't be changed with BBcode. The option 'Edit with BBcode' is not available for articles
  • It is not possible to quote posts created with the new editor. The option 'Quote' is temporarily not available for end-users on articles. This option becomes available when the new editor is enabled on all parts of our platform.
  • Adding polls to an article is temporarily disabled. You can still add polls to other topic types

 

More formatting capabilities
We are working on extra formatting capabilities like; tables, anchor links, callouts and accordions. These extra features will be added to the editor along the way, one at the time.

 

When will this be available in my production environment?
Monday 16 September the new editor will be available for articles on your production environment.

We're happy to answer your questions, get your feedback, ideas and suggestions for improvements. Please leave a comment below :point_down:

Update – 16 September
The new editor is now available in Control for all of you

Looks good and also looking forward to extra formatting capabilities like; tables, anchor links, callouts and accordions in the future!





Will take a look at the editor today in stage.
I briefly did some tests - looks good 🙂
Thank you for enabling it on Staging! The editor, as it is now, is already superior to the current one.





During my test I noted the following things:




  • In the "styles" dropdown list there are two heading options (h1 and h2). The h1 tag is reserved for the SEO page title (article title), all headings within the article should be h2, h3 or h4.

  • When using the heading options (e.g. h2), the correct heading CSS (font-size, font-weight, and so on) is being overwritten by default editor CSS.

  • In the "styles" dropdown list is a field "code" and there is also a button "Insert Code Snippet". I don’t think both options are needed to display code in the content. I would prefer only to have the "Insert Code Snippet" function.

  • When writing a long article, the format options disappear from the screen. It will be easier to use when the format options are sticky at the top of the browser window (position: sticky?).

  • After uploading an image, there is a grey arrow below the image without functionality.

  • In the frontend, when hovering over an image, the cursor should change to pointer to indicate that the image is clickable.

  • Small detail: When creating or editing tables, the table header text is always aligned in the center of the cell, whereas the actual output is aligned left.



Notes that might be independent from the new HTML editor:




  • Before publishing the article you can view the article in a WYSIWYG way regarding content width in the frontend. After publishing (and when editing after) the content width is only defined by the control panel, there is no WYSIWYG anymore in that regard.



I will deliver more feedback if I find more.
BRING IT ON!
Thanks for your kind words everybody and great feedback Bjoern, we're looking forward to enabling it. Our thoughts on the feedback;





In the "styles" dropdown list there are two heading options (h1 and h2). The h1 tag is reserved for the SEO page title (article title), all headings within the article should be h2, h3 or h4.


&


In the frontend, when hovering over an image, the cursor should change to pointer to indicate that the image is clickable.


&


When creating or editing tables, the table header text is always aligned in the center of the cell, whereas the actual output is aligned left.



We'll look into this and fix it





When using the heading options (e.g. h2), the correct heading CSS (font-size, font-weight, and so on) is being overwritten by default editor CSS.



We're aligning the editor input (what you create in Control) with what you will see in the community. The output in the destination will have some small optimisations (your own font, font-sizes, font-weights, line-spacing and whitespace between elements) for a better reading experience as well. We're working towards what you create in the editor in Control will be 1:1 visible in the community. (With your own font applied)





In the "styles" dropdown list is a field "code" and there is also a button "Insert Code Snippet". I don’t think both options are needed to display code in the content. I would prefer only to have the "Insert Code Snippet" function.



The Inline code text-styling is inspired by Slack and used to share small snippets of code in your text or to highlight some text. This will stay





When writing a long article, the format options disappear from the screen. It will be easier to use when the format options are sticky at the top of the browser window (position: sticky?).



We're working on improvements to make the editor a fixed height so that the formatting toolbar will always be in your viewport





After uploading an image, there is a grey arrow below the image without functionality.



We'll see if we can remove the arrow as it serves no purpose





Let us know if you have more feedback 👍
The new editor is now available in Control!


We've already processed some of your feedback above and included tables and callouts in this release as well.





We'll keep on improving and adding functionalities along the way, if you have any feedback, suggestions or ideas let us know! ☺️

 

I noticed that there already is a popup to update or insert links to anchors, but how do I add an anchor?

Anchors functionality has not (yet) been enabled for the new editor as not all technical requirements have been built yet. We do have plans to add this functionality to the editor but first, we’re working on stability improvements and feedback from; https://community.insided.com/news-platform-updates-16/our-new-text-editor-is-now-available-on-all-communities-1788

@Yoeri - any updates on anchors? I have tried to add them manually with the source code but it doesn’t work. Hoping this is available soon

We are currently exploring anchor link functionality, check out this design exploration with various concepts and let us know your thoughts: 

 

Terms & ConditionsCookie settings