Magento – How to add wysiwyg editor to custom frontend form of custom module in Magento1.9

formsfrontendmagento-1.9wysiwyg

I have shown here https://stackoverflow.com/questions/22218898/magento-add-wysiwyg-to-custom-frontend-form and I have putted the code of that site in my .phtml file of custom module for showing wysiwyg editor in frontend custom form instead of "textarea". But it showing nothing. If any one knows about it to render wysiwyg editor in frontend custom form, please reply it.

Best Answer

In html

<input type="text" id="custom_wysiwyg" />

Script

<script type="text/javascript">
window.onload=function()
{
   tinyMCE.init({
    mode : "exact",
    elements: "custom_wysiwyg",
    theme : "advanced",
    plugins : "inlinepopups,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
    theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    theme_advanced_resize_horizontal : 'true',
    theme_advanced_resizing : 'true',
    apply_source_formatting : 'true',
    convert_urls : 'false',
    force_br_newlines : 'true',
    doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'

  });
};
</script>

Hope this helps..

Related Solutions

Magento-1.9 Admin – Custom Form with WYSIWYG Element Not Updating Content

This happens because you name your field content. Then the TinyMCE js looks for the element with id content to apply the editor. But there is already a content element on the page and it's a div.

Adding a prefix to the form elements solves this issue because the element does not have the id content anymore. It has something_content.
You can add this prefix with one line of code.

$form->setHtmlIdPrefix('something_');

Doing this, you don't need to alter the form data you pass to $form->addValues to add your prefix. It will all be done automatically.

The id prefix can be different for each tab if you have multiple tabs.

Magento 2 – How to Add WYSIWYG Editor in Frontend PHTML File

Suppose you have a textarea:

<textarea name="comment" id="comment" class="input-text"></textarea>

then to add wysiwyg editor to the textarea, you just need to write following code in Javascript file or tag:

 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(
        'comment',
        config
    );
    editor.turnOn();
    jQuery('#comment')
        .addClass('wysiwyg-editor')
        .data(
            'wysiwygEditor',
            editor
        );
});

Best Answer

Related Solutions

Magento-1.9 Admin – Custom Form with WYSIWYG Element Not Updating Content

Magento 2 – How to Add WYSIWYG Editor in Frontend PHTML File

Related Topic