Jump to content
Invision Board France
  • 0
Sign in to follow this  
cybero

4.3 ckeditor - Tabulation

Question

cybero

Hello :)

 

J'essaye de changer le comportement de la touche Tabulation dans l'éditeur riche d'IPS (ckeditor)

Et... je n'y arrive pas ! :(

 

Au lieu que la touche Tabulation fasse changer le focus sur la page, j'aimerais qu'elle insère des espaces, comme dans un éditeur de texte

J'ai trouvé ceci sur le site de ckeditor mais tout ce que j'ai pu essayer n'a pas fonctionné

 

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-tabSpaces

 

Par exemple modification du fichier applications/core/interface/ckeditor/ckeditor/config.js de la sorte: (Ajouté en début de ligne, j'ai essayé en fin de ligne aussi...)

CKEDITOR.editorConfig=function(a){a.tabSpaces=4;a.toolbarGroups=[{name:"document",groups:["mode","document","doctools"]},{name:"clipboard",groups:["clipboard","undo"]},{name:"editing",groups:["find","selection","spellchecker"]},{name:"forms"},{name:"basicstyles",groups:["basicstyles","cleanup"]},{name:"paragraph",groups:["list","indent","blocks","align","bidi"]},{name:"links"},{name:"insert"},{name:"styles"},{name:"colors"},{name:"tools"},{name:"others"},{name:"about"}];a.removeButtons="Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript";
a.removeDialogTabs="link:advanced";};

 

J'ai posé la question la question au support... ce n'est pas de leur ressort :arg:

Révélation

Hello,

Unfortunately, this issue is beyond the scope of our usual technical support.

 

Our technical support is designed to assist you with the built-in functionality of our software or to address problems running our software in a normal manner in a hosting environment that is the norm for the majority of web hosting providers. Special services (conversions, server transfers, database management, etc.), customizations (both code and design), and sever-level assistance are outside the scope of support.

We do have a community where other administrators may be able to assist you, and I would encourage posting your query there. You can log in there with the same Email Address and password that you use to log into the client area.

 

Sorry that we were not able to assist you with this and thank you for your understanding. Please let us know if you have any other questions or concerns.
For more information about our scope of support, please see our Standards of Service.


J'ai posé la question sur la communauté IPS sans succès : https://invisioncommunity.com/forums/topic/450164-ckeditor-tabulation-key-behavior

 

Peut-être aurez-vous des idées sur comment procéder ?

 

Merci d'avance !

Share this post


Link to post
Share on other sites

14 answers to this question

Recommended Posts

  • 0
Youp3

Bonjour,

 

sans avoir étudié le sujet, et même si cela parait basique, as-tu bien vidé le cache du navigateur après la modification ?

Share this post


Link to post
Share on other sites
  • 0
cybero

Oui :drop:

J'ai même ajouté un peu de log javascript (qui s'affiche bien) mais sans résultat dans l'éditeur 

Share this post


Link to post
Share on other sites
  • 0
Youp3

Comme toujours avec la suite, c’est lié à la mise en cache des fichiers javascript, sans possibilité de forcer leur reconstruction. Seules les mises à jour de la suite forcent cette reconstruction.

Dans mon cas, le fichier chargé dans le navigateur c’est /applications/core/interface/ckeditor/ckeditor/config.js?t=I8IM

Et même en allant dans le PCA dans la section support, en indiquant que quelque chose ne va pas, cela ne force pas la mise à jour de ce fichier caché.

 

Donc du coup c’est quand même une question pour le support IPS ;)

Share this post


Link to post
Share on other sites
  • 0
cybero

C'est bien ce fichier config.js que j'ai modifié et dans lequel j'ai ajouté un console.log qui est bien pris en compte

 

js unminifié :

 

Révélation

