Magento wysiwyg editor in phtml file

问题

I have created one form in template file using HTML Tags like input, select, buttons etc. I have added textarea in form for address and i want to change it to wysiwyg editor.

Shall i use js/css provided by magento itself?
How to achieve this (change textarea to wysiwyg editor) quickly?

P.S. : I want to do this in template html file only. There is no form.php, grid.php etc.

回答1:

I went through couple of other question/answers here on stackoverflow/magentostack regarding bringing backend tinyMCE to frontend,

Through these

https://magento.stackexchange.com/questions/49504/how-to-add-wysiwyg-editor-to-custom-frontend-form-of-custom-module-in-magento1-9

Magento add wysiwyg to custom frontend form

But they got issue listed/commented with Uncaught ReferenceError: tinyMCE is not defined error. They might have worked on certain pages(if any), but when i tried on product detail page, it didn't work and showed me same error on console tinyMCE is not defined.

So, i went to see which file/js is responsible for this. and i figured it out that js/tiny_mce/tiny_mce_jquery.js is the one responsible for tinyMCE.

So you need to include this file, where you want wysiwyg editor. like i was testing on product detail page so i added only on it

<layout>
  ....
    <catalog_product_view>
       <reference name="head">
            <action method="addjs"> <script>tiny_mce/tiny_mce_prototype.js</script></action>
       </referrence>
     </catalog_product_view>
  ....
</layout>

Then on product view page(for.eg. was just to test) where i added text field <textarea id="myfield"></textarea>

And script part, reference from those listed question above

window.onload=function()
    {
       tinyMCE.init({
        mode : "exact",
        elements: "myfield",
        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>

And it worked,

回答2:

Ideal solution would be using Magento's FORM concept to be able to achieve this.

However, since custom template is being used, I guess here is what you need.

1) Put this code in the .phtml file you want the editor to appear directly.

2) In the 6th line of the code you can see elements: "short_description". You can change "short_description" with the element id you want. You can add more than one element id separated with comma and without spaces.

You might be looking for this.

<script type="text/javascript">
  window.onload=function()
  {
    tinyMCE.init({
    mode : "exact",
    elements: "short_description",
    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>

Let me know if this works for you and I was able to understand this correctly.

Happy to Help!

Happy Coding...

来源：https://stackoverflow.com/questions/34896156/magento-wysiwyg-editor-in-phtml-file

标签

magento

wysiwyg