Couleur mode éditeur

par SNWarbard Lun 24 Avr 2017 - 21:38

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://eronia.forumactif.com

Description du problème

Salut,

J'aimerais savoir si c'est possible de mettre une palette ou code html à la place de la liste de couleur ou au moins offrir plus de possibilités pour les couleurs lorsqu'on écrit un message ou édite.

Cordialement,
SNW.

par lmc38510 Lun 24 Avr 2017 - 21:54

Bonjour "SNW"

Oui possible comme celui de FA
Couleur mode éditeur Snwarb10

Suffit de mettre ce JS dans ton PA - modules - html & javascripts - gestion des codes javascript
coché sur toutes les pages ...

Voir le code:

Code:: $(function(){$(function(){ if ($("#text_editor_textarea").length != 0) { $.sceditor.command.get('color')._menu = function (editor, caller, callback) { var mColorBasic = [], html = $('<div />'); // liste des couleurs mColorBasic["Noir"] = "#000000"; mColorBasic["Bleu foncé"] = "#00008B"; mColorBasic["Sarcelle"] = "#008080"; mColorBasic["Vert foncé"] = "#006400"; mColorBasic["Indigo"] = "#4B0082"; mColorBasic["Cramoisi"] = "#DC143C"; mColorBasic["Orange"] = "#FF4500"; mColorBasic["Marron"] = "#663300"; mColorBasic["Gris foncé"] = "#666666"; mColorBasic["Bleu royal"] = "#4169E1"; mColorBasic["Turquoise foncé"] = "#00CED1"; mColorBasic["Vert"] = "#008000"; mColorBasic["Pourpre"] = "#9400D3"; mColorBasic["Rouge"] = "#FF0000"; mColorBasic["Orange clair"] = "#FF9933"; mColorBasic["Sienne"] = "#A0522D"; mColorBasic["Gris clair"] = "#D3D3D3"; mColorBasic["Bleu ciel"] = "#87CEEB"; mColorBasic["Cyan"] = "#00FFFF"; mColorBasic["Vert pomme"] = "#32CD32"; mColorBasic["Mauve"] = "#DA70D6"; mColorBasic["Saumon"] = "#FA8072"; mColorBasic["Or"] = "#FFD700"; mColorBasic["Brun clair"] = "#CD853F"; mColorBasic["Blanc"] = "#FFFFFF"; mColorBasic["Turquoise pâle"] = "#AFEEEE"; mColorBasic["Bleu vert"] = "#7FFFD4"; mColorBasic["Vert pâle"] = "#98FB98"; mColorBasic["Rose"] = "#FFC0CB"; mColorBasic["Pêche"] = "#FFDAB9"; mColorBasic["Jaune"] = "#FFFF00"; mColorBasic["Bois"] = "#DEB887"; // fin de la liste des couleurs for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;"></span></div>'); html.find('span').click(function(e) { callback($(this).attr('color')); editor.closeDropDown(true); e.preventDefault(); }); editor.createDropDown(caller, "color-picker", html); } } })});

par SNWarbard Lun 24 Avr 2017 - 22:05

Merci pour la réponse rapide,
Malheureusement le rendu n'est pas le même que sur l'image puisque quand je click sur couleur rien ne s'ouvre x)

Est-ce possible de m'aider à le fixer svp ^^

Merci,
SNW

par lmc38510 Lun 24 Avr 2017 - 22:11

SNWarbard a écrit:Malheureusement le rendu n'est pas le même que sur l'image puisque quand je click sur couleur rien ne s'ouvre x)

En haut de la page (ou tu as placé le JS)
HTML & JAVASCRIPT
Gestion des codes Javascript

Codes Javascript
Activer la gestion des codes Javascript : coche le case -> "oui"

par SNWarbard Lun 24 Avr 2017 - 22:16

Oui j'ai fais tout ça ... j'ai d'autres javascript mais rien avoir avec ça ^^

par lmc38510 Lun 24 Avr 2017 - 22:18

Heuuuuu ..... milles excuses "SNW" Embarassed

J'oublie l'essentiel ... ajoute dans ton CSS:

Code:: /* Icônes couleur dans la palette */ .color-option { display: inline-block !important; width: 15px !important; /* largeur de l'icône couleur */ height: 15px !important; /* hauteur de l'icône couleur */ border: 2px solid #fff !important; /* cadre blanc sur l'icône couleur */ margin: 3px !important; /* espace entre chaque icône */ box-shadow: 0 0 2px #778899; /* ombre */ cursor: pointer !important; } .color-option span{ display: block !important; width: 15px !important; /* largeur de l'icône couleur */ height: 15px !important; /* hauteur de l'icône couleur */ } .color-option, .color-option span { border-radius: 2px; /* arrondi */ } /* Palette complète - la largeur influence le nombre d'icônes affichées */ .sceditor-dropdown.sceditor-color-picker { width: 200px !important; /* largeur de la palette complète */ height: 100px !important; /* hauteur de la palette complète */ padding: 5px !important; border-radius: 5px !important; }

Sorry

par SNWarbard Lun 24 Avr 2017 - 22:27

Hahah oui SNW,

pas de problèmes, au final j'obtiens ça mais ça me convient tout autant
voilà le résultat Couleur mode éditeur 873680palette

Merci,
SNW

par lmc38510 Lun 24 Avr 2017 - 22:38

Comme il y a pas mal d'années que j'avais fais cette modif reflexion

Jette un oeil dans ton PA - Général - Messages et Emails - configuration

Presque en bas de page tu as:
Type de palette de couleurs de l'éditeur : Étendue ... Simple -> Coche étendue

Y a plus besoin de mes indications précédentes
vire mon JS et mon CSS .... Sourire2

par SNWarbard Lun 24 Avr 2017 - 22:41

hahaha pas de problème je vais voir si c'est la même chose sinon je remet en tout cas merci

Couleur mode éditeur