Используйте Tinymce5 с Symfony4 и Webpack (пустой редактор при загрузке страницы)
Я создаю веб-сайт с использованием Symfony 4, я использую Webpack Encore для управления активами js /scss. Теперь я хочу включить Tinymce5 на свой веб-сайт и загрузить его с помощью веб-пакета. На самом деле, когда я загружаю страницу, текстовые области заменяются пустым пространством
Я следовал официальному документу tinymce, чтобы включить его с помощью веб-пакета, но не сработал. Поэтому я попытался использовать CopyWebpackPlugin для автоматического копирования папки скина в папку сборки. Не сработало. Я попытался добавить опцию 'skin_url', чтобы указать расположение папки скина, но не получилось. Мое реальное решение было вручную импортировать в tinymce /skins / ui / oxid /skin.css моего app.js
webpack.config.js:
var Encore = require('@symfony/webpack-encore');
var CopyWebpackPlugin = require('copy-webpack-plugin');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addPlugin(new CopyWebpackPlugin([
{ from: 'node_modules/tinymce/skins', to: 'skins' }
]))
// other webpack options...
;
module.exports = Encore.getWebpackConfig();
app.js:
// ...
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/themes/mobile';
import 'tinymce/skins/ui/oxide/skin.css';
// ...
tinymce.init({
selector: '.tinymce-wrapping',
skin: false,
theme: 'silver',
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | fullscreen help',
mobile: {
theme: 'mobile',
skin: false,
plugins: [ 'lists', 'autolink' ]
}
});
// ...
При этом мой редактор работает на рабочем столе, но на мобильном устройстве нет панели инструментов, границ, только редактируемый текст (на самом деле забавный редактор), и кажется, что это решение - действительно хороший способ решить эту проблему.. ^^