使用 Symfony、Webpack 和 Encore 加载 TinyMCE 插件

Question

TinyMCE 的 NPM 翻新有几个问题。我知道了。

我有一个使用简单 <script> 标签的工作版本，但我很固执，我下定决心要让他们的 NPM 包工作。

设置

安装

yarn add tinymce

└─ tinymce@4.8.4

webpack.config.js

var Encore = require('@symfony/webpack-encore');
var CopyWebpackPlugin = require('copy-webpack-plugin');
//...

Encore
    .setOutputPath(folder+'/public/build/')
    .setPublicPath('/build')
    // the usual stuff...
    // This is where tinymce lives in my code
    .addEntry('inputManager', './assets/js/inputManager.js')
    // This plugin copies all tinymce assets to the build folder
    .addPlugin(new CopyWebpackPlugin([
        {
            from:'assets/js/tinymce/themes/',
            to: 'tinymce/themes/'
        },
        {
            from: 'assets/js/tinymce/plugins/',
            to: 'tinymce/plugins/'
        },
        {
            from:'assets/js/tinymce/langs/',
            to: 'tinymce/langs/'
        }
    ]))

inputManager.js

跳过这个：不要太担心这个 class。唯一需要注意的重要事情是 tinymce 是在第 1 行导入的。它有效:)

import './tinymce/tinymce.min'

let fullTinyMCEInit = null;

class AppControls {
    constructor() {
        $(document).ready(function() {
            appControls.initTinyMCE(); // Initialize all tinymce elements
        });

        // I'll be the judge of where you should look!
        tinymce.baseURL = location.origin + '/build/tinymce';
        // The jquery plugin doesn't work. this does.
        $.fn.tinymce = function() {
            appControls.initTinyMCE($(this));
        }
    }

    /**
     * Get the tinymce configuration in a Singleton fashion
     */
    get tinyMCEConfig() {
        if (!fullTinyMCEInit) {
            fullTinyMCEInit = {
                theme_url: '/build/tinymce/themes/modern/theme.min.js',
                language: _locale,
                plugins: [
                    "autoresize",
                    "advlist autolink lists link image charmap print preview anchor textcolor",
                    "searchreplace visualblocks code fullscreen",
                    "insertdatetime media table contextmenu paste code help"
                ],
                // Other config parameters (irrelevant)
            }
        }
        return fullTinyMCEInit;
    }

    /**
     * Initialize tinymce for each textarea with a class ".tinymce"
     * @param targetContainer containing elements (or itself) to initialise
     */    
    initTinyMCE(targetContainer = null) {
        const config = appControls.tinyMCEConfig;
        let targets = [];

        // reset target and selector
        config.target = null;
        config.selector = null;

        if (targetContainer) { // Container is optional
            targetContainer = $(targetContainer);
            targets = targetContainer.hasClass('tinymce') ? targetContainer : targetContainer.find('textarea.tinymce');
        } else { // No container, look in the content-wrapper
            targets = $('#content-wrapper').find('textarea.tinymce');
        }

        // Iterate targets and initialise tinymce
        $.each(targets, function(index, target) {
            config.target = target;
            tinymce.init(config);
        });
    }
}

问题 1

Tinymce 加载，但对于它需要的每个插件、主题和语言文件抛出 404 错误。

解决方案 1

我创建了一个简单的控制器，没有不必要的导入，只是尽可能快地请求 return 个文件

class AssetsController extends Controller
{
    /**
     * Main page for the admin portal
     * Matches /build/tinymce
     * @Route(
     *     "/build/tinymce/{_type}/{_name}/{_file}",
     *     name="get_tinymce_assets",
     *     requirements={
     *         "_type": "plugins|langs|skins",
     *         "_name": "\w+",
     *         "_file": ".+"
     *     }
     * )
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function getTinyMCEAssets(
        $_type,
        $_name,
        $_file
    ) {
        // NPM package contains minified js files, but still looks for unminified versions
        $minifiedFile =
            strpos($_file, '.min.') === false
                ? str_replace('.css', '.min.css', str_replace('.js', '.min.js', $_file))
                : $_file;

        return $this->file(
            'build/tinymce/'.
            $_type.'/'.
            $_name.'/'.
            $minifiedFile);
    }
}

这有效，tinymce 编辑器加载！

问题 2

需要 8 秒！！！对于要检索的每个文件！您可以理解为什么这是不可接受的，尤其是因为加载不是异步发生的。

如果您有任何见解，我们将不胜感激。当然，如果你还在读这篇文章 :D

Answer 1

您需要通过模块加载过程导入您想要加载的每个插件。我们在这里有关于此的文档：

https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/

使用 Symfony、Webpack 和 Encore 加载 TinyMCE 插件

Loading TinyMCE plugins with Symfony, Webpack and Encore

tinymce

symfony

webpack

webpack-encore