Discussion :

[moimp]

Bonjour,

Je suis surpris par la complexité d'installation d'un plugin CKEditor.
J'ai installé nodeJS, ce qui a pris un temps fou et paraît extrêmement lourd.
Maintenant, j'essaie d'installer npm et cela tient de gageure. J'aimerais avoir une démarche claire et pas à pas, c'est à dire pas du tout comme dans la documentation de CKEditor ou de npm.

[SpaceFrog]

On n'en est tous là ...
Sous prétexte de permettre à tout le monde de se prendre pour un développeur web on se retrouve face a un empilement d'une multitude de couches technologiques qui ne font que complexifier (amha) la moindre installation

[moimp]

C'est pour cette raison que je préfère coder dans le dur plutôt que de recourir à des outils, sauf ceux que je me crée et que je maîtrise.

Ceci dit, mon problème n'est toujours pas réglé et je ne m'en sors pas avec npm.

EDIT (jusqu'à la fin): Ah, je viens de comprendre que npm était installé en même temps que node.js !!!! Où est-ce indiqué ????
J'ai essayé d'installer mon plugin comme ceci: npm install --save @ckeditor/ckeditor5-upload et j'ai le message suivant:

npm install --save @ckeditor/ckeditor5-upload
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 6 packages, and audited 7 packages in 4s

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.11.0 -> 8.12.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.12.1
npm notice Run npm install -g npm@8.12.1 to update!
npm notice

J'ai installé la version 8.12.1 comme indiqué.
J'ai testé mon code et j'ai toujours le message

filerepository-no-upload-adapter

Voici ma config:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	import simpleUpload from '@ckeditor/ckeditor5-simpleUpload/src/simpleUpload';
	const config = {
		extraPlugins: [ 'SimpleUploadAdapter', 'image' ]
	};
	DecoupledEditor
		.create( document.querySelector( '#editor' ), {
			language: 'fr',
			placeholder: "Entrez votre texte ici.",
			toolbar: {
				removeItems: ['insertTable', 'mediaEmbed']
			},
			simpleUpload: {
				// The URL that the images are uploaded to.
				uploadUrl: 'http:sirep.proginet.local/customers', // path where the image will be uploaded // to be updated
				// Enable the XMLHttpRequest.withCredentials property.
				withCredentials: true,
			},
			// Headers sent along with the XMLHttpRequest to the upload server.
			headers: {
				'X-CSRF-TOKEN': 'CSRF-Token',
				Authorization: 'Bearer <JSON Web Token>'
			}
 
 
 
		} )
		.then( editor => {
			const toolbarContainer = document.querySelector( '#toolbar-container' );
			ckEditor = editor;
			toolbarContainer.appendChild( editor.ui.view.toolbar.element );
		} )
		.catch( error => {
			console.error( error );
	    } );

La première ligne de ce code provoque une erreur:

Uncaught SyntaxError: Cannot use import statement outside a module

Si j'enlève cette première ligne, j'ai une autre erreur:

filerepository-no-upload-adapter

Aider moi svp, je n'en peux plus !!!!!!!

[lamap]

Bonjour, tu as ta réponse ici : https://stackoverflow.com/questions/...e-location-glo

Il faut que tu modifies ton fichier npm.cmd dans le répertoire C:\Program Files\nodejs
Attention d’exécuter notepad en mode administrateur.

Tu dois modifier cette ligne :

FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" prefix -g') DO (.
par :
FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" prefix --location=global') DO (

[moimp]

J'ai lu la page indiquée, j'ai fait la modification du fichier et le problème persiste.

Dans mon fichier de configuration, avec la ligne import simpleUpload from '@ckeditor/ckeditor5-simpleUpload/src/simpleUpload'; J'ai le message d'erreur que je ne comprends pas:

Uncaught SyntaxError: Cannot use import statement outside a module

Sans cette ligne, j'ai le message d'erreur:

filerepository-no-upload-adapter

[Beginner.]

On n'en est tous là ...
Sous prétexte de permettre à tout le monde de se prendre pour un développeur web on se retrouve face a un empilement d'une multitude de couches technologiques qui ne font que complexifier (amha) la moindre installation

Ah ça me rassure car moi aussi je trouve que les choses sont devenues tellement compliquées... Il est loin le temps où on ajoutait une simple balise script...

C'est incroyable qu'il faille être un pro juste pour utiliser une librairie...

EDIT (jusqu'à la fin): Ah, je viens de comprendre que npm était installé en même temps que node.js !!!! Où est-ce indiqué ????

C'est indiqué au debut de l'installation : normalement on doit cocher une case pour installer npm...

J'ai lu la page indiquée, j'ai fait la modification du fichier et le problème persiste.

Dans mon fichier de configuration, avec la ligne import simpleUpload from '@ckeditor/ckeditor5-simpleUpload/src/simpleUpload'; J'ai le message d'erreur que je ne comprends pas:

Uncaught SyntaxError: Cannot use import statement outside a module

Sans cette ligne, j'ai le message d'erreur:

C'est parce que tu utilises les modules natifs (import)...
Et donc tu dois ajouter le type module dans la balise : <script type="module" src=...>...

PS : c'est étrange, si tu utilises les modules natifs cela devrait marcher aujourd'hui mais cela peut signifier que tu utilises les fichiers modules sources et il peut y en avoir beaucoup.... En général on fait un bundle (tous les modules dans un seul fichier) qui est utilisable directement dans le navigateur sans le type module....

[moimp]

Je n'aime pas du tout lorsque je ne comprends pas ce que je fais et là c'est le cas.
Il me reste une erreur à la ligne 5:

Uncaught TypeError: Failed to resolve module specifier "@ckeditor/ckeditor5-simpleUpload/src/simpleUpload". Relative references must start with either "/", "./", or "../"

et là je ne sais absolument pas où le trouver car au moment du chargement aucun chemin ne m'a été demandé.

Je me demande si je ne devrais pas tout recommencer mais j'ai peur que ce soit encore pire.

Voici mon script:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- for the following scripts see https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#creating-custom-builds-with-online-builder -->
<script src="../ckeditor5-build-decoupled-document/ckeditor.js"></script>		<!-- Call to CKEditor -->
<script src="../ckeditor5-build-decoupled-document/translations/fr.js"></script>	<!-- Choosing language fr -->
<script type="module">
	import simpleUpload from '@ckeditor/ckeditor5-simpleUpload/src/simpleUpload';
	const config = {
		extraPlugins: [ 'SimpleUploadAdapter', 'image' ]
	};
	DecoupledEditor
		.create( document.querySelector( '#editor' ), {
			language: 'fr',
			placeholder: "Entrez votre texte ici.",
			toolbar: {
				removeItems: ['insertTable', 'mediaEmbed']
			},
			simpleUpload: {
				// The URL that the images are uploaded to.
				uploadUrl: 'http:sirep.proginet.local/customers', // path where the image will be uploaded // to be updated
				// Enable the XMLHttpRequest.withCredentials property.
				withCredentials: true,
			},
			// Headers sent along with the XMLHttpRequest to the upload server.
			headers: {
				'X-CSRF-TOKEN': 'CSRF-Token',
				Authorization: 'Bearer <JSON Web Token>'
			}
 
 
 
		} )
		.then( editor => {
			const toolbarContainer = document.querySelector( '#toolbar-container' );
			const ckEditor = editor;
			toolbarContainer.appendChild( editor.ui.view.toolbar.element );
		} )
		.catch( error => {
			console.error( error );
	    } );
	//let a=	DecoupledEditor.builtinPlugins.map( plugin => plugin.pluginName );
	//console.table(a);
 
</script>

Peut-on m'aider? Je ne m'en sors pas car je ne comprends pas ce que je fais, principalement avec Node.js. Je n'arrive pas à savoir ce que j'ai fait et je ne comprends vraiment pas le fonctionnement de cet outil ni ne trouve aucune aide. Je tourne en rond. Merci de me dire s'il manque une information pour qu'on puisse me répondre.

EDIT: lignes inutiles supprimées suite à la résolution d'une des erreurs.

[Beginner.]

Salut,
Alors où en es-tu ? Tu t'en sorts ou pas ?

Je n'aime pas du tout lorsque je ne comprends pas ce que je fais et là c'est le cas.
Il me reste une erreur à la ligne 5: Uncaught TypeError: Failed to resolve module specifier "@ckeditor/ckeditor5-simpleUpload/src/simpleUpload". Relative references must start with either "/", "./", or "../" et là je ne sais absolument pas où le trouver car au moment du chargement aucun chemin ne m'a été demandé.

Il ne trouve pas le fichier apparemment...

As-tu vérifier que le fichier simpleUpload est bien là ?

Est-ce que tu as bien un dossier @ckeditor/ckeditor5-simpleUpload/src ?

- Ajoutes l'extension .js : simpleUpload.js


PS: Il faudrait qu'on puisse reproduire ce que tu as fait : Dis-nous ce que tu as fait ; qu'est-ce que tu as installé avec npm exactement ?

[moimp]

J'avance un peu, je ne dois pas être loin du but. J'ai fait une recherche sur mon disque et le plugin ne s'est visiblement pas installé. Je recommence.
A partir de la page, je ne trouve pas le nom exact du plugin à chercher dans npm.
npm propose plusieurs documents sur cette page. Je ne sais pas lequel choisir sachant que j'utilise "DecoupledEditor" et est-ce que le type d'éditeur joue un rôle dans le choix du plugin ou, autrement dit, est-ce que le plugin est utilisable avec tous les éditeurs.
Mon objectif est d'insérer une image en WYSIWYG. Le redimensionnement est un plus mais reste facultatif.

[NoSmoking]

Bonjour,

Je suis surpris par la complexité d'installation d'un plugin CKEditor.

tu peux également utiliser le builder en ligne de CKEditor, c'est pas forcément intuitif mais ...

Mon objectif est d'insérer une image en WYSIWYG. Le redimensionnement est un plus mais reste facultatif.

si tu utilises le upload il te faut du code côté serveur qui fasse le tampon et qui doit te renvoyer l'url de chargement de l'image.

↪ Simple upload adapter

Tu peux également te passer de tout cela et utiliser le plugin base64uploadadapter.

↪ Base64 image upload adapter

Avec le plugin base64uploadadapter, tu n'as besoin de rien si ce n'est du code du plugin, c'est la moindre des choses , soit quelque chose d'aussi simple que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Adapter {
  constructor(loader) {
    this.loader = loader;
  }
 
  upload() {
    return new Promise((resolve, reject) => {
      const reader = this.reader = new window.FileReader();
 
      reader.addEventListener('load', () => {
        resolve({
          default: reader.result
        });
      });
 
      reader.addEventListener('error', err => {
        reject(err);
      });
 
      reader.addEventListener('abort', () => {
        reject();
      });
 
      this.loader.file.then(file => {
        reader.readAsDataURL(file);
      });
    });
  }

↪ le plugin sur github

et pour l'initialisation, mettre dans le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function CustomUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository')
    .createUploadAdapter = (loader) => {
      return new Adapter(loader);
    };
}
/**
 */
DecoupledEditor
  .create(document.querySelector('#editor'), {
    extraPlugins: [CustomUploadAdapterPlugin],
    language: "fr",
 
  })
  // ... la suite

Fichier complet pour test :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CKEditor 5 – DecoupledEditor</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="dxxxxxxx">
<meta name="description" content="CKEditor v5 : chargement d'image dans l'éditeur.">
<script src="https://cdn.ckeditor.com/ckeditor5/34.1.0/decoupled-document/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/34.1.0/decoupled-document/translations/fr.js"></script>
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
header h1 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #888;}
main {display: block;margin: auto;max-width: 60em;}
</style>
</head>
<body>
<main>
  <header>
    <time datetime="2022-06-15">Juin 2022</time>
    <h1>CKEditor 5 – DecoupledEditor</h1>
  </header>
  <div class="editor-container">
    <!-- The toolbar will be rendered in this container. -->
    <div id="toolbar-editor"></div>
    <!-- This container will become the editable. -->
    <div id="editor">
      <h1>Titre</h1>
      <p>Paragraphe</p>
    </div>
  </div>
</main>
<script>
/**
 * https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-upload/src/adapters/base64uploadadapter.js
 */
class Adapter {
  /**
   * Creates a new adapter instance.
   * @param {module:upload/filerepository~FileLoader} loader
   */
  constructor(loader) {
    /**
     * `FileLoader` instance to use during the upload.
     * @member {module:upload/filerepository~FileLoader} #loader
     */
    this.loader = loader;
  }
 
  /**
   * Starts the upload process.
   * @see module:upload/filerepository~UploadAdapter#upload
   * @returns {Promise}
   */
  upload() {
    return new Promise((resolve, reject) => {
      const reader = this.reader = new window.FileReader();
 
      reader.addEventListener('load', () => {
        resolve({
          default: reader.result
        });
      });
 
      reader.addEventListener('error', err => {
        reject(err);
      });
 
      reader.addEventListener('abort', () => {
        reject();
      });
 
      this.loader.file.then(file => {
        reader.readAsDataURL(file);
      });
    });
  }
 
  /**
   * Aborts the upload process.
   * @see module:upload/filerepository~UploadAdapter#abort
   * @returns {Promise}
   */
  abort() {
    this.reader.abort();
  }
}
 
function CustomUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository')
    .createUploadAdapter = (loader) => {
      return new Adapter(loader);
    };
}
/**
 *
 */
DecoupledEditor
  .create(document.querySelector('#editor'), {
    extraPlugins: [CustomUploadAdapterPlugin],
    language: "fr",
 
  })
  .then(editor => {
    window.editor = editor;
    const toolbarContainer = document.querySelector('#toolbar-editor');
 
    toolbarContainer.appendChild(editor.ui.view.toolbar.element);
    editor.model.document.on( 'change:data', () => {
        //console.log(editor.getData() );
    } );
  })
  .catch(error => {
    console.error(error);
  });
    </script>
</body>
</html>

[moimp]

Bonjour,
Je précise mon besoin. Je veux télécharger une image à partir du disque de l'utilisateur. Je maîtrise plutôt bien le traitement et les contrôles côté serveur avec php.

A l'étape 1 du configurateur en ligne, je choisis l'éditeur Decoupled Document.
Dans la liste des plugins du configurateur en ligne (étape 2), je n'arrive pas à trouver ni à installer le(s) plugin(s) nécessaire(s) et gratuit(s) qui à partir du bouton "Insérer une image" me permettrait(aient) de télécharger cette image.

[NoSmoking]

Je précise mon besoin. Je veux télécharger une image à partir du disque de l'utilisateur.

C'est ce que fait exemple que j'ai donné

A l'étape 1 du configurateur en ligne, je choisis l'éditeur Decoupled Document.
Dans la liste des plugins du configurateur en ligne (étape 2), je n'arrive pas à trouver ni à installer le(s) plugin(s) nécessaire(s) et gratuit(s) qui à partir du bouton "Insérer une image" me permettrait(aient) de télécharger cette image.

Tu supprimes le plugin CKFinder, payant, et CKFinder upload adapter puis tu ajoutes le plugin Base64 upload adapter, c'est l'intégration du code que j'ai fourni.

[moimp]

Bonjour,
J'ai essayé ton script en base64 et il fonctionne. Merci.
Mais j'ai encore des questions:
A quoi sert la classe 'mf' qui n'est pas utilisée.
Je suis embêté avec le codage. Je ne sais pas si je dois le décoder pour afficher mon image à la fois dans le fichier de destination et, dans le cas de rappel pour modification dans l'éditeur. Je vais tester.

[NoSmoking]

A quoi sert la classe 'mf' qui n'est pas utilisée.

A rien c'est le code tiré de CKEditor, je l'ai supprimé

Je suis embêté avec le codage. Je ne sais pas si je dois le décoder pour afficher mon image à la fois dans le fichier de destination et, dans le cas de rappel pour modification dans l'éditeur. Je vais tester.

Ce genre de gestion sur base data:image/png;base64 est super gourmande en mémoire, donc à mettre en BdD, pour une meilleur gestion il convient de gérer plutôt les url des images méthode bien moins gourmande.

Après tout dépend du besoin final.

[moimp]

Ouf! Merci, un très, très grand MERCI