Magento 2 : How to Add wysiwyg Editor in Frontend Custom Form

Question

I wanted to create WYSIWYG editor in custom form frontend.

What I tried doing is :

1. Created WysiwygConfig.php file inside Vendor/Extension/Plugin directory with code :

   class WysiwygConfig {
       public function afterGetConfig($subject, \Magento\Framework\DataObject $config)
       {
           $styleArray = [
               'Hero - Image' => 'hero__image',
               'Hero - Heading' => 'hero__heading',
               'Hero - Action Button' => 'hero__primary-action'
           ];
   
           $styles = array_map(function($title, $class) {
               return "{$title}={$class}; ";
           }, array_keys($styleArray), array_values($styleArray));
   
           $config->addData(["settings" => ["theme_advanced_styles" => implode("; ", $styles)]]);
   
           return $config;
       }
   }
   ?>
   

2. Created di.xml file inside Vendor/Extension/etc/ folder and provided plugin name with type.

3. I have frontend template where I want to implement WYSIWYG editor.

I had followed one tutorial but that one is incomplete for me. Please help me to do it.