Hello, @egil, We are happy to announce that the “Rich Editor” component has been updated to the 1.6.0 version with a new "App font" and "App font size" settings and fixed placeholder data binding.

You already can try it on the Marketplace or Update your actual component to the last version in your App.

Happy Codeless Coding!

Any update on this component? As is, it’s not useable (see bug reports on Github)

Hi @alexklein, we’ve respond you in github issue: https://github.com/Backendless/ui-builder-library/issues/458#issuecomment-1501840254

Hi, @Egil Helland! Thank for your comments. Internal tickets were created to investigate these features.

Hello @alexklein, sorry for not informing you about the update. I checked and see that the ticket was created, the fix was made and the component was updated in the marketplace. Could you please check again (need to reinstall the component again) and let us know if everything is fine now? By the way, in the near future we plan to make automatic updating of components, so in the future to update a component you will only need to click one button.

The loss of focus issue is fixed, but a new bug appeared (described in Github). The bug manifests when there are two instances of the component on a page, both using data binding (one set to “read only”). We can get around this by using “paragraph” component to serve as the “read only” component to get the content from the rich editor, but it’s really suboptimal.

The change seems to have introduced some bugs in the component… I’m creating issues in Github to explain how to reproduce.

Hi, @alexklein!

The Custom component has been fixed and republished.

You can try it with update to the version 1.5.0.

This component looks great — but documentation is a little lacking. Questions:

1) After install, there is a Codeless block for “Get HTML from Rich Editor”. I’m guessing this is what we can use to save content to the database… but what data type should the column (of the db table used for storage) be? Text? JSON?

2) If this component allows a user to create html, could there be security concerns? Could it leave our site vulnerable to XSS attacks?

3) There are nice options to hide link, video, and image insert buttons. It would be great to have some control over the other buttons/options in the editor menu. Is there a programmatic way to show/hide other items in the editor? If so, please provide info in the documentation.

I spoke too soon… in the latest version, there’s a bug where if data binding is used for “Content”, the editor looses focus as soon as one character is typed. Component is unusable in this way (user has to click into editor for each character they want to type). I added an issue in Github…

Found a new bug, see here: https://support.backendless.com/t/data-binding-bug-in-rich-editor-component/16804

I do have a small question: we are trying to style the editor content by setting the default font to what we are using in our app… but don’t seem to be having success with our CSS attempts. Might you be able to share how we can set the font in an extension? Thanks for all you do 😀

Also, there lacks data binding to the Placeholder component, which would be really helpful for those of us doing multi-lingual apps! Should be really simple to fix. Tried to create a branch and give you the fix, but did not seem to be possible so I guess the access is locked down a bit on this…

@alexklein

1.“Text” column type is ok.

2, 3.  I have created an internal tickets to deal with these issues.

Hello @alexklein, glad to inform you that we have released a new version of the component with improvements:

1. Added options visibility controls in the editor menu

2. Prevented XSS attacks

To update your component, use the following instructions:

• find the component to be updated

• copy component id (so that the instances of this component continue to work)

• uninstall this component

• install new one

• go to files/ui-builder/containers/{containerName}/components/custom/{NEW_COMPONENT_ID} and rename this folder with the old id

Great, component works perfectly now… very nice, thank you! It’s also great to hear that updating marketplace components will become easier in the future ❤️

Hello @alexklein!

Unfortunately, there is currently no way to change the default font value for a component content. But I’ve created an internal ticket to try to help you with this.

Setting the font in an Extension does not change the value in the toolbar font select. Also, the component uses inline styles, so values passed in an Extension won't apply to content outside the editor.

However, if you add this code to an Extension, the "Georgia" font will be applied to the content by default.

.ql-editor p {

font-family: georgia, palatino, serif!important;

}

The changes made in June to be able to set default font only works if you have matching fonts within the list provided.

What would be an improvement is to NOT apply any styles, but rather have an option called something to the effect of: (Use default). I think this would work if one modifies in use-quill-library.js to add one option to export const FontFamilyMap:

USE_DEFAULT : ''

The same should be done for Font Size.

Thanks :)

Looks like it’s not a bug, but rather our misunderstanding about data binding… just ignore, component is great! I do have a small question: we are trying to style the editor content by setting the default font to what we are using in our app… but don’t seem to be having success with our CSS attempts. Might you be able to share how we can set the font in an extension? Thanks for all you do 😀

Hello @alexklein!

Thank you for reporting the issue.

I am attempting to reproduce it.

Regards,

Alexander

Great!