Froala技术问题：如何为颜色弹窗添加更多标签或自定义颜色按钮？

Absolutely! You’ve already got a solid start with your hack for syncing text and background colors—extending this to add a border color picker and expand the color popup is totally doable. Let’s walk through practical, actionable approaches:

1. Adding Custom Color Buttons or Tabs to the Existing Popup #

Froala doesn’t have a built-in setting for adding new tabs to the default color picker, but you can modify the popup dynamically using its event system:

• Add custom preset colors: Override the default color palette directly in the editor’s initialization config. For example:

  new FroalaEditor('#editor', {
    colors: {
      text: ['#000', '#ff0000', '#00ff00', '#0000ff', '#your-custom-hex'],
      background: ['#fff', '#f0f0f0', '#your-custom-bg-hex'],
      // We'll hook into this structure for border colors too
    }
  });
  

• Insert a new tab/section: Listen for the colorPicker.show event to inject new UI elements into the popup—this aligns with the hack you’re already using for input box syncing.

2. Adding a Border Color Picker (Your Core Need) #

Since you’re already syncing input boxes with editor colors, you can reuse that pattern for border color. Here are two reliable approaches:

Approach 1: Hack the Existing Color Popup #

Leverage Froala’s event system to insert a third color picker section into the default popup:

// Initialize your editor first
const editor = new FroalaEditor('#editor', { /* your existing config */ });

// Listen for when the color popup opens
editor.events.on('colorPicker.show', function ($popup) {
  // Create a dedicated section for border color
  const borderColorSection = `
    <div class="fr-color-section">
      <h4 class="fr-color-title">Border Color</h4>
      <div class="fr-color-picker" id="border-color-picker"></div>
    </div>
  `;
  
  // Append the section to the popup
  $popup.append(borderColorSection);
  
  // Initialize Froala's color picker for border colors
  editor.colorPicker.init($('#border-color-picker'), {
    // Use your custom color palette or stick to defaults
    colors: ['#000', '#ff0000', '#00ff00', '#0000ff', '#ccc'],
    // Handle color selection
    callback: function (color) {
      // Get the currently selected element in the editor
      const selectedElement = editor.selection.get();
      if (selectedElement.length) {
        // Apply border color (force border visibility if needed)
        selectedElement.css({
          'border-color': color,
          'border-style': 'solid' // Optional: ensures border shows up if not already set
        });
        // Sync to your custom input box
        $('#border-color-input').val(color);
      }
    }
  });
});

// Sync your input box changes back to the editor
$('#border-color-input').on('input change', function () {
  const color = $(this).val();
  const selectedElement = editor.selection.get();
  if (selectedElement.length) {
    selectedElement.css('border-color', color);
  }
});

Approach 2: Build a Custom Plugin (Cleaner Long-Term) #

If you want a more maintainable solution, create a custom Froala plugin that adds a dedicated border color button to the toolbar:

// Register a custom plugin icon and command
FroalaEditor.DefineIcon('borderColor', { NAME: 'square' });
FroalaEditor.RegisterCommand('borderColor', {
  title: 'Border Color',
  popup: true,
  popupCallback: function () {
    return `
      <div class="fr-popup">
        <div class="fr-color-picker" id="custom-border-picker"></div>
      </div>
    `;
  },
  callback: function () {
    // Initialize the color picker when the popup opens
    this.colorPicker.init($('#custom-border-picker'), {
      colors: ['#000', '#ff0000', '#00ff00'],
      callback: (color) => {
        const selected = this.selection.get();
        if (selected.length) {
          selected.css({ 'border-color': color, 'border-style': 'solid' });
          $('#border-color-input').val(color);
        }
      }
    });
  }
});

// Add the plugin button to your toolbar
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'borderColor', /* your other buttons */]
});

Key Notes for Your Existing Hack #

Since you already have sync logic for text and background colors, align the border color sync with that pattern to keep consistency. If your current hack uses specific event listeners or DOM manipulation, adjust the code above to match your existing setup—feel free to share your current code if you need help refining it to fit!

内容的提问来源于stack exchange，提问作者Akash Joshi