Существует несколько проблем с реконструкцией NPM TinyMCE. Я знаю об этом.
У меня была рабочая версия, в которой использовались простые теги <script>, но я упрям, и я решил, что их пакет NPM заработает.
SETUP
Установка
пряжа с добавлением крошки
tin─ 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. Это работает :) 1029
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