Rich Editor

Demo
Backendless

This is a component for Backendless UI-Builder designer based on the Quill library.

The component allows rich text editing and presents the user with a WYSIWYG editing area in your application.

blueprintsmanager
August 2, 2023

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!

alexklein
April 7, 2023

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

Stanislaw Grin
April 10, 2023
stanislav_pidlisnyi_one
July 25, 2023

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

Stanislaw Grin
April 7, 2023

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.

alexklein
April 11, 2023

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.

alexklein
April 4, 2023

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

stanislav_pidlisnyi_one
June 27, 2023

Hi, @alexklein!

The Custom component has been fixed and republished.

You can try it with update to the version 1.5.0.

alexklein
March 17, 2023

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.

alexklein
April 9, 2023

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…

alexklein
June 12, 2023

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 😀

Egil Helland
July 25, 2023

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…

Serhiy Melnychuk
March 17, 2023

@alexklein

1.“Text” column type is ok.

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

Stanislaw Grin
April 3, 2023

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

alexklein
April 8, 2023

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 ❤️

Serhiy Melnychuk
June 14, 2023

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;

}

Egil Helland
July 25, 2023

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 :)

alexklein
June 10, 2023

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 😀

Alexander Pavelko
June 9, 2023

Hello @alexklein!

Thank you for reporting the issue.

I am attempting to reproduce it.

Regards,

Alexander

alexklein
April 4, 2023

Great!