Magento Wysiwyg编辑器在PHTML文件中

Question

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 . 我使用输入，选择，按钮等HTML标记在模板文件中创建了一种表单。我已在表单中添加了textarea作为地址，我想将其更改为wysiwyg editor 。

Shall i use js/css provided by magento itself? 我可以使用magento本身提供的js / css吗？
How to achieve this (change textarea to wysiwyg editor ) quickly? 如何快速实现这一点（将textarea更改为wysiwyg editor ）？

PS : I want to do this in template html file only. PS：我只想在template html文件中执行此操作。 There is no form.php, grid.php etc. 没有form.php，grid.php等。

Answer 1

I went through couple of other question/answers here on stackoverflow/magentostack regarding bringing backend tinyMCE to frontend, 我在stackoverflow / magentostack上经历了关于将后端tinyMCE带到前端的其他几个问题/答案，

Through these 通过这些

https://magento.stackexchange.com/questions/49504/how-to-add-wysiwyg-editor-to-custom-frontend-form-of-custom-module-in-magento1-9 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 Magento将所见即所得添加到自定义前端表单

But they got issue listed/commented with Uncaught ReferenceError: tinyMCE is not defined error . 但是他们用Uncaught ReferenceError: tinyMCE is not defined error列出/评论了问题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 . 他们可能在某些页面（如果有）上工作过，但是当我在产品详细信息页面上尝试时，它没有工作，并向我显示了tinyMCE is not defined console tinyMCE is not defined上的相同错误。

So, i went to see which file/js is responsible for this. 因此，我去看看是哪个文件/ js负责。 and i figured it out that js/tiny_mce/tiny_mce_jquery.js is the one responsible for tinyMCE. 我发现js/tiny_mce/tiny_mce_jquery.js是负责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> 然后在产品视图页面（例如，仅用于测试）上，我在其中添加了文本字段<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, 它奏效了，

Answer 2

Ideal solution would be using Magento's FORM concept to be able to achieve this. 理想的解决方案是使用Magento的FORM概念来实现这一目标。

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. 1）将此代码放在您希望编辑器直接出现的.phtml文件中。

2) In the 6th line of the code you can see elements: "short_description". 2）在代码的第6行中，您可以看到元素：“ short_description”。 You can change "short_description" with the element id you want. 您可以使用所需的元素ID更改“ short_description”。 You can add more than one element id separated with comma and without spaces. 您可以添加多个元素ID，以逗号分隔且不包含空格。

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... 快乐编码...

Magento Wysiwyg编辑器在PHTML文件中

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-01-20 13:44:25

解决方案2
1 2016-01-20 13:17:56

Magento Wysiwyg编辑器在PHTML文件中

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-01-20 13:44:25

解决方案2 1 2016-01-20 13:17:56

解决方案1
2 已采纳 2016-01-20 13:44:25

解决方案2
1 2016-01-20 13:17:56