3

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.

2
  • pratikkhamar.wordpress.com/2012/12/15/… see this.. Commented Dec 27, 2014 at 13:49
  • 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. Commented Dec 29, 2014 at 5:23

2 Answers 2

3

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

7
  • 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/… Commented Dec 29, 2014 at 6:36
  • just check it is properly included in your frontend in browser.. Commented Dec 29, 2014 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. Commented Dec 29, 2014 at 8:44
  • take a look at this @AnkanBhadra tinymce.com Commented Dec 29, 2014 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. Commented Dec 29, 2014 at 10:08
1

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

Your Answer

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

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