Magento 2 admin use WYSIWYG for custom textarea

[ebernier]

Hello,

I would like to modify a custom module that I bought. This module let customer ask for a quote. In the backend, I added a textearea for each product requested on quote. I would like to load this field using WYSIWYG instead of a simple textearea. I saw few examples on Internet but it's not working. The section where I added my textarea is added as block in the layout xml file. The form is not constructed with a php _prepareForm() function using addField() but with a simple .phtml template file to display each field.

Do you have some clue to achieve this?
The supplier of the module told me that I have to add necessary librairies (JS and CSS) in the head with layout.xml.

Thanks

[prakash786]

Hello ebernier

In M 2.2 version, you can use below as example.

Step1# create textarea tag in the form

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

Step2# The below script to load jQuery and WYSIWYG and assign to textarea having id short_description.

require([
        'jquery',
        'mage/adminhtml/wysiwyg/tiny_mce/setup'
    ], function(jQuery){
 
    var config = {}, 
        editor;
 
    jQuery.extend(config, {
        settings: {
            theme_advanced_buttons1 : 'bold,italic,|,justifyleft,justifycenter,justifyright,|,' +
                                        'fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code',
            theme_advanced_buttons2: null,
            theme_advanced_buttons3: null,
            theme_advanced_buttons4: null
        }
    });
    editor = new tinyMceWysiwygSetup(
        'short_description',
        config
    );
    editor.turnOn();
    jQuery('#short_description')
        .addClass('wysiwyg-editor')
        .data(
            'wysiwygEditor',
            editor
        );
});

 
Magento2.3

You have to change script code

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