New content editor for rich text and markdown

As discussed here, I am working on a new editor to make collaboration possible in a later release.
https://support.squidex.io/t/collaborative-editing/5186/7

I have found an extremely nice library and it was really straight forward to build a custom editor that supports markdown and html:

If you have any feature requests you are welcome. I will provide the old editors as extensions, so you can always move back.

I added word count and character count:

The old markdown editor is available here:
https://github.com/Squidex/squidex-samples/tree/master/editors/markdown

The old richtext editor is available here:
https://github.com/Squidex/squidex-samples/tree/master/editors/richtext

I like the new editor, however our content managers no longer have the ability to change text color and we don’t have access to a code view either. I tried building the code from github and it doesn’t seem to fully work. My existing content does not load and some console errors are displayed that say tinymce skin files are not found. I followed the build instructions in the readme with no luck.

Any suggestions? The build resulted in three files: index.html and a js and css file in an assets folder.

Stuff like text color can be changed. But it is intentional not to give access to the HTML. Potentially you would loose information here, because the new editor is not a HTML editor.

The editors are now available under the following URLs:

https://squidex.github.io/squidex-samples/editors/markdown/index.html
https://squidex.github.io/squidex-samples/editors/richtext/index.html

So you don’t have to build yourself.

I will fix the problem with the skin, but it should not matter. I will check today if something is broken. Can you send me your existing content (e.g. as PM)?

Thanks, that worked.

Yes, because I have fixed it yesterday evening :wink:

I have not decided to add the color to the editor. The goal of headless in general is to create frontend agnostic content. It is understandable that you want basic formatting options like bold, italic and so on (because they can also be styled), but there are settings that are very coupled to the frontend.

Stuff like

  • Color(s)
  • Font Size
  • Font Family
  • Text Alignment

Usually these settings are better represented as a class, because they are used to express a business indent like price-information and so on.

So the question is: How can we represent that? My idea is that you can define some predefined classes in your field settings and the editor can select one of these classes.

Unfortunately I don’t know yet, how to represent this in the editor.

In hygraph you can define classes like this:

So you get the border around the element (I think the label should be outside). This only works for blocks and not for single words, which is not the best idea for stuff like price-information. So I am looking for ideas.

Hi, we have some problems with the new editor, if we have an empty input (empty string) he automatically applies a paragraph p with empty style <p style=\"\"></p>

I will have a look. Empty paragraphs without a style are already filtered out and I will have a look where the style is coming from.

I have deployed a new version with support for classes and improved support for assets:

The text alignment has been removed. I wanted to do it much earlier, but I had to fix a few bugs. If the backslash is too big I might revert my decision here, but the goal is to provide a editor that is frontend agnostic.

If the text alignment comes back, then it will be somehow configurable.

1 Like

Hi,
not sure it’s related but all my buttons in the rich text input don’t work (Except “Show Markup”).

I’m using the cloud environment and I don’t see any issues in javascript console.

Thanks

I am so sorry, will be fixed asap.

1 Like

I have deployed the fix.