Используйте 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' ]
        }
    });
// ...

При этом мой редактор работает на рабочем столе, но на мобильном устройстве нет панели инструментов, границ, только редактируемый текст (на самом деле забавный редактор), и кажется, что это решение - действительно хороший способ решить эту проблему.. ^^

0 ответов

Другие вопросы по тегам