Error trying to use Tinymce plugin with webpack encore

user_15369281 0
Viewed 310

I'm trying to use the Tinymce plugin on a textarea element:

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

Im working with Symfony and Webpack Encore. So I installed the package using:

yarn add tinymce

In webpack.config.js I coded:

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

And in the .js where I'm trying to initialize the plugin:

require('tinymce');

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

When I load my page on my browser, I get this error:

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

I don't understand very well yet how to work with modules on webpack. How to import them, when to use require or import and the difference between them. So maybe I'm missing something important.

webpack-encore symfony tinymce module javascript
1 Answers

the set up I have is as follows

  1. install copy webpack plugin -- yarn add copy-webpack-plugin --dev

  2. In 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. I use stimulusjs so in the stimulus controller (tiny_controller.js) I have the code below so that all textareas with tinymce class will be matched

     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

Finally in the HTML Form it could be something like this

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