Magento wysiwyg编辑器在phtml文件

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

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

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

2016-01-20 Mansi Raja

我通过几个在这里计算器/ 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>

然后产物视图页（for.eg上。只是测试），其中i添加文本字段从列出的那些问题 <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>

和它的工作，

来源

2016-01-20 13:44:25

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

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

1）将这段代码放在希望编辑器直接出现的.phtml文件中。

2）在代码的第6行中，您可以看到元素：“short_description”。你可以用你想要的元素ID来改变“short_description”。您可以添加多个用逗号分隔且不含空格的元素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>

让我知道这是否适用于您，并且我能够正确理解这一点。

乐意帮忙！

编码快乐......

来源

2016-01-20 13:17:56 Shivani

Magento wysiwyg编辑器在phtml文件

回答

相关问题