0

I am currently working on an SPFx webpart.

Within my property pane I have:

PropertyPaneTextField('CreateNewVerticalNav', {
        label: 'Create New Vertical Nav',
        multiline: true,
        placeholder: 'Enter HTML...'
})

My idea here is to create a text area where markup can be entered.

I am currently accessing the entered in markup like such:

let inputNavHTML: string = this.properties.CreateNewVerticalNav;

$('#accordion-container').append(inputNavHTML);

The code above works as expected. As it produces:

enter image description here

However, I have read that all Property Pane properties need to be escaped with escape() to avoid script injections, but when I adjust the code like such:

let inputNavHTML: string = escape(this.properties.CreateNewVerticalNav);

The entered in markup doesn't append as expected. As it produces:

enter image description here

Has anyone been successful in allowing markup to be entered in their text areas and been able to append them to their webpart?

Thank you!

0

I logged escape(this.properties.multiLineText); to the console and below output is what it gave me when I entered <p style='color:red;'>hello</p> into the multi-line text property

&lt;p style=&#39;color:red;&#39;&gt;hello&lt;/p&gt;

The escape method would encode the following symbols: "&", "<", ">", '"', and "'"

So you need to replace these encoded values with the actual symbols using something like:

multiLineHtml = multiLineHtml.split('&lt;').join('<').split('&gt;').join('>').split('&#39;').join("'").split('&quot;').join('"');

You might want to use a better way to do the above string replacement. Assign this value to the div's innerHTML or whichever DOM element you want and it should render the html correctly.

Below is an image of my code and related output:

enter image description here

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.