Using TinyMCE with a Stepper Component in Universal Dashboard

Image Description

Daily PowerShell #72

PowerShell Universal Universal Dashboard Daily PowerShell

August 16, 2022

quote Discuss this Article

In this post, we’ll look at how to use TinyMCE with a stepper component in Universal Dashboard.

New-UDTinyMCE

TinyMCE is an extremely powerful text editor component that has been packaged as a Universal Dashboard component with the New-UDTinyMCE function.

You can install the UniversalDashboard.TinyMCE module from the PowerShell Gallery or within the PowerShell Universal admin console to enable this functionality.

Make sure to add the component do your dashboard.

Once you have the component added to your dashboard, you can then create a new instance of it within your dashboard’s page. This example enables a wide range of features and toolbar options.

  $TinyMCEOptions = @{
    plugins = advlist, autolink, link, image, lists, charmap, preview, anchor, pagebreak,
    searchreplace, wordcount, visualblocks, visualchars, code, fullscreen, insertdatetime,
    media, table, emoticons, template, help
    toolbar = undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify |
    bullist numlist outdent indent | link | preview fullscreen |
    forecolor backcolor emoticons | code | help
    menubar = favs file edit view insert format tools table help
    icons = material
}
New-UDTinyMCE -Init $TinyMCEOptions

The result is a TinyMCE instance in your dashboard.

Stepper Integration

In order to integrate it with the stepper, you’ll need to create a hidden input control since TinyMCE doesn’t directly integrate with UD forms or steppers.

First, you will need to create a stepper control that has a few steps. In this example, we use a user info step and a profile step.

New-UDStepper -Children {
    New-UDStep -Label "User Info" -OnLoad {
        New-UDTextbox -Label "Name" -Id 'Name'
        New-UDTextbox -Label "User Name" -Id 'UserName'
    }
    New-UDStep -Label "Profile" -OnLoad {
    }
}

Next, add the TinyMCE editor to the profile step.

New-UDStep -Label "Profile" -OnLoad {
    $TinyMCEOptions = @{
      plugins = advlist, autolink, link, image, lists, charmap, preview, anchor, pagebreak,
      searchreplace, wordcount, visualblocks, visualchars, code, fullscreen, insertdatetime,
      media, table, emoticons, template, help
      toolbar = undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify |
      bullist numlist outdent indent | link | preview fullscreen |
      forecolor backcolor emoticons | code | help
      menubar = favs file edit view insert format tools table help
      icons = material
    }
    New-UDTinyMCE -Init $TinyMCEOptions 
}

To integrate the TinyMCE editor into the stepper, you will need to create a hidden textbox and update the value when the editor changes. In the below code, the -OnEditorChange event handler is used to update the value of the profile textbox using Set-UDElement.

New-UDTinyMCE -Init $TinyMCEOptions -OnEditorChange {
    Set-UDElement -Id 'profile' -Properties @{
        value = $Body 
    }
}
New-UDElement -Tag 'div' -Content {
  New-UDTextbox -Id 'profile'
} -Attributes @{
  style = @{
      display = 'none'
  }
}

Finally, you can tie it all together by implementing an -OnFinish event handler for New-UDStepper. You can find the full code example below.

New-UDStepper -Children {
    New-UDStep -Label "User Info" -OnLoad {
        New-UDTextbox -Label "Name" -Id 'Name'
        New-UDTextbox -Label "User Name" -Id 'UserName'
    }
    New-UDStep -Label "Profile" -OnLoad {
        $TinyMCEOptions = @{
          plugins = advlist, autolink, link, image, lists, charmap, preview, anchor, pagebreak,
          searchreplace, wordcount, visualblocks, visualchars, code, fullscreen, insertdatetime,
          media, table, emoticons, template, help
          toolbar = undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify |
          bullist numlist outdent indent | link | preview fullscreen |
          forecolor backcolor emoticons | code | help
          menubar = favs file edit view insert format tools table help
          icons = material
        }
        New-UDTinyMCE -Init $TinyMCEOptions -OnEditorChange {
            Set-UDElement -Id 'profile' -Properties @{
                value = $Body 
            }
        }
        New-UDElement -Tag 'div' -Content {
          New-UDTextbox -Id 'profile'
        } -Attributes @{
          style = @{
              display = 'none'
          }
        }
  }
} -OnFinish {
    Show-UDToast $Body
}