尝试将 Tinymce 插件与 webpack encore 一起使用时出错

Question

我正在尝试在 textarea 元素上使用 Tinymce 插件：

<textarea id="reportDescription" name="reportDescription" class="form-control" rows="4"></textarea>

我正在使用 Symfony 和 Webpack Encore。 所以我使用以下方法安装了软件包：

yarn add tinymce

在 webpack.config.js 我编码：

.copyFiles({
        from: 'node_modules/tinymce/skins',
        to: 'skins/[path]/[name].[ext]'
    })

在我试图初始化插件的 .js 中：

require('tinymce');

$(document).ready(function () {
   
    if($("#reportDescription").length > 0){
        tinymce.init({
            selector: "textarea#reportDescription"
            
        });
    }
});

当我在浏览器上加载页面时，出现以下错误：

tinymce.js:4680 
    GET http://url/build/models/dom/model.js net::ERR_ABORTED 404 (Not Found)
tinymce.js:18181 
    Failed to load model: dom from url models/dom/model.js
tinymce.js:4680 
    GET http://url/build/icons/default/icons.js net::ERR_ABORTED 404 (Not Found)
tinymce.js:18181 
    Failed to load icons: default from url http://url/build/icons/default/icons.js
tinymce.js:4680 
    GET http://url/build/themes/silver/theme.js net::ERR_ABORTED 404 (Not Found)
tinymce.js:18181 
    Failed to load theme: silver from url themes/silver/theme.js

我还不太了解如何在 webpack 上使用模块。 如何导入它们，何时使用 require 或 import 以及它们之间的区别。 所以也许我错过了一些重要的东西。

Answer 1

我的设置如下

1. 安装复制 webpack 插件 -- yarn add copy-webpack-plugin --dev

2. 在 webpack.config.js 中

   const CopyPlugin = require("copy-webpack-plugin"); // at the top // ... // ... other stuff Encore.addPlugin( new CopyPlugin({ patterns: [ { context: './node_modules/tinymce/', from: '**/*.(min.js|min.css|woff)', to: './tinymce/[path][name][ext]' } ] }) ); Encore // directory where compiled assets will be stored .setOutputPath('public/build/') // other code

3. 我使用stimulusjs，所以在刺激控制器（tiny_controller.js）中我有下面的代码，以便匹配所有带有tinymce类的textareas

    import { Controller } from "@hotwired/stimulus"; import tinymce from 'tinymce/tinymce'; // other code // other code initialize() { this.defaults = { base_url: '/build/tinymce', plugins: 'preview importcss', menubar: 'view insert format tools table', toolbar: 'undo redo | bold italic' toolbar_sticky: false, suffix: '.min' }; } connect() { this.initTinyMCE(); } initTinyMCE() { let config = Object.assign({ selector: 'textarea.tinymce', }, this.defaults); tinymce.init(config); } //other code //other code

最后在 HTML 表单中可能是这样的

<div data-controller="tiny">
    <textarea name="comment" class="tinymce">Enter text here..</textarea> 
</div>