我在自定义模块中创建了一个小部件。一切正常,窗口小部件可以嵌入到CMS页面中。但是,我想要添加WYSIWYG编辑器而不是textarea参数类型。
这是我的widget.xml中的重要部分:
<parameters>
<description translate="label">
<required>0</required>
<visible>1</visible>
<label>Description</label>
<type>textarea</type>
</description>
</parameters>
我想知道是否有办法扩展Magento的功能以允许与此类似的WYSIWYG编辑器:
<parameters>
<description translate="label">
<required>0</required>
<visible>1</visible>
<label>Description</label>
<type>WYSIWYG</type>
</description>
</parameters>
有没有人遇到过类似的问题? ..或者有谁知道如何实现这一目标?也许通过一个自定义渲染器,它调用WYSIWYG编辑器,但是如何...?
提前完成。
答案 0 :(得分:7)
我终于设法自己做了。对于所有遇到同样问题的人,我就这样做了:
在widget.xml中,我的参数设置如下:
<parameters>
<text translate="label">
<required>1</required>
<visible>1</visible>
<label>Specify text</label>
<description>No double quotes allowed, use single quotes instead!</description>
<type>cmswidget/widget_wysiwyg</type>
</text>
</parameters>
要在小部件的textarea上启用WYSIWYG编辑器,我在自定义模块中创建了一个新的块类,扩展了类Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element并覆盖了render()函数:
class MyCompany_MyModule_Block_Widget_Wysiwyg extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element
{
public function render(Varien_Data_Form_Element_Abstract $element)
{
$editor = new Varien_Data_Form_Element_Editor($element->getData());
$editor->setId($element->getId());
$editor->setForm($element->getForm());
$editor->setWysiwyg(true);
$editor->setForceLoad(true);
return parent::render($editor);
}
}
现在,我很高兴在小部件中看到编辑器。不幸的是,仍然存在问题。由于编辑器使用双引号创建内联样式和属性,并将其作为窗口小部件attribut放置到CMS页面 - 它本身也是双引号,因此无法正确呈现窗口小部件。为了解决这个问题,我扩展了类Mage_Widget_Model_Widget并用单引号替换了编辑器双引号,如下所示:
class MyCompany_MyModule_Model_Widget extends Mage_Widget_Model_Widget
{
public function getWidgetDeclaration($type, $params = array(), $asIs = true)
{
if( preg_match('~(^mymodule/myblockclass)~', $type) )
{
$params['text'] = str_replace('"', "'", $params['text']);
}
return parent::getWidgetDeclaration($type, $params, $asIs);
}
}
getWidgetDeclaration()函数内部我检查窗口小部件类型是否是我想要处理的。窗口小部件类型在widget.xml中为每个窗口小部件指定,如下所示:
<MyCompany_MyModule_MyWidgetName type="mymodule/myblockclass" translate="name description" module="mymodule">
<!-- ... -->
</MyCompany_MyModule_MyWidgetName>
现在,我得到的一切都像我想要的一样。编辑器生成的HTML将使用单引号替换双引号,输出将完美运行。之前我逃过这样的双引号 - “一些文字”。这似乎最初起作用,但是当通过单击图标(编辑器视图)编辑窗口小部件时,html被切断了。 Magento的javascript似乎以自己的方式逃脱了字符串。但是,上面描述的方法将起作用,因为我在插入窗口小部件时只用单引号替换双引号,而Magento在CMS编辑器视图中打开窗口小部件时将单引号转换为双引号。
希望这对某些人有用。
答案 1 :(得分:3)
我不认为这与Magento 1.9兼容了。 我已经尝试过这种方法,在保存添加了小部件的cms块/页面时,我一直收到javascript错误
错误:[未知对象] .fireEvent()中的错误: 事件名称:formSubmit 错误消息:无法设置属性&#39;值&#39;为null
答案 2 :(得分:0)
基于Rouzbeh,我添加了一些小jQuery代码,用于验证是否使用了双引号:
<description>
<![CDATA[
<script>
jQuery("#widget_options textarea").keyup(function(){
if(jQuery(this).val().indexOf('"') > -1){
jQuery(this).val(jQuery(this).val().replace('"',"'"));
alert('No double quotes allowed, use single quotes instead.')
}
});
</script>
]]>
</description>
答案 3 :(得分:0)
因此,已知的解决方案似乎不再适用于1.9+,所以我创建了一个替代方案,它添加了WYSIWYG,但使用了另一种编辑器。
我使用了这个编辑器:
https://alex-d.github.io/Trumbowyg/
最终结果如下:
步骤1:下载编辑器文件并在adminhtml皮肤区域中加速:
在我的例子中,我将它们放在skin/adminhtml/default/js/wysiwyg
步骤2:在您的模块中,您需要定义管理布局更新,并在您的adminhtml布局文件中添加指令以加载库文件(和jquery)
由于我希望这只出现n个CMS页面编辑,我通过适当的句柄添加:
<adminhtml_cms_page_edit>
<reference name="head">
<action method="addJs">
<script>lib/jquery/jquery-1.12.0.js</script>
</action>
<action method="addJs">
<script>lib/jquery/noconflict.js</script>
</action>
<action method="addItem"><type>skin_js</type><name>js/wysiwyg/trumbowyg.min.js</name></action>
<action method="addItem"><type>skin_css</type><name>js/wysiwyg/ui/trumbowyg.min.css</name></action>
</reference>
</adminhtml_cms_page_edit>
步骤3:创建一个新的窗口小部件类来呈现元素:
在我的例子中,我把它放在了BLOCKS下的模块
基本上,这将获取widget xml定义的元素,并将其转换为textarea
元素,然后附加所需的javascript(jquery)来初始化所见即所得的编辑器。
您将看到传递给编辑器的选项,在$ options
中定义<?php
class ProxiBlue_Landingpage_Block_Widgets_Wysiwyg extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element
{
public function render(Varien_Data_Form_Element_Abstract $element)
{
$textarea = new Varien_Data_Form_Element_Textarea();
$textarea->setForm($element->getForm())
->setId($element->getHtmlId())
->setName($element->getName())
->setLabel($element->getLabel())
->setClass('widget-option input-area input-text');
if ($element->getRequired()) {
$textarea->addClass('required-entry');
}
if ($element->getValue()) {
$textarea->setValue($element->getValue());
}
$options = "btns: ['viewHTML', 'strong', 'em', 'del', 'undo', 'redo', 'formatting', 'superscript', 'subscript', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'unorderedList', 'orderedList', 'horizontalRule', 'fullscreen'],
semantic: true,
removeformatPasted: true,
autogrow: false";
$textarea->setData('after_element_html',
"<script>jQuery(document).ready(
function() {
jQuery(" . $element->getHtmlId() .").trumbowyg({ " . $options . " })
.on('tbwblur', function(){
var html = jQuery(this).trumbowyg('html');
html = html.replace(/\"/g, '"');
jQuery(this).trumbowyg('html', html);
});
});</script>");
$html = parent::render($textarea);
return $html;
}
}
在那里你可能还会注意到这个片段:
.on('tbwblur', function(){
var html = jQuery(this).trumbowyg('html');
html = html.replace(/\"/g, '"');
jQuery(this).trumbowyg('html', html);
});
这里的目的是将任何双引号(&#34;)更改为"
的正确html实体
这是为了防止在用双引号括起来的小部件参数中存储文本数据。
步骤4:定义小部件元素:
<text_blurb translate="label">
<sort_order>50</sort_order>
<label>Textual Content</label>
<visible>1</visible>
<required>1</required>
<type>landingpage/widgets_wysiwyg</type>
</text_blurb>
完成。
希望这对某人有用。