Froala Format Painter

by Froala_marketing

HTML

<link
  href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
  rel="stylesheet"
  type="text/css"
/>

<div id="editor">
  <h2>
    Mobile Friendly
  </h2>

      <p>
        Froala rich text editor is the first WYSIWYG HTML editor that focused
        significant resources towards the mobile area. As a result it is
        probably the best working editor on mobile devices.
      </p>



</div>

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"
></script>

JavaScript

// ================================
// FORMAT PAINTER PLUGIN - Froala V5
// ================================

(function (FroalaEditor) {

  // 1️⃣ Define Icon
FroalaEditor.DefineIcon("paintFormat", {
  template: "svgMultiplePath",
  PATHS: `<g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style type="text/css"></style></defs><path d="M840 192h-56v-72c0-13.3-10.7-24-24-24H168c-13.3 0-24 10.7-24 24v272c0 13.3 10.7 24 24 24h592c13.3 0 24-10.7 24-24V256h32v200H465c-22.1 0-40 17.9-40 40v136h-44c-4.4 0-8 3.6-8 8v228c0 0.6 0.1 1.3 0.2 1.9-0.1 2-0.2 4.1-0.2 6.1 0 46.4 37.6 84 84 84s84-37.6 84-84c0-2.1-0.1-4.1-0.2-6.1 0.1-0.6 0.2-1.2 0.2-1.9V640c0-4.4-3.6-8-8-8h-44V520h351c22.1 0 40-17.9 40-40V232c0-22.1-17.9-40-40-40zM720 352H208V160h512v192zM477 876c0 11-9 20-20 20s-20-9-20-20V696h40v180z" p-id="11174"></path></g>`,
  VIEWBOX: "0 0 1024 1024",
});

  // 2️⃣ Register Command
  FroalaEditor.RegisterCommand('paintFormat', {
    title: 'Paint Format',
    focus: false,
    undo: false,
    refreshAfterCallback: false,
    callback: function () {
      this.paintFormat.toggle();
    },
    refresh: function ($btn) {
      if (this.paintFormat.isActive()) {
        $btn.addClass('fr-active');
      } else {
        $btn.removeClass('fr-active');
      }
    }
  });

  // 3️⃣ Plugin Definition
  FroalaEditor.PLUGINS.paintFormat = function (editor) {

    let active = false;
    let storedFormats = null;

    // ============================
    // Capture formatting
    // ============================
    function captureFormats() {
      const element = editor.selection.element();
      if (!element) return;

      const computed = window.getComputedStyle(element);

      storedFormats = {
        bold: editor.format.is('strong'),
        italic: editor.format.is('em'),
        underline: editor.format.is('u'),
    ...