Installer Tinymce avec NPM

Par lakamark, il y a 8 ans

Javascript NodeJS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je charge le script tinymce dans mon "backend"

import tinymce from 'tinymce/tinymce'; import 'tinymce/themes/modern/theme'; // plugins import 'tinymce/plugins/paste'; import 'tinymce/plugins/link'; let editor = document.querySelector('.js-editor'); if (document.body.contains(editor)) { tinymce.init({ selector: '.js-editor', plugins: ['paste', 'link'] }); }

Ce que je veux

le texteare sois transformer et que Tinymce sois bien chargé.

<textarea class="form-control js-editor" name="content" cols="50" rows="10" id="content"></textarea>

Ce que j'obtiens

Je ne vois plus le textearea par default. J'ai deux erreurs en console.
GET lakamark.dev/js/skins/lightgray/skin.min.css net::ERR_ABORTED
GET lakamark.dev/js/skins/lightgray/content.min.css net::ERR_ABORTED

Il ne réussit pas trouver les fichiers.

Dans mon projet jutilise Laravel pour le PHP et sons système interne des assets qui est "laravel-mix". Il fonctione avec Webpack.

J'ai regardé la doc :
https://www.tinymce.com/docs/advanced/usage-with-module-loaders/

J'utlise la derniere version de webpack et la doc n'est pas à jours.

J'ai adopté dans mon cas :

rules: [ { test: /\.tinymce$/, use: [ { loader: 'file-loader', options: { 'name': '[path][name].[ext]', 'context': 'node_modules/tinymce!tinymce/skins' } } ] } ],

Le teste échoue quand je recompile mes assets.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'rules'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { rules: ... } }) ]

Merci en avance.

10 réponses

jeanMat, il y a 8 ans

Peu être une piste : dans ta conf webpack, au niveau de ton test tu as :

test: /\.tinymce$/

Le $ à la fin indique que pour que le test match, il faut que le fichier à charger termine par ".tinymce", or dans tes imports concernant tintmce, tous ne finissent pas par ".tinymce".

Essaye donc ce pattern :

test: /tinymce/

Tout ce qui contient "tinymce"

lakamark, il y a 8 ans

Bonjour,
J'ai toujours la même erreur que le teste échoue. Est-ce qu'il y a une autre moyen ou je doit aller à la vielle version charger les source et les mettre directement dans mon dossier racine de mon projets qui est le répectoire "/public/"?

jeanMat, il y a 8 ans

Peux tu nous coller l'entiereté de ton webpack.config.js ?
Merci

lakamark, il y a 8 ans

Voici la configuration de mon fichier webpack.config. Elle un peut diférent d'une configuration par défaut de Webpack, car j'utilise le framework Laravel qui utilise webpack en arrière-plan pour construir les fichier js et css de mon application web :

const webpack = require('webpack'); const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/backend.js','public/js') .js('resources/assets/js/editor.js','public/js') .sass('resources/assets/sass/backend.scss', 'public/css') .sass('resources/assets/sass/app.scss', 'public/css'); mix.webpackConfig({ output: { publicPath: '/' }, rules: [ { test: '/tinymce/', use: [ { loader: 'file-loader', options: { 'name': '[path][name].[ext]', 'context': 'node_modules/tinymce!tinymce/skins' } } ] } ], plugins: [ new webpack.ProvidePlugin({ $: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", Modal: "exports-loader?Modal!bootstrap/js/dist/modal" }) ] });
jeanMat, il y a 8 ans

De ce que je comprend, WebPack teste les loaders dans l'ordre où ils ont été déclaré et dès qu'un test match, le loader est utilisé.

Je me demande si la conf faite via MIX ne rajoute pas des régles avant qui, du coups, sont prioritaire sur ta règle à toi.

As tu essayé de charger TinyMce sur un projet vierge, sans Laravel, pour tester ?

lakamark, il y a 8 ans

Non pas vraiment. Je vais essayer sur un projet vierge pour voir

lakamark, il y a 8 ans

J'ai essayer sur un projet vierge de laravel et j'ai toujours cette règle qui échoue toujours.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'rules'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { rules: ... } }) ]
betaWeb, il y a 8 ans

Salut,

Tu as jeté un oeil sur le repo github, dans les issues ? :)

Kenor, il y a 8 ans

L'erreur me parait explicite "that does not match the API schema."
En gros, la config que tu envois à Webpack n'est pas dans un format valide.

Ensuite il dit "configuration has an unknown property 'rules'"
En gros, "rules" ça ne lui dit rien.

Et en effet, "rules" doit être un enfant de "module"

{ output: { publicPath: '/' }, module : { rules: [ { test: '/tinymce/', use: [ { loader: 'file-loader', options: { 'name': '[path][name].[ext]', 'context': 'node_modules/tinymce!tinymce/skins' } } ] } ] }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", Modal: "exports-loader?Modal!bootstrap/js/dist/modal" }) ] }

Essai ça, et dis nous ce que ça donne cette fois ;)

lakamark, il y a 8 ans

J'ai enfin trouvé une solution après des heure à regarder les issus sur gituhub et sur les forum de stackoverflow.

https://stackoverflow.com/a/46343411

Merci de votre aide.