Magento的 - 增加WYSIWYG编辑器自定义窗口小部件(Magento - add WYSI

2019-08-19 01:41发布

站内文章 / 前端开发
149 0 0

我创建了一个widget我的自定义模块内。 一切工作，小部件可以被嵌入到CMS的网页。 然而，代替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>

有没有人遇到过类似的问题吗？ ..或者没有人知道这到底是怎么实现？ 也许通过自定义渲染器，它调用所见即所得的编辑器，但如何..？

Thanx提前。

Answer 1:

我终于成功地做我自己。 对于所有那些谁有同样的问题，这是我做的：

在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和改写渲染（）函数： 

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的页面作为窗口小部件attribut - 这本身也是在双引号，小部件不能正确渲染。 为了解决这个问题，我扩展的类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的都逃不过自己的方式的字符串。 然而，以上描述的方法将作为我只用单引号被插入的插件和在CMS编辑器视图中打开窗口小部件时的Magento接通单引号为双引号当更换双引号。

希望这是对别人有用。



Answer 2:

我不认为这是与Magento的1.9兼容了。 我试过这种方法，节省了CMS块/页面，添加小部件时，我不断收到一个JavaScript错误

错误：错误在[未知物体] .fireEvent（）：事件名称：formSubmit错误消息：不能设置空的属性“值”



Answer 3:

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


Answer 4:

因此，已知的解决方案似乎不再对1.9+工作，所以我公司生产的一种替代，它增加了所见即所得，但使用的替代编辑器。

我用这个编辑器：

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：创建一个新的widget类来渲染元素：

在我的例子，我把这个块下一个模块

基本上，这需要定义的元素的插件XML，和调换它交给一个textarea元素，然后附着在所需的JavaScript（jquery的）来初始化WYSIWYG编辑器。

你会看到被传递到编辑器THW选项，在$选项中定义

<?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, '&quot;');
                        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, '&quot;');
   jQuery(this).trumbowyg('html', html);
});

这里的目的是为了改变任何双引号（“）来的适当的HTML实体&quot这是为了防止所述文本数据的存储，在微件参数，可以被包封用双引号。

步骤4：定义widget元素： 

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

完成。

希望这是使用的人的。



文章来源: Magento - add WYSIWYG editor to custom widget
标签： magento module widget customization wysiwyg
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~