Question

TinyMCE的NPM翻新有几个问题。我知道这一点。

我有一个使用简单的<script>标签的工作版本，但我很固执，并且决心将其NPM软件包投入使用。

设置

安装

纱线添加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

跳过此部分：不必为此类担心太多。唯一要注意的是，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 

我创建了一个简单的控制器，没有不必要的导入，只是为了尽快返回所请求的文件

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插件

1 个答案: