magento2.3自定义可视化编辑器(TinyMCE)
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
再刷新下页面，就好了。
参考
当然，如果你觉得tinymce编辑器不好用，你也可以自定义其他编辑器 比如ckeditor
具体方法可以参考
https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/wysiwyg/add-custom-editor/