Question

Modern Designer - Force Plain Text Paste into a Rich Text Box (via JavaScript or another means?)

Forms Forms Layout Designer

Updated April 24

asked on April 21

Want to alleviate all of the fluff HTML that MS and other editors wrap text with when pasting to a rich text box. I don't want the user to lose their text or their line breaks etc. but all the divs, spans and mso:normals that get wrapped around text that can mess the formatting up.

After pasting their text, I want the user to then be able to style their text with our limited rich text box tools to help ensure more consistent formatting to send to a vendor via the word document that I create on the back end through various workflows.

Very aware that the user could just use CTRL-SHIFT-V (or right mouse click and choose Paste as Plain Text) to perform the paste without formatting but just saying that and depending on them to actually do that is a whole different story.

Really don't want to do this in the classic designer so that I can talk to the JS DOM because I use a lot of the new built-in functionality of the modern designer in this form.

0 0

Answer

SELECTED ANSWER

replied on April 22

You can definitely do what you want with the LFForm object. The key is making it seamless and not confusing your users.

const formFields = {
  richTextField: { fieldId: 123 },
};
const cleanWordHtml = (richTextField) => {
  const dirtyHtml = LFForm.getFieldValues(richTextField);
  const isFromWord = /class="?Mso|style="[^"]*\bmso-|xmlns:o=/i.test(dirtyHtml);
  if (!isFromWord) return;
  const div = document.createElement('div');
  div.innerHTML = dirtyHtml;

  const cleanedValue = div.textContent || div.innerText || '';
  if (cleanedValue !== dirtyHtml) {
    return LFForm.setFieldValues(formFields.richTextField, cleanedValue);
  }
};

LFForm.onFieldChange(() => {
  cleanWordHtml(formFields.richTextField);
}, formFields.richTextField);

window.cleanWordHtml = () => cleanWordHtml(formFields.richTextField);

Option 1:
Now what this does is any time the field changes it attempts to clean it. This might cause more confusion for your users.

Option 2:
I also added the clean function to the window which means you could create a button `<button onclick="cleanWordHtml">Clean</button>` so the user could clean it themselves. This might also be confusing

Option 3:
You could use a plain multiline text field, or another richtext field, that is the "paste here" field. And copy the value from there into the richtext field after cleaning it.

0 0

Replies

replied on April 23

Thank you for the reply.

I ended up using bits and pieces from this as not just one option worked fully as I would have liked.

In my form the data in the RTB is also being totally cleaned of all markup live (I have code in place to fully strip out (using REGEX in a REPLACE function) all non-characters to get a live word count) and that had caused some timing issues when the contents of the box got modified with other functions.

I ended up adding a multiline text field (option 3) and a button that utilized a modified version of the function when the button was pressed (option 2) to copy the text to the RTB.

The multiline text box approach did remove most of the offending MS HTML garbage but putting the cleaned text straight into the RTB caused some other formatting issues I was not anticipating. If the user had inserted   characters, those remained in the text (not as HTML but as the actual   characters) and seemingly all the carriage returns got converted in the DIV as CRLF that, while technically true and probably would show correctly in the word document created after the workflow, did not show on the screen correctly (which for the audience would be a big deal). So, it was necessary to further "clean" the text using the REGEX in a REPLACE function to change the CRLF's to <p> tags. I haven't tested this on more than just a couple of our "problem" cases, but I think this solution will get us past this issue in general.

I appreciate the help!

0 0

replied on April 24

We've tried a few times to handle MSWord pasting better. Its something we're looking into more. Glad you found a semi-decent workaround though

0 0

You are not allowed to follow up in this post.

Question

Question

Modern Designer - Force Plain Text Paste into a Rich Text Box (via JavaScript or another means?)

Answer

Replies

Sign in to reply to this post.