所以,已知的解决方案在1.9+上似乎不再起作用,因此我提供了一种替代方案,它添加了所见即所得编辑器,但使用了另一种编辑器。
我使用了这个编辑器:
https://alex-d.github.io/Trumbowyg/
最终结果如下:
![enter image description here](https://istack.dev59.com/fPUYL.webp)
步骤1:下载编辑器文件并放置在adminhtml皮肤区域:
例如,我将它们放置在skin/adminhtml/default/js/wysiwyg
中。
![enter image description here](https://istack.dev59.com/9xgOH.webp)
步骤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 模块下。
基本上,这将取出小部件 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);
});
这里的目的是将任何双引号(")更改为正确的HTML实体"
,以防止在小部件参数中存储被双引号包围的文本数据。
第四步:定义小部件元素:
<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>
完成。
希望这对某人有用。
MyCompany_MyModule_Block_Widget_Wysiwyg
中添加$editor->getConfig()->setPlugins(array());
,否则你会收到一个警告:/path/to/root/lib/Varien/Data/Form/Element/Editor.php
中的Invalid argument supplied for foreach()
。 - Phil Birnie