Aller au contenu
Invision Board France
  • 0

ckeditor - Tabulation


cybero

Question

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 !

Lien vers le commentaire
Partager sur d’autres sites

14 réponses à cette question

Messages recommandés

  • 0
  • Administration

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
Lien vers le commentaire
Partager sur d’autres sites

  • 0
  • Administration

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 ?

Lien vers le commentaire
Partager sur d’autres sites

  • 0
  • Administration

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 ;)

Lien vers le commentaire
Partager sur d’autres sites

  • 0

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:

Lien vers le commentaire
Partager sur d’autres sites

  • 0
  • Administration

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 ».

Lien vers le commentaire
Partager sur d’autres sites

  • 0
  • Administration

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.

Lien vers le commentaire
Partager sur d’autres sites

  • 0
  • Administration

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.

Lien vers le commentaire
Partager sur d’autres sites

  • 0

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 🤔

Lien vers le commentaire
Partager sur d’autres sites

  • 0

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
Lien vers le commentaire
Partager sur d’autres sites

  • 0

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
Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.

Invité
Répondre à cette question…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

Chargement
×
×
  • Créer...

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 cookies, sinon nous supposerons que vous êtes d’accord pour continuer.