前端 PHTML 文件示例中的 Magento 2 TinyMce 编辑器答案

【问题标题】：Magento 2 TinyMce Editor in fronend PHTML file example前端 PHTML 文件示例中的 Magento 2 TinyMce 编辑器
【发布时间】：2017-05-26 10:06:51
【问题描述】：

TinyMCE 在 magento 2 FrontEnd [PHTML] 文件中不起作用

我试过这段代码

 require(["jquery", 'Magento_Theme/js/creamondoModal', "mage/adminhtml/wysiwyg/tiny_mce/setup"], function (jQuery, creamondoModal) {
    var config, editor;
    config = {
        settings: {
            mode: 'textarea',
            theme_advanced_buttons1: "bold,italic,justifyleft,justifycenter,justifyright,|," +
                    "fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code",
            theme_advanced_buttons2: null,
            theme_advanced_buttons3: null,
            theme_advanced_buttons4: null,
            theme_advanced_statusbar_location: null
        }
    };
    editor = new tinyMceWysiwygSetup('about_course_provider', config);
    editor.turnOn();
    editor = new tinyMceWysiwygSetup('about_vendor', config);
    editor.turnOn();
    editor = new tinyMceWysiwygSetup('vendor_strength', config);
    editor.turnOn();
});

此代码适用于 Chrome，但不适用于 Firefox 和 IE-11、Edge。

请建议提前谢谢.... :)

【问题讨论】：

标签： javascript jquery tinymce frontend magento2

【解决方案1】：

您应该从 magento 获取配置并重新设置它们

protected $wysiwyg;
public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Cms\Model\Wysiwyg\Config $wysiwyg
    ){
    $this->wysiwyg = $wysiwyg;
    parent::__construct($context);
}

...

public function getWysiwygConfig(){
    $config = $this->wysiwyg->getConfig();
    $config->setData('add_variables', false);
    $config->setData('add_widgets', false);
    $config->addData([
        'settings' => [
            'mode' => 'textarea',
            'theme_advanced_buttons1' => "bold,italic,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,|,bullist,numlist,|,code",
            'theme_advanced_buttons2' => NULL,
            'theme_advanced_buttons3' => NULL,
            'theme_advanced_buttons4' => NULL,
            'theme_advanced_statusbar_location' => NULL
        ]
    ]);
    return $config;
}

...

require(["jquery", "mage/adminhtml/wysiwyg/tiny_mce/setup"], function (jQuery) {
    var editor;
    editor = new tinyMceWysiwygSetup('text', <?php echo \Zend_Json::encode($this->getWysiwygConfig()); ?>);
    editor.turnOn();
});

【讨论】：