3

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

1
  • Basically you need wysiwyg editor for frontend? Feb 21, 2019 at 6:36

1 Answer 1

-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/

1
  • this is another approach and it's not what i want. No js here only php
    – mrtuvn
    Feb 21, 2019 at 6:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.