phtml 文件中的 Magento 所见即所得编辑器

Question

我在模板文件中创建了一个表单，使用 HTML 标签，如输入、select、按钮等。我在地址表单中添加了 textarea，我想更改它至 wysiwyg editor.

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

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

Answer 1

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

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

1) 将此代码放入您希望编辑器直接出现的.phtml 文件中。

2) 在代码的第6行可以看到元素："short_description"。您可以将 "short_description" 更改为您想要的元素 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>

让我知道这是否适合您，我能够正确理解这一点。

乐于助人！

快乐编码...

Answer 2

我在 Whosebug/magentostack 上讨论了其他几个 question/answers 关于将后端 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 中遇到了问题 listed/commented。他们可能在某些页面上工作（如果有的话），但是当我在产品详细信息页面上尝试时，它没有工作，并在控制台 tinyMCE is not defined.

上显示相同的错误

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

所以你需要在你想要所见即所得编辑器的地方包含这个文件。就像我在产品详细信息页面上进行测试一样，所以我只添加了它

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

然后在产品视图页面（for.eg。只是为了测试）我在其中添加了文本字段 <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>

成功了，

phtml 文件中的 Magento 所见即所得编辑器

Magento wysiwyg editor in phtml file

magento

wysiwyg