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

回答

相關問題