Aller au contenu
Invision Board France
  • 0
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 !

Partager ce message


Lien à poster
Partager sur d’autres sites

14 réponses à cette question

Messages recommandés

  • 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 ?

Partager ce message


Lien à poster
Partager sur d’autres 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 

Partager ce message


Lien à poster
Partager sur d’autres 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 ;)

Partager ce message


Lien à poster
Partager sur d’autres 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:

Partager ce message


Lien à poster
Partager sur d’autres 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 ».

Partager ce message


Lien à poster
Partager sur d’autres 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.

Partager ce message


Lien à poster
Partager sur d’autres 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.

Partager ce message


Lien à poster
Partager sur d’autres 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 🤔

Partager ce message


Lien à poster
Partager sur d’autres 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

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres 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 !

Modifié par cybero

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Youp3

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

Partager ce message


Lien à poster
Partager sur d’autres 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

 

Modifié par cybero

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Youp3

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

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
cybero

Ok pas de soucis

 

Merci pour tout :wise:

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×

Information importante

En utilisant ce site, vous êtes d’accords avec nos Conditions d’utilisation. Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookie, sinon nous supposerons que vous êtes d’accord pour continuer.