/*
 Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/

CKEDITOR.editorConfig=function(a) {
  
    a.tabSpaces=4;
    console.log("ok !");
  
    a.toolbarGroups=[ {
        name: "document", groups: ["mode", "document", "doctools"]
    }
    ,
    {
        name: "clipboard", groups: ["clipboard", "undo"]
    }
    ,
    {
        name: "editing", groups: ["find", "selection", "spellchecker"]
    }
    ,
    {
        name: "forms"
    }
    ,
    {
        name: "basicstyles", groups: ["basicstyles", "cleanup"]
    }
    ,
    {
        name: "paragraph", groups: ["list", "indent", "blocks", "align", "bidi"]
    }
    ,
    {
        name: "links"
    }
    ,
    {
        name: "insert"
    }
    ,
    {
        name: "styles"
    }
    ,
    {
        name: "colors"
    }
    ,
    {
        name: "tools"
    }
    ,
    {
        name: "others"
    }
    ,
    {
        name: "about"
    }
    ];
    a.removeButtons="Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript";
    a.removeDialogTabs="link:advanced"
}

;

 

 

 

Tu veux dire que bien que je vois mon message dans la console, cela ne serait pas suffisant et qu'il y aurait une reconstruction supplémentaire ?

Après je me dis qu'on peut configurer l'éditeur via l'admin... du coup cette conf est peut-être rechargée/surchargée/écrasée autre part... :wacko:

Share this post


Link to post
Share on other sites
  • 0
Youp3

Pour ton cas je ne sais pas. Mais dans le mien, j’ai modifié le fichier (je n’ai pas ajouté console.log) et en mode développeur dans Firefox et Opera, le fichier js chargé ne contient pas ma modification. C’est donc normal que la modification soit « sans effet ».

Share this post


Link to post
Share on other sites
  • 0
Youp3

Rectification : j’ai ajouté le console.log et maintenant j’ai toutes mes modifications. Par contre le paramètre pour les tabulations n’est pas pris en compte. Donc là c’est compliqué de savoir si cela vient de la suite ou de ckeditor.

Share this post


Link to post
Share on other sites
  • 0
Youp3

J’ai essayé de mettre dans la partie config du fichier l’ajout suivant :

tabSpaces =4

Sans succès. Je penche donc plus pour un problème lié à la suite IPS qui prend le dessus sur la gestion de la tabulation.

Share this post


Link to post
Share on other sites
  • 0
cybero

Merci pour tes recherches & tests :wise:

 

Je retenterai le ticket au support demain... et chercherai en parallèle si (comment) l'éditeur est (sur)chargé par IPS

Sur la communauté IPS la seule personne qui m'a répondu a dit avoir carrément supprimé le fichier config.js... sans aucun changement de comportement de l'éditeur 🤔

Share this post


Link to post
Share on other sites
  • 0
Youp3

J’ai poussé mes investigations et j’ai finalement trouvé ! 😎

 

La version de CKEditor embarquée dans IPS ne semble pas gérer le plugin « Tab Key Handling (tab) ».

Déjà le dossier plugins ne contient pas le dossier tab. Il faut donc télécharger le plugin ici puis envoyer sur son serveur dans le dossier « applications/core/interface/ckeditor/ckeditor/plugins » le dossier tab.

 

Dans le fichier build-config.js, il faut ajouter « tab:1, », par exemple juste avant « toolbar:1, ».

 

Ensuite dans le fichier ckeditor.js, ajouter le code suivant :

(function(){function k(c){return{editorFocus:!1,canUndo:!1,modes:{wysiwyg:1},exec:function(d){if(d.editable().hasFocus){var e=d.getSelection(),b;if(b=(new CKEDITOR.dom.elementPath(e.getCommonAncestor(),e.root)).contains({td:1,th:1},1)){var e=d.createRange(),a=CKEDITOR.tools.tryThese(function(){var a=b.getParent().$.cells[b.$.cellIndex+(c?-1:1)];a.parentNode.parentNode;return a},function(){var a=b.getParent(),a=a.getAscendant("table").$.rows[a.$.rowIndex+(c?-1:1)];return a.cells[c?a.cells.length-1:
0]});if(a||c)if(a)a=new CKEDITOR.dom.element(a),e.moveToElementEditStart(a),e.checkStartOfBlock()&&e.checkEndOfBlock()||e.selectNodeContents(a);else return!0;else{for(var f=b.getAscendant("table").$,a=b.getParent().$.cells,f=new CKEDITOR.dom.element(f.insertRow(-1),d.document),g=0,h=a.length;g<h;g++)f.append((new CKEDITOR.dom.element(a[g],d.document)).clone(!1,!1)).appendBogus();e.moveToElementEditStart(f)}e.select(!0);return!0}}return!1}}}var h={editorFocus:!1,modes:{wysiwyg:1,source:1}},g={exec:function(c){c.container.focusNext(!0,
c.tabIndex)}},f={exec:function(c){c.container.focusPrevious(!0,c.tabIndex)}};CKEDITOR.plugins.add("tab",{init:function(c){for(var d=!1!==c.config.enableTabKeyTools,e=c.config.tabSpaces||0,b="";e--;)b+=" ";if(b)c.on("key",function(a){9==a.data.keyCode&&(c.insertText(b),a.cancel())});if(d)c.on("key",function(a){(9==a.data.keyCode&&c.execCommand("selectNextCell")||a.data.keyCode==CKEDITOR.SHIFT+9&&c.execCommand("selectPreviousCell"))&&a.cancel()});c.addCommand("blur",CKEDITOR.tools.extend(g,h));c.addCommand("blurBack",
CKEDITOR.tools.extend(f,h));c.addCommand("selectNextCell",k());c.addCommand("selectPreviousCell",k(!0))}})})();

Il peut être inséré juste avant :

c.prototype={MIN_SELECTION_CHECK_INTERVAL:500

Toujours dans le fichier ckeditor.js, dans la liste suivante, ajouter « ,tab » à la fin

CKEDITOR.config.plugins="basicstyles,dialogui,dialog,notification,button,toolbar,clipboard,panelbutton,panel,floatpanel,colorbutton,colordialog,divarea,elementspath,enterkey,entities,floatingspace,listblock,richcombo,font,htmlwriter,indent,indentblock,indentlist,justify,list,sourcearea,undo,lineutils,widgetselection,widget"

 

Et bien sûr pour être complet, dans le fichier config.js, ajouter « a .tabSpaces =4 ; » par exemple juste avant « a.toolbarGroups= »

 

Merci qui ? :D;)

 

Bon, j’avoue que j’y ai passé quelques heures quand même. :P

  • Thanks 1

Share this post


Link to post
Share on other sites
  • 0
cybero

Alors là... non mais alors là... Smiley respect se prosterne à genoux

 

Merci !!

Je teste cela dès que possible default_gni.gif

 

Edit: Bon ça marche super !

Je me demande si cela serait possible de gérer le Maj-Tab ?

 

Re-edit: Encore Merci !

Edited by cybero

Share this post


Link to post
Share on other sites
  • 0
Youp3

Qu’entends-tu par gérer le Maj-Tab ? Mettre des espaces en majuscules ? :P

Share this post


Link to post
Share on other sites
  • 0
cybero

Mais non rooooh :lol:

 

Tab = Ajout de x espaces

Maj-Tab = Suppression de x espaces

 

Un peu comme dans les éditeurs un peu avancés 

Mais alors là c'est vraiment le summum du truc, et vraiment pas indispensable, alors n'y passe pas des heures !

 

Dans le code indiqué au-dessus, je vois

 

a.data.keyCode == CKEDITOR.SHIFT

 

Alors bon... ça doit pas être impossible :D

 

Edited by cybero

Share this post


Link to post
Share on other sites
  • 0
Youp3

Cela ne parait pas si simple que ça en regardant la doc. Je passe mon tour.

Share this post


Link to post
Share on other sites
  • 0
cybero

Ok pas de soucis

 

Merci pour tout :wise:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site, you agree to our Terms of Use. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.