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.

  • I want to show this editor in my custom html form in frontend, not admin section.I have put the code in my Block,xml and Html form from your reference site. But it shows nothing.And I thank you for giving a response. But I can't understand what to do as extra. – Ankan Bhadra Dec 29 '14 at 5:23

In html

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


<script type="text/javascript">
    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">'


Hope this helps..

| improve this answer | |
  • I add this code in my custom Html form for showing in frontend. It shows nothing, instead, it shows "ReferenceError: tinyMCE is not defined" for this issue, I add the js in xml file from here [magento.stackexchange.com/questions/17177/… – Ankan Bhadra Dec 29 '14 at 6:36
  • just check it is properly included in your frontend in browser.. – Manikandan Arunachalam Dec 29 '14 at 6:43
  • Thanks for giving response. Another js file like "tiny_mce/tiny_mce.js" will have to be included with above code for showing Tiny Mce Editor.But the text of editor has been inserted/edited as raw in Admin section from frontend custom form.And another thing is that img has been inserted successfully from editor, but img is not showing in admin panel and also in Edit custom form in frontend. What are the correct solution for removing these issues. – Ankan Bhadra Dec 29 '14 at 8:44
  • take a look at this @AnkanBhadra tinymce.com – Manikandan Arunachalam Dec 29 '14 at 9:17
  • Yes, yes. One js library of TinyMCE has to be added.Now this editor has been showing in frontend custom form and data of that editor has been successfully saved. But the saved data of editor has been seen as a Html format in admin panel. Actually, editor's data has been shown in catalog->product's description as a Html format And another thing is that Image from editor has been saved successfully.But, Img is not showing in admin panel and also in Edit custom form in frontend. – Ankan Bhadra Dec 29 '14 at 10:08

If anyone is getting ReferenceError: tinyMCE is not defined error in console, here is solution for you : https://stackoverflow.com/questions/34896156/magento-wysiwyg-editor-in-phtml-file/34901741#34901741

i.e. You need to include js/tiny_mce/tiny_mce_jquery.js

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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