Programmatically create a wysiwyg editor for frontend magento 2.3

Question

I don't see any examples in frontend of magento for this case. Wonder how to add editor field from php class instead template

When try to call wysiwygConfig->getConfig() in my block class i got error message from core files

Exception #0 (BadMethodCallException): Missing required argument $variablePluginConfigProvider of Magento\Cms\Model\Wysiwyg\CompositeConfigProvider.

Below is my code for generate field editor but i think this is legacy way and can't use anymore in 2.3

public function getHtmlEditor()
{
    //Refactor this line later
    $object_manager = \Magento\Framework\App\ObjectManager::getInstance();
    $wysiwygConfig = $object_manager->get('\Magento\Cms\Model\Wysiwyg\Config');
    $configwysiwyg =  $wysiwygConfig->getConfig();
    $configwysiwygData = $configwysiwyg->getData();
    $configwysiwygData["settings"]["theme_advanced_buttons1"] = "bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code";
    $configwysiwygData["settings"]["theme_advanced_buttons2"] = false;
    $configwysiwygData["settings"]["theme_advanced_buttons3"] = false;
    $configwysiwygData["settings"]["theme_advanced_buttons4"] = false;
    $configwysiwygData["settings"]["theme_advanced_statusbar_location"] = false;
    $configwysiwygData["height"] = "250px";
    $configwysiwygData["add_variables"] = false;
    $configwysiwygData["plugins"] = false;
    $configwysiwygData["add_widgets"] = false;
    $configwysiwygData["add_images"] = false;
    $configwysiwygData["files_browser_window_url"] =false;
    $configwysiwygData["no_display"] =true;
    $configwysiwygData["toggle_button"] = false;
    $configwysiwyg->setData($configwysiwygData);
    $elementId = "custom_wysiwyg_content";
    $config = [
        'label'     => __('Content'),
        'name'      => 'wysiwyg_content',
        'config' => $configwysiwyg,
        'wysiwyg' =>  true,
        'style' => 'width:100%; height:250px;',
        'required'=> true,
        'class' => " required-entry",
        'value' => '',
        "validation" => [
            "required-entry" => true
        ]
    ];
    $form = $object_manager->get('\Magento\Framework\Data\Form');
    $editor = $object_manager->get('\Magento\Framework\Data\Form\Element\Editor')->setData($config);
    $editor->setForm($form);
    $editor->setId($elementId);
    return $editor->getElementHtml();
}

in template i only need to call this method

 echo $block->getHtmlEditor();

Is there a right way to do this ? Prefer no js way only php code

UPDATE

Currently i found the way to solve problem
Add new di.xml in etc folder inside module

etc/frontend/di.xml with content

<type name="Magento\Cms\Model\Wysiwyg\CompositeConfigProvider">
    <arguments>
        <argument name="variablePluginConfigProvider" xsi:type="array">
            <item name="default" xsi:type="string">Magento\Variable\Model\Variable\ConfigProvider</item>
        </argument>
        <argument name="widgetPluginConfigProvider" xsi:type="array">
            <item name="default" xsi:type="string">Magento\Widget\Model\Widget\Config</item>
        </argument>
        <argument name="wysiwygConfigPostProcessor" xsi:type="array">
            <item name="default" xsi:type="string">Magento\Cms\Model\Wysiwyg\DefaultConfigProvider</item>
        </argument>
        <argument name="galleryConfigProvider" xsi:type="array">
            <item name="default" xsi:type="string">Magento\Cms\Model\Wysiwyg\Gallery\DefaultConfigProvider</item>
        </argument>
    </arguments>
</type>

This approach same as admin do but for frontend area

Answer 1

First of all you have to create a text area field like below :

<textarea id="company_description" name="company_description">
</textarea>

Then add below script to load jQuery and WYSIWYG editor and then assign to textarea having id company_description :

<script>
    require([
    "jquery", 
    "mage/translate", 
    "mage/adminhtml/events", 
    "mage/adminhtml/wysiwyg/tiny_mce/setup"
    ], function(jQuery){
        wysiwygcompany_description = new wysiwygSetup("company_description", {
            "width":"99%",  // defined width of editor
            "height":"200px", // height of editor
            "plugins":[{"name":"image"}], // for image
            "tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
            }
        });
        wysiwygcompany_description.setup("exact");
    });
</script>

Now you can see editor on textarea field at frontend. Reference : https://webkul.com/blog/add-wysiwyg-editor-at-front-end-in-magento2-3/