symfony 尝试将Tinymce插件与Webpack Encore一起使用时出错

368yc8dk 于 2023-06-30 发布在 Webpack

关注(0)|答案(2)|浏览(147)

我尝试在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以及它们之间的区别。也许我错过了一些重要的东西。

symfony

来源：https://stackoverflow.com/questions/72746511/error-trying-to-use-tinymce-plugin-with-webpack-encore

2条答案

按热度按时间

rta7y2nd1#

我设置如下

install copy webpack plugin -- yarn add copy-webpack-plugin --dev
1.在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

1.我使用stimulusjs，所以在刺激控制器（tiny_controller.js）中，我有下面的代码，以便所有tinymce类的文本区域都将匹配

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>

赞(0）回复(0）举报 2023-06-30

55ooxyrt2#

虽然@帕特里克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: /.*/
})

这对我来说真的很好，即使在最新的Symfony项目。

赞(0）回复(0）举报 2023-06-30

我来回答

symfony 尝试将Tinymce插件与Webpack Encore一起使用时出错

2条答案

相关问题

热门标签

最新问答