Whitelist specific HTML tags

1 Answer 83 Views
Editor
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 01 Oct 2022, 08:49 AM

Hi!

Is there a way to have a very limited set of HTML tags allowed for the editor? Especially when pasting formatted text?

For example, I only want user to have Bold, Italic, Underline, bullets (ordered and list), and tables.

Any thing else should not be accepted when typed, command buttoned, or pasted.

1 Answer, 1 is accepted

Sort by
0
Alexander
Telerik team
answered on 05 Oct 2022, 05:44 PM

Hi Hassan,

Thank you for reaching out.

At present, there is no built-in configuration for the restriction of arbitrary commands other than explicitly setting only the desired tools through the .Tools() API configuration. Nevertheless, a possible approach would be to:

  • Create a flag variable that will hold only the relevant command that should be executed:
<script>
    var allowedCommands = ["bold","insertunorderedlist","insertorderedlist","bold","italic","createtable","underline"]
</script>    
  • Wire to the Execute event, and within the handler assert whether the current command is present within the previously specified collection and based on the assertion, disable the default behavior and execute any arbitrary logic as per your requirements:
<script>
    var allowedCommands = ["bold","insertunorderedlist","insertorderedlist","bold","italic","createtable","underline"]
    function onExecute (e){
        var currentCommandName = e.name; // Get the current command name.
        
        if(allowedCommands.indexOf(currentCommandName) == -1){
            e.preventDefault();
            // custom logic...
 }
    }

</script>    

Here is a Telerik REPL that illustrates the mentioned above:

Telerik REPL for ASP.NET Core Example

In regards to the pasting functionality, the Editor exposes the ability to define your own logic to clean the pasted HTML as per your developer's requirements. Thus, feel free to further implement your own logic that modifies the exposed markup and return it as a string. More in-depth information is available in the following article that you might find helpful:

Creating Custom pasteCleanup Functions

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Editor
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Alexander
Telerik team
Share this question
or