Rich text pasted into fields - workaround / solution attached

[richxrich]

Description:

Input boxes on config page are div's with contenteditable set, but this allows for rich text content to be pasted in and saved in the JSON config file incorrectly.

Environment Details:

• formBuilder Version: 3.7.2
• Browser: Chrome v91
• OS: Windows 10

Expected Behavior

Only a text version of the text to be paste not the rich text version.

Actual Behavior

Extra formating such as HTML etc will be copied into the field.

Steps to Reproduce

An example, copy an excel cell into the name of a new section. If you inspect the field it has inserted an HTML table and other formatting - This will also save into the JSON.

WORKAROUND

Using a promise I worked around it, but ultimately it would be better perhaps tightly integrated or at least label the fields that need this functionality so a better binding could be used (in case contenteditable is used elsewhere on the page for other things).

    // init
    var formBuilder = $('#fb-editor').formBuilder(options);

    formBuilder.promise.then(function(fb) {
        $("[contenteditable]").bind("paste", function(e){
            e.preventDefault()
            var text = e.originalEvent.clipboardData.getData('text').replace(/(\r\n|\n|\r)/gm, "");
            $(this).text(text);
        } );
    });

References:

Code was inspired by:

https://stackoverflow.com/questions/58980235/stop-pasting-html-style-in-a-contenteditable-div-only-paste-the-plain-text

[akshay-bhanderi]

Had the same issue with rich text. ended up writing code for similar work around.

Thank you for sharing. @richxrich

[Jojoshua]

@richxrich wouldn't you expect html to be allowed to be pasted into the paragraph?

[richxrich]

@richxrich wouldn't you expect html to be allowed to be pasted into the paragraph?

This is the config, the variable fields such as label, type, class etc.... this data needs to be plain text and not HTML... it saves the config files with all the HTML in it... a label turns into <p class="something">Name</p> or something like that rather than just "Name"