Magento wysiwyg editor in phtml file

2019-09-12 03:42发布

站内问答 / 移动开发
834 2 6

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.

  1. Shall i use js/css provided by magento itself?
  2. 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.

2条回答
\"骚年 ilove
2楼-- · 2019-09-12 04:04

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,

enter image description here

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
3楼-- · 2019-09-12 04:10

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)