Magento Wysiwyg编辑器在PHTML文件中 [英] Magento wysiwyg editor in phtml file
问题描述
我已经使用HTML标签(例如输入，选择，按钮等)在模板文件中创建了一种表单.我已经在表单中添加了textarea作为地址，我想将其更改为wysiwyg editor.
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.
- 我可以使用magento本身提供的js/css吗?
- 如何快速实现(将
textarea更改为wysiwyg editor)?
- Shall i use js/css provided by magento itself?
- How to achieve this (change
textareatowysiwyg editor) quickly?
P.S. :我只想在template html文件中执行此操作.没有form.php，grid.php等.
P.S. : I want to do this in template html file only. There is no form.php, grid.php etc.
推荐答案
我在stackoverflow/magentostack上遇到了有关将后端tinyMCE带到前端的其他几个问题/答案，
I went through couple of other question/answers here on stackoverflow/magentostack regarding bringing backend tinyMCE to frontend,
通过这些
但是他们在Uncaught ReferenceError: tinyMCE is not defined error中列出/评论了问题.他们可能已经在某些页面上工作(如果有的话)，但是当我在产品详细信息页面上尝试时，它没有工作，并在控制台tinyMCE is not defined上向我显示了相同的错误.
But they got issue listed/commented with 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.
所以，我去看看哪个文件/js负责了.我发现js/tiny_mce/tiny_mce_jquery.js是负责tinyMCE的人.
So, i went to see which file/js is responsible for this. and i figured it out that js/tiny_mce/tiny_mce_jquery.js is the one responsible for tinyMCE.
因此，您需要在需要wysiwyg编辑器的位置添加此文件.就像我在产品详细信息页面上进行测试一样，所以我只在其上添加了
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>
然后在产品视图页面上(例如，仅用于测试)，我在其中添加了文本字段
<textarea id="myfield"></textarea>
Then on product view page(for.eg. was just to test) where i added text field
<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>
它奏效了，
这篇关于Magento Wysiwyg编辑器在PHTML文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
