Magento - 将所见即所得编辑器添加到自定义小部件 [英] Magento - add WYSIWYG editor to custom widget

问题描述

我在自定义模块中创建了一个小部件.一切正常，小部件可以嵌入到 CMS 页面中.但是，我想添加一个所见即所得的编辑器，而不是 textarea 参数类型.

I created a widget inside my custom module. Everything is working and the widget can be embedded onto CMS pages. However, instead of a textarea parameter type I want to add a WYSIWYG editor.

这是我的 widget.xml 中的重要部分:

This is the significant part in my widget.xml:

<parameters>            
    <description translate="label">
        <required>0</required>
        <visible>1</visible>
        <label>Description</label>
        <type>textarea</type>
    </description>
</parameters>

我想知道是否有一种方法可以扩展 Magento 的功能，以允许类似于这样的 WYSIWYG 编辑器:

I wonder if there's a way to extend Magento's functionality to allow a WYSIWYG editor similar to this:

<parameters>            
    <description translate="label">
        <required>0</required>
        <visible>1</visible>
        <label>Description</label>
        <type>WYSIWYG</type>
    </description>
</parameters>

有人遇到过类似的问题吗?.. 或者有谁知道如何做到这一点?也许通过调用 WYSIWYG 编辑器的自定义渲染器，但是如何..?

Has anybody encountered a similar problem? .. or does anyone know how this could be achieved? Maybe through a custom renderer, which calls the WYSIWYG editor, but how..?

提前感谢.

推荐答案

我终于自己做到了.对于所有有同样问题的人，我就是这样做的:

I finally managed to do it myself. For all those who have the same problem, this is how I did it:

在widget.xml我有如下参数设置:

In the widget.xml I have the parameter set as follows:

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

为了在小部件的文本区域上启用 WYSIWYG 编辑器，我在自定义模块中创建了一个新的块类，扩展了 Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element 类并覆盖了 render() 函数:

To enable the WYSIWYG editor on the widget's textarea, I created a new block class in my custom module, extended the class Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element and overwrote the render() function:

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);
    }
}

现在，我很高兴看到小部件中的编辑器.不幸的是，仍然存在问题.由于编辑器使用双引号创建内联样式和属性并将其作为小部件属性放置到 CMS 页面 - 它本身也是双引号，因此无法正确呈现小部件.为了解决这个问题，我扩展了 Mage_Widget_Model_Widget 类并将编辑器双引号替换为单引号，如下所示:

Now, I was happy to see the editor inside the widget. Unfortunately there was still a problem. Since the editor creates inline styles and attributes with double quotes and places it to the CMS page as an widget attribut - which itself is also in double quotes, the widget cannot be rendered correctly. To solve this issue I extended the class Mage_Widget_Model_Widget and replaced the editors double quotes with single quotes as follows:

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 中为每个小部件指定，如下所示:

Inside getWidgetDeclaration() function I check if the widget type is the one I want to handle. The widget type is specified in the widget.xml for each widget like here:

<MyCompany_MyModule_MyWidgetName type="mymodule/myblockclass" translate="name description" module="mymodule">
<!-- ... -->
</MyCompany_MyModule_MyWidgetName>

现在我的一切都按照我想要的方式运行了.编辑器生成的 HTML 将其双引号替换为单引号，并且输出将完美运行.在我像这样转义双引号之前 - "some text ".起初这似乎可行，但是当通过单击图标(编辑器视图)编辑小部件时，html 被切断了.Magento 的 javascript 似乎以自己的方式转义了字符串.但是，上述方法将起作用，因为我只是在插入小部件时将双引号替换为单引号，而 Magento 在 CMS 编辑器视图中打开小部件时会将单引号转换为双引号.

And now I got everything working like I wanted it to be. The editor's generated HTML will have its double quotes replaced by single quotes and the output will work perfectly. Before I escaped the double quotes like this - "some text ". That seemed to work at first, but when editing the widget by clicking on the icon (Editor view) the html was cut off. Magento's javascript seemed to escape the strings in its own way. However, the method described above will work as I just replace double quotes by single quotes when the widget is being inserted and Magento turns the single quotes into double quotes when opening the widget in CMS Editor view.

希望这对某人有用.

这篇关于Magento - 将所见即所得编辑器添加到自定义小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！