错误尝试使用WebPack Encore使用Tinymce插件

Question

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

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

IM与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上使用模块。如何导入它们，何时使用或导入以及它们之间的差异。所以也许我错过了一些重要的东西。

Answer 1

我拥有的设置如下

1. 安装复制WebPack插件 - YARN添加copy-webpack-plugin -dev

2. in webpack.config.js

     const copyplugin = require（“ copy-webpack-plugin”）; //顶部
   // ...
   // ...其他东西
   
   encore.addplugin（
    新的copyplugin（{
        模式：[[
          {
            上下文：'./node_modules/tinymce/'，
            来自：'**/*。（min.js | min.css | woff）'，
            至：'./ tinymce/ [path] [name] [ext]'
          }
        这是给出的
      }））
    ）；
   
   encore
      //将存储资产的目录
      .setOutputPath（'public/build/'）
      //其他代码
    

3. i中使用刺激器，因此在刺激控制器（tiny_controller.js）中，我有下面的代码，以便所有带有Tinymce类的Textareas都将匹配

    来自“@hotwired/stimulus”的导入{Controller};
    从“ Tinymce/tinymce”中导入Tinymce；
    //其他代码
    //其他代码
    初始化（）{
        this.defaults = {
            base_url：'/build/tinymce'，
            插件：“预览Importcss”，
            Menubar：“查看插入格式工具表”，
            工具栏：'撤消重做|大胆的斜体'
            Toolbar_sticky：false，
            后缀：'.min'
        };
    }   
   
    连接（） {
        this.inittinymce（）;
    }
   
    Inittinymce（）{
        令config = object.sign（{{
            选择器：“ textarea.tinymce”，
        }，this.defaults）;
        tinymce.init（config）;
    }
    //其他代码
    //其他代码
    

这可能是这样的。

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

Answer 2

尽管@patrick kenekayoro发布了一个非常不错的答案，但在您的情况下，问题是路径。您可以注意到，它在寻找/build/models /...，因此要解决此此简单/粘贴以下代码到您的WebPack配置：

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

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

.copyFiles({
    from: 'node_modules/tinymce/plugins',
    to: 'plugins/[path][name].[ext]',
    includeSubdirectories: true,
    pattern: /.*/
})

.copyFiles({
    from: 'node_modules/tinymce/icons',
    to: 'icons/[path][name].[ext]',
    includeSubdirectories: true,
    pattern: /.*/
})

即使在最新的中，这对我也很好符号项目。