Question

我在模板文件中使用HTML标签创建了一个表单，如输入，选择，按钮等。我在地址的表单中添加了textarea，我想将其更改为wysiwyg editor。

我应该使用magento本身提供的js / css吗？
如何实现这一目标（将textarea更改为wysiwyg editor）？

P.S。：我只想在template html文件中执行此操作。没有form.php，grid.php等。

Answer 1

我在stackoverflow / magentostack上经历了几个关于将后端tinyMCE引入前端的其他问题/答案，

通过这些

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

但是他们列出了Uncaught ReferenceError: tinyMCE is not defined error列出/评论的问题。他们可能已经在某些页面上工作（如果有的话），但是当我尝试使用产品详细信息页面时，它无法正常工作并在控制台tinyMCE is not defined上向我显示相同的错误。

所以，我去看看哪个文件/ js对此负责。我发现js/tiny_mce/tiny_mce_jquery.js是负责tinyMCE的人。

所以你需要包含这个文件，你想要什么是wysiwyg编辑器。就像我在产品详细信息页面上进行测试所以我只添加了它

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

然后在产品视图页面（仅用于测试），我添加了文本字段 <textarea id="myfield"></textarea>

脚本部分，参考上面列出的问题

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>

它有效，

Answer 2

理想的解决方案是使用Magento的FORM概念来实现这一目标。

但是，由于正在使用自定义模板，我想这就是您所需要的。

1）将此代码放在希望编辑器直接显示的.phtml文件中。

2）在代码的第6行，您可以看到元素：＆＃34; short_description＆＃34;。你可以改变＆＃34; short_description＆＃34;使用您想要的元素ID。您可以添加多个以逗号分隔的元素ID，不带空格。

你可能正在寻找这个。

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

请告诉我这是否适合您，我能够正确理解这一点。

乐意帮助！

快乐编码......

在phtml文件中的Magento wysiwyg编辑器

2 个答案: