如何在AngularJS中移除Froala Editor的列表、表格等HTML标签选项？

Hey there! Let me walk you through how to strip out those unwanted features from Froala Editor in your AngularJS project, while keeping only the <p> content functionality. Here's what you need to do:

First off, you’ll want to explicitly define which toolbar buttons Froala should display—this lets you exclude list, table, iframe, and script-related options entirely. In your AngularJS controller or component where you initialize Froala, set the toolbarButtons option to only include tools relevant to paragraph content (like basic formatting, paragraph alignment, etc.).

Example code snippet:

angular.module('yourApp').controller('EditorCtrl', function($scope) {
  $scope.froalaOptions = {
    // Only keep buttons that work with paragraph content
    toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat', 'align', 'undo', 'redo'],
    // Alternative approach: Hide specific unwanted buttons
    toolbarButtonsHide: ['insertUnorderedList', 'insertOrderedList', 'insertTable', 'insertIframe', 'insertScript'],
    // Set paragraph as the default text format
    paragraphFormat: {
      N: 'Normal' // If you only want <p>, remove other heading options here
    }
  };
});

Even if users try to paste or inject unwanted tags (like <ul>, <table>, <iframe>, <script>), you can configure Froala to automatically strip them out. Use the allowedTags option to restrict the editor to only accept <p> tags (plus any inline formatting tags you want to keep, like <b>, <i>).

Add these rules to your froalaOptions:

allowedTags: ['p', 'b', 'i', 'u', 'span'], // Whitelist only these tags
allowedAttributes: {
  'p': ['style'], // Allow style attribute for alignment/formatting if needed
  'span': ['style']
},
// Optional: Ensure no hidden formats slip through on save
saveWithoutFormatting: false // Keep false to retain <p> structure, set to true for plain text

To stop unwanted tags from sneaking in via copy-paste, listen to the paste.before event and sanitize content before it’s inserted into the editor.

Add this event handler to your froalaOptions:

events: {
  'paste.before': function(e, editor, clipboardContent) {
    // Strip all blocked tags from pasted content
    let cleanedContent = clipboardContent.replace(/<(ul|ol|li|table|tr|td|iframe|script)[^>]*>.*?<\/\1>/gi, '');
    // Convert any remaining block elements (like divs) to <p> tags
    cleanedContent = cleanedContent.replace(/<(div|h1|h2)[^>]*>(.*?)<\/\1>/gi, '<p>$2</p>');
    return cleanedContent;
  }
}

After setting up these configurations, when users save or submit the editor content, it should only contain <p> tags (and your allowed inline formatting) with no traces of lists, tables, iframes, or scripts. For extra safety, you can add a final sanitization step when saving content to your backend.

内容的提问来源于stack exchange，提问作者Ke Vin