README

本插件为Contao CMS前端提供了对JavaScript库tinyMCE的支持。

功能

• 在页面级别激活tinymce支持（带有继承和覆盖选项）
• 从dca动态自定义选项或从事件中动态自定义
• heimrichhannot/contao-encore-bundle支持
• 为tinymce编辑器定义最大输入字符数

安装

通过composer安装： composer require heimrichhannot/contao-tinymce-bundle。

如果您不使用heimrichhannot/contao-encore-bundle，您可以进入配置章节。

使用heimrichhannot/contao-encore-bundle

将以下javascript添加到您的项目的webpack.config.js中（这是为了在您的web/build文件夹中有皮肤和语言）（需要此步骤以便在web/build文件夹中有皮肤和语言）

let CopyWebpackPlugin = require('copy-webpack-plugin'),
    path = require('path');

Encore.addPlugin(new CopyWebpackPlugin({
    patterns: [
        {
            from: path.join(__dirname, '/node_modules/tinymce/skins'),
            to: 'skins' // can't be in a tinymce sub folder because of the library not supporting it :-(
        },
        {
            from: path.join(__dirname, '/node_modules/tinymce-i18n/langs5'),
            to: 'tinymce/languages'
        }
    ]
}));

使用方法

在页面配置中允许TinyMce，并在dca字段中启用它。

class CustomDataContainer 
{
    private RequestStack $requestStack;
    private ScopeMatcher $scopeMatcher;

    public function onLoadCallback(DataContainer $dc = null): void
    {
        if ($this->requestStack->getCurrentRequest() && $this->scopeMatcher->isFrontendRequest($this->requestStack->getCurrentRequest())) {
            $GLOBALS['TL_DCA']['tl_custom']['fields']['text']['eval']['rte'] = 'tinyMCE';
        }
    }
}

默认情况下，只有一个预设可用： limited。您可以通过AddOptionPresetEvent添加更多预设，或者在dca中自行自定义配置。请参阅配置章节。

配置

使用DCA

您可以在dca中设置自定义选项或使用预设

use Contao\CoreBundle\Routing\ScopeMatcher;
use Contao\CoreBundle\ServiceAnnotation\Callback;
use HeimrichHannot\TinyMceBundle\Manager\TinyMceManager;
use Symfony\Component\HttpFoundation\RequestStack;

class CustomDataContainer 
{
    private RequestStack $requestStack;
    private ScopeMatcher $scopeMatcher;
    private TinyMceManager $tinyMceManager;

    /**
     * @Callback(table="tl_jobmarket_job", target="config.onload")
     */
    public function onLoadCallback(DataContainer $dc = null): void
    {
        if ($this->requestStack->getCurrentRequest() && $this->scopeMatcher->isFrontendRequest($this->requestStack->getCurrentRequest())) {
            $GLOBALS['TL_DCA']['tl_custom']['fields']['text']['eval']['rte'] = 'tinyMCE';
            $GLOBALS['TL_DCA']['tl_custom']['fields']['text']['eval']['tinyMceOptions'] = [
                'menubar' => 'edit format',
                'toolbar' => 'link unlink | bold italic | bullist numlist | undo redo | code',
                'plugins' => ['paste', 'link', 'lists'],
                'paste_as_text' => true
            ];
            
            $GLOBALS['TL_DCA']['tl_custom']['fields']['littleText']['eval']['rte'] = 'tinyMCE';
            $GLOBALS['TL_DCA']['tl_custom']['fields']['littleText']['eval']['tinyMceOptions'] = $this->tinyMceManager->->getOptionPreset('limited');
        }
    }
}

另外，您可以设置字符限制

$GLOBALS['TL_DCA']['tl_custom']['fields']['text']['eval']['tinyMceOptions'] = ['maxChars' => 200];

字符限制将在每次在配置的tinymce编辑器中键入时触发keyup事件时进行检查。如果超过最大字符数，将在相应字段上方显示错误消息。只要最大字符数被违反，表单就不会提交。如果用户尝试提交表单，错误消息将滚动到视图中。

添加自定义预设

为了重用您的tinyMce配置，您可以添加自定义预设

use HeimrichHannot\TinyMceBundle\Event\AddOptionPresetEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class TinyMceSubscriber implements EventSubscriberInterface
{
    public function onAddOptionPresetEvent(AddOptionPresetEvent $event): void
    {
        $event->addPreset('custom', [
            'menubar' => false,
            'toolbar' => 'undo redo | bold | bullist numlist indent outdent | link unlink',
            'plugins' => ['link', 'lists'],
            'statusbar' => false,
        ]);
    }

    public static function getSubscribedEvents()
    {
        return [
            AddOptionPresetEvent::NAME => 'onAddOptionPresetEvent',
        ];
    }
}

事件