magento2.3自定义可视化编辑器(TinyMCE)

2.67K 浏览开发笔记

magento2.3自定义可视化编辑器(TinyMCE)

magento2.3默认用的是TinyMCE编辑器,并且对这个编辑器进行了一些扩展和限制,导致很多tinymce本身的功能被限制,导致没有显示出来,比如目前无法设置字体。

那我们现在就让字体出来。

1, 首先你必须有个插件

比如我的是Zou_Base (app/code/Zou/Base).

2, 创建etc/di.xml

对tinymce配置文件(MagentoCmsModelWysiwygDefaultConfigProvider)进行重写

app/code/Zou/Base/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"
    <type name="MagentoCmsModelWysiwygDefaultConfigProvider">
    	<plugin name="zou_custom_wysiwyg_config" type="ZouBasePluginCmsModelWysiwygDefaultConfigProvider" sortOrder="10"/>
    </type>
</config>

3,重写MagentoCmsModelWysiwygDefaultConfigProvider文件,进行扩展,把字体(fontselect)功能加进去。

app/code/Zou/Base/Plugin/Cms/Model/Wysiwyg/DefaultConfigProvider

<?php
namespace ZouBasePluginCmsModelWysiwyg;
class DefaultConfigProvider
{
    /**
     * @var MagentoFrameworkViewAssetRepository
     */
    private $assetRepo;
    /**
     * @param MagentoFrameworkViewAssetRepository $assetRepo
     */
    public function __construct(MagentoFrameworkViewAssetRepository $assetRepo)
    {
        $this->assetRepo = $assetRepo;
    }
    public function afterGetConfig(
        MagentoCmsModelWysiwygDefaultConfigProvider $configInterface,
        MagentoFrameworkDataObject $result
    ) {
        //https://www.tiny.cloud/docs-4x/advanced/editor-control-identifiers/
        $result->addData([
                'tinymce4' => [
                    'toolbar' => 'undo redo | styleselect | fontsizeselect fontselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link table charmap | image | code | magentowidget | magentovariable',
                    'plugins' => implode(
                        ' ',
                        [
                            'advlist',
                            'autolink',
                            'lists',
                            'link',
                            'charmap',
                            'media',
                            'noneditable',
                            'table',
                            'contextmenu',
                            'paste',
                            'code',
                            'help',
                            'table'
                        ]
                    ),
                    'content_css' => $this->assetRepo->getUrl('mage/adminhtml/wysiwyg/tiny_mce/themes/ui.css')
                ]
            ]);
        return $result;
    }
}

4,  清缓存,测试

rm generated/* var/di/* -rf
php bin/magento cache:clean && php bin/magento cache:flush

再刷新下页面,就好了。

参考

https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/wysiwyg/configure-tinymce-editor.html

当然,如果你觉得tinymce编辑器不好用,你也可以自定义其他编辑器 比如ckeditor

具体方法可以参考

https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/wysiwyg/add-custom-editor/

0